/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED TOOLS SECTIONS (E21)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-sections-tools.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.22  (E21 — Visual Enhancement Roadmap v2 — closes Stage 7)
 * @depends     ldt-tokens-enhanced.css                  (E1)
 *              ldt-enhanced-base.css                    (E2)
 *              ldt-enhanced-animations.css              (E3 — keyframes:
 *                                                            ldt-fade-up)
 *              ldt-enhanced-sections-booking.css        (E19 — submit pills)
 *              ldt-enhanced-sections-booking-extras.css (E20 — feature-grid)
 *
 *   Polishes the standalone tools / utilities ecosystem that sits parallel
 *   to the booking flows — practical calculators and converters travelers
 *   reach for during planning:
 *
 *     section-tools-index.php          /tools/ landing page (filterable grid)
 *     section-currency-converter.php   Live currency converter
 *     section-tip-calculator.php       Region-aware tip calculator
 *     section-tool-card.php            Reusable tool card (multi-variant)
 *     section-tool-related.php         "Related tools" rail
 *     section-tool-switcher.php        Sidebar/horizontal tool nav
 *     section-tools-categories.php     Tools grouped by category
 *     section-tools-featured.php       Numbered featured list
 *
 *   PURE CSS LAYER — no PHP partial is touched. Same approach as E4-E20.
 *   Closes Stage 7 (Tools).
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. SHARED HEADER POLISH
 *
 * All tools sections (.ldt-cc, .ldt-tip, .ldt-tools-index, .ldt-tool-related,
 * .ldt-tools-cats, .ldt-tools-featured) use parallel header patterns:
 *   __header > __title + __subtitle.
 * Unified via comma selectors.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-cc__title,
body .ldt-tip__title,
body .ldt-tools-index__title,
body .ldt-tool-related__title,
body .ldt-tools-cats__title,
body .ldt-tools-featured__title {
    background: var(--ldt-gradient-text,
                linear-gradient(135deg, #003580 0%, #0057b8 50%, #ff8c00 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-primary, #003580);  /* fallback */
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

body .ldt-cc__subtitle,
body .ldt-tip__subtitle,
body .ldt-tools-index__subtitle,
body .ldt-tools-cats__subtitle,
body .ldt-tools-featured__subtitle {
    color: var(--ldt-gray-600, #64748b);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. CURRENCY CONVERTER (.ldt-cc)
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-cc {
    padding: 32px 0;
}

body .ldt-cc__header {
    text-align: center;
    margin-bottom: 24px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

body .ldt-cc__form {
    background: var(--ldt-glass-strong-light, rgba(255, 255, 255, 0.96));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow:
        0 12px 32px rgba(0, 53, 128, 0.10),
        0 0 0 1px rgba(255, 140, 0, 0.06);
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
}

/* Row — label + control */
body .ldt-cc__row {
    margin-bottom: 14px;
}

body .ldt-cc__row-label {
    display: block;
    color: var(--ldt-gray-600, #64748b);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

body .ldt-cc__row-control {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-input, 0.75rem);
    padding: 10px 14px;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        box-shadow 200ms var(--ldt-ease-portal, ease);
}

body .ldt-cc__row-control:focus-within {
    background: #ffffff;
    border-color: var(--ldt-accent, #ff8c00);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18);
}

body .ldt-cc__amount-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ldt-dark, #1e293b);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    outline: none;
    min-width: 0;
}

body .ldt-cc__amount-input::placeholder {
    color: var(--ldt-gray-400, #94a3b8);
    font-weight: 500;
}

/* Result row — accent gradient text result */
body .ldt-cc__row--result .ldt-cc__row-control {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.06) 0%,
        rgba(255, 140, 0, 0.02) 100%
    );
    border-color: rgba(255, 140, 0, 0.20);
}

body .ldt-cc__result {
    flex: 1;
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-accent, #ff8c00);  /* fallback */
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    min-width: 0;
}

/* Currency picker dropdown */
body .ldt-cc__picker {
    background: #ffffff;
    border: 1px solid rgba(0, 53, 128, 0.12);
    border-radius: var(--ldt-radius-input, 0.75rem);
    padding: 6px 10px;
    color: var(--ldt-primary, #003580);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        border-color 200ms var(--ldt-ease-portal, ease),
        background 200ms var(--ldt-ease-portal, ease);
}

body .ldt-cc__picker:hover {
    border-color: rgba(255, 140, 0, 0.40);
    background: rgba(255, 140, 0, 0.04);
}

/* Swap button — accent gradient circle between FROM and TO */
body .ldt-cc__swap-wrap {
    display: flex;
    justify-content: center;
    margin: -2px 0;
    position: relative;
    z-index: 1;
}

body .ldt-cc__swap {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ldt-glass-strong-light, rgba(255, 255, 255, 0.96));
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(255, 140, 0, 0.30);
    transition:
        transform 300ms var(--ldt-ease-portal, ease),
        box-shadow 300ms var(--ldt-ease-portal, ease),
        filter 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-cc__swap:hover {
        transform: rotate(180deg) scale(1.06);
        box-shadow: 0 10px 22px rgba(255, 140, 0, 0.45);
        filter: brightness(1.06);
    }
}

/* Meta row — rate line + disclaimer */
body .ldt-cc__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 53, 128, 0.06);
}

body .ldt-cc__rate {
    color: var(--ldt-gray-700, #334155);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ldt-font-mono, 'JetBrains Mono', monospace);
}

body .ldt-cc__disclaimer {
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 11px;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. TIP CALCULATOR (.ldt-tip)
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tip {
    padding: 32px 0;
}

body .ldt-tip__header {
    text-align: center;
    margin-bottom: 24px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

body .ldt-tip__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    body .ldt-tip__grid {
        grid-template-columns: 1fr;
    }
}

body .ldt-tip__form {
    background: var(--ldt-glass-strong-light, rgba(255, 255, 255, 0.96));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 12px 32px rgba(0, 53, 128, 0.10);
    padding: 24px;
}

/* Region row — country chips */
body .ldt-tip__region-label {
    display: block;
    color: var(--ldt-gray-600, #64748b);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

body .ldt-tip__region-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

body .ldt-tip__region-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-gray-600, #64748b);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tip__region-chip:not(.is-active):hover {
        background: rgba(255, 140, 0, 0.06);
        border-color: rgba(255, 140, 0, 0.30);
        color: var(--ldt-accent-dark, #e07a00);
    }
}

body .ldt-tip__region-chip.is-active {
    background: var(--ldt-gradient-brand,
                linear-gradient(135deg, #003580 0%, #0057b8 100%));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 53, 128, 0.30);
}

body .ldt-tip__region-pct {
    color: inherit;
    font-weight: 800;
    font-size: 11px;
    opacity: 0.85;
}

/* Input groups */
body .ldt-tip__input {
    margin-bottom: 14px;
}

body .ldt-tip__input > label,
body .ldt-tip__input > span:first-child {
    display: block;
    color: var(--ldt-gray-600, #64748b);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* Bill input wrapper */
body .ldt-tip__bill-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-input, 0.75rem);
    padding: 12px 14px;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        box-shadow 200ms var(--ldt-ease-portal, ease);
}

body .ldt-tip__bill-wrap:focus-within {
    background: #ffffff;
    border-color: var(--ldt-accent, #ff8c00);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18);
}

body .ldt-tip__bill-currency {
    color: var(--ldt-accent, #ff8c00);
    font-weight: 800;
    font-size: 1.125rem;
    flex-shrink: 0;
}

body .ldt-tip__bill {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ldt-dark, #1e293b);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    outline: none;
    min-width: 0;
}

/* Tip percentage row — preset buttons */
body .ldt-tip__pct-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body .ldt-tip__pct-btn {
    flex: 1;
    min-width: 60px;
    padding: 10px 8px;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-input, 0.75rem);
    color: var(--ldt-gray-600, #64748b);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tip__pct-btn:not(.is-active):hover {
        background: rgba(255, 140, 0, 0.06);
        border-color: rgba(255, 140, 0, 0.30);
        color: var(--ldt-accent-dark, #e07a00);
    }
}

body .ldt-tip__pct-btn.is-active {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    border-color: transparent;
    color: #ffffff;
    box-shadow: var(--ldt-shadow-accent-soft, 0 4px 12px rgba(255, 140, 0, 0.30));
}

/* Custom tip input */
body .ldt-tip__pct-custom {
    flex: 1;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    background: rgba(0, 53, 128, 0.04);
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-input, 0.75rem);
    padding: 0 12px;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-tip__pct-custom:focus-within {
    background: #ffffff;
    border-color: var(--ldt-accent, #ff8c00);
}

body .ldt-tip__pct-custom input {
    flex: 1;
    background: transparent;
    border: none;
    width: 100%;
    padding: 10px 0;
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    outline: none;
}

/* Region note (live region for accessibility) */
body .ldt-tip__region-note {
    display: block;
    margin-top: 6px;
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 12px;
    font-style: italic;
}

/* Stepper (people count) — shares pattern with E17 budget calc */
body .ldt-tip__stepper {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    overflow: hidden;
}

body .ldt-tip__stepper-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--ldt-primary, #003580);
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: background 200ms var(--ldt-ease-portal, ease);
}

body .ldt-tip__stepper-btn:hover:not(:disabled) {
    background: rgba(255, 140, 0, 0.10);
    color: var(--ldt-accent, #ff8c00);
}

body .ldt-tip__stepper-input {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--ldt-dark, #1e293b);
    font-weight: 800;
    font-size: 14px;
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. TOOLS INDEX (.ldt-tools-index) — /tools/ landing page
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tools-index {
    padding: 32px 0;
}

body .ldt-tools-index__header {
    text-align: center;
    margin-bottom: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Filter pills */
body .ldt-tools-index__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 2px 8px rgba(0, 53, 128, 0.04);
}

body .ldt-tools-index__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-gray-600, #64748b);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tools-index__filter:not(.is-active):hover {
        background: rgba(255, 140, 0, 0.06);
        border-color: rgba(255, 140, 0, 0.30);
        color: var(--ldt-accent-dark, #e07a00);
    }
}

body .ldt-tools-index__filter.is-active {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    border-color: transparent;
    color: #ffffff;
    box-shadow: var(--ldt-shadow-accent-soft, 0 4px 12px rgba(255, 140, 0, 0.30));
}

/* Filter count pill (inside filter button) */
body .ldt-tools-index__filter-count {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

body .ldt-tools-index__filter.is-active .ldt-tools-index__filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Grid */
body .ldt-tools-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

body .ldt-tools-index__item {
    transition: opacity 250ms var(--ldt-ease-portal, ease);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. TOOL CARD (.ldt-tool-card) — reusable across all tool surfaces
 *
 * Variants: --horizontal/--vertical (orientation), --sm/--md/--lg (size),
 * --finance/--health/--travel/etc. (category), .is-featured (highlight).
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tool-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.06);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition:
        transform 350ms var(--ldt-ease-portal, ease),
        border-color 350ms var(--ldt-ease-portal, ease),
        box-shadow 350ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tool-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 140, 0, 0.30);
        box-shadow:
            0 18px 36px -8px rgba(0, 53, 128, 0.18),
            0 0 0 1px rgba(255, 140, 0, 0.10);
    }
}

/* Vertical orientation — icon on top */
body .ldt-tool-card--vertical {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

[dir="rtl"] body .ldt-tool-card--vertical,
.ldt-rtl body .ldt-tool-card--vertical {
    text-align: right;
}

/* Featured — accent gradient frame */
body .ldt-tool-card.is-featured {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.06) 0%,
        rgba(255, 140, 0, 0.02) 100%
    );
    border-color: rgba(255, 140, 0, 0.30);
    box-shadow:
        0 8px 22px rgba(255, 140, 0, 0.10),
        0 0 0 1px rgba(255, 140, 0, 0.10);
}

/* Icon — 48×48 rounded square (gradient varies by category) */
body .ldt-tool-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: var(--ldt-shadow-accent-soft, 0 4px 12px rgba(255, 140, 0, 0.25));
    transition: transform 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tool-card:hover .ldt-tool-card__icon {
        transform: scale(1.06) rotate(-3deg);
    }
}

/* Per-category icon gradient */
body .ldt-tool-card--finance .ldt-tool-card__icon,
body .ldt-tool-card--money .ldt-tool-card__icon {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
}

body .ldt-tool-card--travel .ldt-tool-card__icon,
body .ldt-tool-card--planning .ldt-tool-card__icon {
    background: var(--ldt-gradient-brand,
                linear-gradient(135deg, #003580 0%, #0057b8 100%));
    box-shadow: 0 4px 12px rgba(0, 53, 128, 0.30);
}

body .ldt-tool-card--food .ldt-tool-card__icon,
body .ldt-tool-card--lifestyle .ldt-tool-card__icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}

/* Body */
body .ldt-tool-card__body {
    flex: 1;
    min-width: 0;
}

/* Featured / category badge */
body .ldt-tool-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(255, 140, 0, 0.16);
    color: var(--ldt-accent-dark, #e07a00);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

body .ldt-tool-card__title {
    color: var(--ldt-dark, #1e293b);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tool-card:hover .ldt-tool-card__title {
        color: var(--ldt-primary, #003580);
    }
}

body .ldt-tool-card__subtitle {
    color: var(--ldt-gray-600, #64748b);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* "Go" arrow */
body .ldt-tool-card__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.10);
    color: var(--ldt-accent, #ff8c00);
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    transition:
        background 300ms var(--ldt-ease-portal, ease),
        color 300ms var(--ldt-ease-portal, ease),
        transform 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tool-card:hover .ldt-tool-card__go {
        background: var(--ldt-gradient-accent,
                    linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
        color: #ffffff;
        transform: translateX(2px) scale(1.06);
    }
    [dir="rtl"] body .ldt-tool-card:hover .ldt-tool-card__go,
    .ldt-rtl body .ldt-tool-card:hover .ldt-tool-card__go {
        transform: translateX(-2px) scale(1.06);
    }
}

[dir="rtl"] body .ldt-tool-card__go,
.ldt-rtl body .ldt-tool-card__go {
    transform: scaleX(-1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. TOOL RELATED (.ldt-tool-related) — "Related tools" rail
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tool-related {
    padding: 24px 0;
}

body .ldt-tool-related__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

body .ldt-tool-related__view-all {
    color: var(--ldt-primary, #003580);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition:
        color 200ms var(--ldt-ease-portal, ease),
        gap 200ms var(--ldt-ease-portal, ease);
}

body .ldt-tool-related__view-all:hover {
    color: var(--ldt-accent, #ff8c00);
    gap: 10px;
}

body .ldt-tool-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Fallback link — when tool exists but card hasn't loaded */
body .ldt-tool-related__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    border: 1px dashed rgba(0, 53, 128, 0.20);
    border-radius: var(--ldt-radius-input, 0.75rem);
    color: var(--ldt-gray-600, #64748b);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-tool-related__fallback:hover {
    background: rgba(255, 140, 0, 0.06);
    border-color: rgba(255, 140, 0, 0.40);
    color: var(--ldt-accent-dark, #e07a00);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. TOOL SWITCHER (.ldt-ts) — sidebar/horizontal nav
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-ts {
    padding: 16px 0;
}

body .ldt-ts__inner {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 4px 12px rgba(0, 53, 128, 0.04);
    padding: 14px;
}

body .ldt-ts__title {
    display: block;
    color: var(--ldt-accent, #ff8c00);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 10px;
}

body .ldt-ts__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Horizontal layout */
body .ldt-ts--horizontal .ldt-ts__list {
    flex-direction: row;
}

/* Sidebar layout */
body .ldt-ts--sidebar .ldt-ts__list {
    flex-direction: column;
}

body .ldt-ts__item {
    list-style: none;
    flex: 0 0 auto;
}

body .ldt-ts--sidebar .ldt-ts__item {
    width: 100%;
}

/* Link */
body .ldt-ts__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-gray-600, #64748b);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition:
        background 200ms var(--ldt-ease-portal, ease),
        border-color 200ms var(--ldt-ease-portal, ease),
        color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-ts--sidebar .ldt-ts__link {
    width: 100%;
    border-radius: var(--ldt-radius-input, 0.75rem);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-ts__link:hover {
        background: rgba(255, 140, 0, 0.06);
        border-color: rgba(255, 140, 0, 0.20);
        color: var(--ldt-accent-dark, #e07a00);
    }
}

/* Current */
body .ldt-ts__item.is-current .ldt-ts__link {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(255, 140, 0, 0.30);
}

body .ldt-ts__icon {
    font-size: 14px;
    line-height: 1;
}

body .ldt-ts__badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: rgba(0, 53, 128, 0.10);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    margin-left: 4px;
}

body .ldt-ts__item.is-current .ldt-ts__badge {
    background: rgba(255, 255, 255, 0.25);
}

[dir="rtl"] body .ldt-ts__badge,
.ldt-rtl body .ldt-ts__badge {
    margin-left: 0;
    margin-right: 4px;
}

/* Pin (current marker) */
body .ldt-ts__pin {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. TOOLS CATEGORIES (.ldt-tools-cats) — grouped by category
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tools-cats {
    padding: 32px 0;
}

body .ldt-tools-cats__header {
    text-align: center;
    margin-bottom: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

body .ldt-tools-cats__groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Group */
body .ldt-tools-cats__group {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    padding: 22px;
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.04);
}

/* Group head */
body .ldt-tools-cats__group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 53, 128, 0.06);
}

body .ldt-tools-cats__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: var(--ldt-shadow-accent-soft, 0 4px 12px rgba(255, 140, 0, 0.25));
}

/* Per-category accent on icon */
body .ldt-tools-cats__group--finance .ldt-tools-cats__group-icon,
body .ldt-tools-cats__group--money .ldt-tools-cats__group-icon {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
}

body .ldt-tools-cats__group--travel .ldt-tools-cats__group-icon,
body .ldt-tools-cats__group--planning .ldt-tools-cats__group-icon {
    background: var(--ldt-gradient-brand,
                linear-gradient(135deg, #003580 0%, #0057b8 100%));
    box-shadow: 0 4px 12px rgba(0, 53, 128, 0.30);
}

body .ldt-tools-cats__group-text {
    flex: 1;
    min-width: 0;
}

body .ldt-tools-cats__group-label {
    color: var(--ldt-dark, #1e293b);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 2px;
}

body .ldt-tools-cats__group-sub {
    color: var(--ldt-gray-600, #64748b);
    font-size: 13px;
    margin: 0;
}

body .ldt-tools-cats__group-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(0, 53, 128, 0.06);
    color: var(--ldt-primary, #003580);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

/* Group grid */
body .ldt-tools-cats__group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. TOOLS FEATURED (.ldt-tools-featured) — numbered featured list
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tools-featured {
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

/* Soft brand-tinted gradient background */
body .ldt-tools-featured__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 140, 0, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 85% 80%, rgba(0, 53, 128, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 53, 128, 0.02) 0%, transparent 100%);
    z-index: 0;
}

body .ldt-tools-featured > .ldt-container {
    position: relative;
    z-index: 1;
}

body .ldt-tools-featured__header {
    text-align: center;
    margin-bottom: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Eyebrow */
body .ldt-tools-featured__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 140, 0, 0.16);
    color: var(--ldt-accent-dark, #e07a00);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

/* Grid (ol, numbered) */
body .ldt-tools-featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ldt-featured;
}

body .ldt-tools-featured__item {
    list-style: none;
    position: relative;
    counter-increment: ldt-featured;
}

/* Number badge — accent gradient circle, top-left */
body .ldt-tools-featured__num {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    font-family: var(--ldt-font-mono, 'JetBrains Mono', monospace);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.35);
    border: 3px solid #ffffff;
}

[dir="rtl"] body .ldt-tools-featured__num,
.ldt-rtl body .ldt-tools-featured__num {
    left: auto;
    right: -10px;
}

/* Card wrap (contains the actual tool-card) */
body .ldt-tools-featured__card-wrap {
    height: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Currency converter: tighter padding */
    body .ldt-cc__form {
        padding: 18px;
    }

    body .ldt-cc__amount-input,
    body .ldt-cc__result {
        font-size: 1.25rem;
    }

    body .ldt-cc__swap {
        width: 36px;
        height: 36px;
    }

    /* Tip calculator: tighter */
    body .ldt-tip__form {
        padding: 18px;
    }

    body .ldt-tip__bill {
        font-size: 1.25rem;
    }

    /* Tools index: smaller filter pills */
    body .ldt-tools-index__filter {
        padding: 5px 12px;
        font-size: 12px;
    }

    /* Tools featured: smaller numbers */
    body .ldt-tools-featured__num {
        width: 28px;
        height: 28px;
        font-size: 11px;
        top: -8px;
        left: -8px;
    }

    [dir="rtl"] body .ldt-tools-featured__num,
    .ldt-rtl body .ldt-tools-featured__num {
        right: -8px;
    }

    /* Tools categories: smaller group head */
    body .ldt-tools-cats__group {
        padding: 16px;
    }

    body .ldt-tools-cats__group-icon {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }
}


/* ─── END OF ldt-enhanced-sections-tools.css ──────────────────────────────── */