/* =========================================================
   Pricing Tools — Calculator (FINAL CSS) — SINGLE SOURCE
   - No duplicates
   - Scoped to #pricing-tools-calculator
   ========================================================= */

#pricing-tools-calculator {
    padding-top: 90px;
    padding-bottom: 90px;

    --pt-bg: rgba(255, 255, 255, .72);
    --pt-border: rgba(15, 15, 18, .12);
    --pt-border-2: rgba(15, 15, 18, .08);
    --pt-text: rgba(15, 15, 18, .90);
    --pt-muted: rgba(15, 15, 18, .62);
    --pt-shadow: 0 18px 55px rgba(15, 15, 18, .10);
    --pt-shadow-sm: 0 10px 26px rgba(15, 15, 18, .10);
    --pt-radius: 16px;
    --pt-ring: 0 0 0 4px rgba(124, 58, 237, .14);
}

/* Typography */
#pricing-tools-calculator .display-3 {
    line-height: 1.55;
    color: var(--pt-text);
}

/* Labels spacing */
#pricing-tools-calculator label,
#pricing-tools-calculator .label {
    display: block;
    margin-bottom: 10px;
    line-height: 1.35;
}

#pricing-tools-calculator .mg-bottom-16px {
    margin-bottom: 18px !important;
}

/* Hints */
#pricing-tools-calculator .pt-hint,
#pricing-tools-calculator #pt-pages-hint,
#pricing-tools-calculator #pt-domain-hint,
#pricing-tools-calculator #pt-email-years-hint {
    color: var(--pt-muted);
    font-size: 13px;
    line-height: 1.55;
    margin-top: 6px;
}

/* Inputs + selects */
#pricing-tools-calculator .w-input,
#pricing-tools-calculator .w-select {
    height: 52px;
    border-radius: 14px;

    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--pt-border);
    box-shadow: 0 1px 0 rgba(15, 15, 18, .03);
    color: var(--pt-text);
    transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}

#pricing-tools-calculator .w-input:hover,
#pricing-tools-calculator .w-select:hover {
    border-color: rgba(124, 58, 237, .28);
}

#pricing-tools-calculator .w-input:focus,
#pricing-tools-calculator .w-select:focus {
    outline: none;
    border-color: rgba(124, 58, 237, .55);
    box-shadow: none;
}

/* Premium select arrow */
#pricing-tools-calculator .w-select {
    padding-right: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(15, 15, 18, .55) 50%),
        linear-gradient(135deg, rgba(15, 15, 18, .55) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

#pricing-tools-calculator #pt-selected-plan[readonly] {
    opacity: 0.92;
}

/* Range */
#pricing-tools-calculator .pt-range {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.10);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#pricing-tools-calculator .pt-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.90);
    box-shadow: 0 6px 16px rgba(15, 15, 18, 0.22);
    cursor: pointer;
}

#pricing-tools-calculator .pt-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.90);
    box-shadow: 0 6px 16px rgba(15, 15, 18, 0.22);
    cursor: pointer;
    border: 0;
}

#pricing-tools-calculator .pt-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.10);
}

#pricing-tools-calculator #pt-pages-value {
    font-weight: 700;
}

/* Checkbox grid */
#pricing-tools-calculator .pt-checkboxes {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

#pricing-tools-calculator .checkbox-wrapper.small {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

/* Important: Click should work on label, not inner nodes */
#pricing-tools-calculator label.w-checkbox .w-checkbox-input,
#pricing-tools-calculator label.w-checkbox .checkbox-text {
    pointer-events: none;
}

#pricing-tools-calculator label.checkbox-wrapper.small {
    padding: 10px 12px;
    border: 1px solid var(--pt-border-2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .65);
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

#pricing-tools-calculator label.checkbox-wrapper.small:hover {
    border-color: rgba(124, 58, 237, .22);
    box-shadow: var(--pt-shadow-sm);
    transform: translateY(-1px);
}

#pricing-tools-calculator .checkbox-wrapper.is-checked {
    border-color: rgba(124, 58, 237, .42);
    box-shadow: var(--pt-ring);
}

#pricing-tools-calculator .checkbox-wrapper.is-disabled {
    opacity: .55;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

#pricing-tools-calculator .checkbox-text {
    line-height: 1.4;
}

/* Summary rows */
#pricing-tools-calculator .pt-summary-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 8px;
}

#pricing-tools-calculator .pt-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(15, 15, 18, .72);
}

#pricing-tools-calculator .pt-summary-row strong {
    color: rgba(15, 15, 18, .92);
    font-weight: 600;
}

/* Summary card */
#pricing-tools-calculator .pricing-card--popular {
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow);
    overflow: hidden;
}

#pricing-tools-calculator .pricing-card__right .pricing-label {
    margin-bottom: 6px;
}

#pricing-tools-calculator .pricing-card__right .pricing-note {
    margin-top: 6px;
}

#pricing-tools-calculator .pricing-btn {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

/* Smooth sticky (transform-based) */
#pricing-tools-calculator .pt-summary-col {
    position: relative;
}

#pricing-tools-calculator .pt-summary-sticky {
    position: relative;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform .12s ease-out;
}

/* Accordion */
#pricing-tools-calculator .pt-acc {
    border: 1px solid rgba(15, 15, 18, .10);
    border-radius: 14px;
    overflow: hidden;
}

#pricing-tools-calculator .pt-acc+.pt-acc {
    margin-top: 14px;
}

#pricing-tools-calculator .pt-acc-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 600;
}

#pricing-tools-calculator .pt-acc-panel {
    padding: 14px 14px 16px;
    border-top: 1px solid rgba(15, 15, 18, .10);
}

#pricing-tools-calculator .pt-acc[data-open="true"] .pt-acc-icon {
    transform: rotate(45deg);
}

#pricing-tools-calculator .pt-acc-icon {
    transition: transform .18s ease;
}

/* Select error */
#pricing-tools-calculator .select-wrapper.is-error .w-select {
    outline: 2px solid rgba(255, 90, 95, .55);
    box-shadow: 0 0 0 4px rgba(255, 90, 95, .14);
    border-color: rgba(255, 90, 95, .55);
}

/* Help box */
#pricing-tools-calculator .pt-help {
    margin-top: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--pt-border-2);
    background: rgba(255, 255, 255, .70);
}

#pricing-tools-calculator .pt-help__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

#pricing-tools-calculator .pt-help__title {
    font-weight: 700;
    font-size: 13px;
    color: var(--pt-text);
    margin-bottom: 0;
}

#pricing-tools-calculator .pt-help__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--pt-muted);
}

#pricing-tools-calculator .pt-help__badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 15, 18, .10);
    background: rgba(255, 255, 255, .75);
    color: rgba(15, 15, 18, .70);
}

/* Rotator animation */
#pricing-tools-calculator .pt-help--rotator {
    position: relative;
    overflow: hidden;
}

#pricing-tools-calculator .pt-help--rotator.is-in {
    animation: ptHelpIn .28s ease both;
}

@keyframes ptHelpIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dots */
#pricing-tools-calculator .pt-dots {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

#pricing-tools-calculator .pt-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: rgba(15, 15, 18, .18);
    transition: transform .15s ease, background .15s ease;
}

#pricing-tools-calculator .pt-dot:hover {
    transform: scale(1.15);
}

#pricing-tools-calculator .pt-dot.is-active {
    background: rgba(124, 58, 237, .75);
}

/* Qualification chips */
#pricing-tools-calculator .pt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

#pricing-tools-calculator .pt-chip {
    font-size: 12px;
    line-height: 1;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 15, 18, .10);
    background: rgba(255, 255, 255, .78);
    color: rgba(15, 15, 18, .78);
    box-shadow: 0 8px 18px rgba(15, 15, 18, .06);
    white-space: nowrap;
}

/* Status badge */
#pricing-tools-calculator .pt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 15, 18, .10);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 28px rgba(15, 15, 18, .08);
}

/* Price note: one-line */
#pricing-tools-calculator #pt-price-note {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 44ch;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: normal;
}

@media (max-width: 479px) {
    #pricing-tools-calculator #pt-price-note {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Responsive grid */
@media (max-width: 991px) {
    #pricing-tools-calculator {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    #pricing-tools-calculator .grid-2-columns {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}
/* =========================================================
   PRICING TOOLS — WOW LAYER (ADD AFTER YOUR FINAL CSS)
   - Scoped to #pricing-tools-calculator
   - Modern aurora + luxury glass + micro-interactions
   ========================================================= */

#pricing-tools-calculator {
    /* Upgrade tokens (keep your base vars, we enhance) */
    --pt-accent: rgba(124, 58, 237, 1);
    --pt-accent2: rgba(99, 102, 241, 1);
    --pt-cyan: rgba(34, 211, 238, 1);
    --pt-pink: rgba(236, 72, 153, 1);

    --pt-glass: rgba(255, 255, 255, .62);
    --pt-glass-2: rgba(255, 255, 255, .48);

    --pt-borderHi: rgba(255, 255, 255, .55);
    --pt-borderLo: rgba(15, 15, 18, .10);

    --pt-shadowHi: 0 30px 90px rgba(15, 15, 18, .14);
    --pt-shadowLift: 0 26px 70px rgba(15, 15, 18, .16);

    position: relative;
    isolation: isolate;
}

/* ===== Aurora background (subtle, premium) ===== */
#pricing-tools-calculator::before,
#pricing-tools-calculator::after {
    content: "";
    position: absolute;
    inset: -120px -40px;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(600px 380px at 18% 22%, rgba(124, 58, 237, .20), transparent 62%),
        radial-gradient(520px 360px at 82% 18%, rgba(34, 211, 238, .18), transparent 60%),
        radial-gradient(520px 380px at 64% 78%, rgba(236, 72, 153, .12), transparent 62%),
        radial-gradient(720px 520px at 30% 76%, rgba(99, 102, 241, .14), transparent 66%);
    filter: blur(18px);
    opacity: .95;
    transform: translate3d(0, 0, 0);
}

#pricing-tools-calculator::after {
    z-index: -1;
    inset: -80px -20px;
    opacity: .35;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
        radial-gradient(1200px 420px at 50% 0%, rgba(255, 255, 255, .55), transparent 62%);
    filter: blur(0);
}

/* Optional: add subtle “grain” feel without images */
#pricing-tools-calculator .container-default {
    position: relative;
}

#pricing-tools-calculator .container-default::before {
    content: "";
    position: absolute;
    inset: -18px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, .35), transparent 55%),
        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .22), transparent 60%),
        radial-gradient(circle at 40% 95%, rgba(255, 255, 255, .16), transparent 62%);
    opacity: .25;
    mix-blend-mode: soft-light;
}

#pricing-tools-calculator .container-default>* {
    position: relative;
    z-index: 1;
}

/* ===== Heading (more “wow”) ===== */
#pricing-tools-calculator .text-center .display-9 {
    letter-spacing: -0.02em;
    text-shadow: 0 10px 30px rgba(15, 15, 18, .10);
}

#pricing-tools-calculator .text-center .display-3 {
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
    color: rgba(15, 15, 18, .72);
}

/* ===== Cards: luxury glass + animated border ===== */
#pricing-tools-calculator .pricing-card,
#pricing-tools-calculator .pricing-card--popular {
    background: linear-gradient(180deg, var(--pt-glass), rgba(255, 255, 255, .42));
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: var(--pt-shadowHi);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#pricing-tools-calculator .pricing-card {
    border-radius: calc(var(--pt-radius) + 2px);
    position: relative;
    overflow: hidden;
}

/* soft highlight line */
#pricing-tools-calculator .pricing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, .55) 18%,
            rgba(255, 255, 255, 0) 42%);
    opacity: .35;
}

/* hover lift */
#pricing-tools-calculator .pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pt-shadowLift);
    transition: transform .18s ease, box-shadow .18s ease;
}

/* ===== Divider more premium ===== */
#pricing-tools-calculator .pricing-divider {
    opacity: .55;
}

/* ===== Inputs: more “product UI” ===== */
#pricing-tools-calculator .w-input,
#pricing-tools-calculator .w-select {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
    border: 1px solid rgba(15, 15, 18, .10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .65) inset,
        0 10px 24px rgba(15, 15, 18, .06);
}

#pricing-tools-calculator .w-input:focus,
#pricing-tools-calculator .w-select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ===== Range: add “filled track” illusion ===== */
#pricing-tools-calculator .pt-range {
    height: 8px;
    background: rgba(15, 15, 18, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}

#pricing-tools-calculator .pt-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), rgba(15, 15, 18, .92));
    box-shadow:
        0 10px 22px rgba(15, 15, 18, .20),
        0 0 0 4px rgba(124, 58, 237, .10);
}

#pricing-tools-calculator .pt-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7), rgba(15, 15, 18, .92));
    box-shadow:
        0 10px 22px rgba(15, 15, 18, .20),
        0 0 0 4px rgba(124, 58, 237, .10);
}

/* ===== Checkbox rows: premium selectable pills ===== */
#pricing-tools-calculator label.checkbox-wrapper.small {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .52));
    border: 1px solid rgba(15, 15, 18, .08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .6) inset,
        0 14px 30px rgba(15, 15, 18, .06);
}

#pricing-tools-calculator label.checkbox-wrapper.small:hover {
    border-color: rgba(124, 58, 237, .26);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 18px 40px rgba(124, 58, 237, .10);
    transform: translateY(-2px);
}

/* Checked state: gradient ring + “shine” */
#pricing-tools-calculator .checkbox-wrapper.is-checked {
    border-color: rgba(124, 58, 237, .45);
    box-shadow:
        0 0 0 4px rgba(124, 58, 237, .12),
        0 20px 46px rgba(124, 58, 237, .12);
    background:
        radial-gradient(420px 180px at 12% 20%, rgba(124, 58, 237, .20), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52));
}

/* Webflow checkbox icon: turn it into “real” modern check */
#pricing-tools-calculator label.w-checkbox .w-checkbox-input {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(15, 15, 18, .18);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
    position: relative;
}

#pricing-tools-calculator label.w-checkbox .w-checkbox-input.w--redirected-checked {
    border-color: rgba(124, 58, 237, .55);
    background: linear-gradient(180deg, rgba(124, 58, 237, 1), rgba(99, 102, 241, 1));
    box-shadow:
        0 0 0 4px rgba(124, 58, 237, .12),
        0 12px 24px rgba(124, 58, 237, .20);
}

#pricing-tools-calculator label.w-checkbox .w-checkbox-input.w--redirected-checked::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 9px;
    height: 5px;
    border-left: 2px solid rgba(255, 255, 255, .95);
    border-bottom: 2px solid rgba(255, 255, 255, .95);
    transform: translateY(-1px) rotate(-45deg);
}

/* ===== Summary badge: make it feel like product status ===== */
#pricing-tools-calculator .pt-status-badge {
    background:
        radial-gradient(420px 120px at 12% 22%, rgba(34, 211, 238, .18), transparent 60%),
        radial-gradient(420px 120px at 88% 22%, rgba(124, 58, 237, .18), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .55));
    border: 1px solid rgba(255, 255, 255, .60);
    box-shadow: 0 18px 50px rgba(15, 15, 18, .12);
}

/* ===== Chips: cleaner, more premium ===== */
#pricing-tools-calculator .pt-chip {
    border: 1px solid rgba(255, 255, 255, .55);
    background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .62));
    box-shadow: 0 16px 36px rgba(15, 15, 18, .08);
}

#pricing-tools-calculator .pt-next {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(15, 15, 18, .68);
}

/* ===== Buttons: add “wow” shine + depth ===== */
#pricing-tools-calculator a.primary-button,
#pricing-tools-calculator a.secondary-button {
    border-radius: 14px;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    will-change: transform;
}

#pricing-tools-calculator a.primary-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(124, 58, 237, .18);
}

#pricing-tools-calculator a.primary-button::before {
    content: "";
    position: absolute;
    inset: -60% -40%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 50%);
    transform: translateX(-20%) translateY(-10%);
    opacity: .40;
    pointer-events: none;
}

#pricing-tools-calculator a.primary-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 18%, transparent 40%);
    transform: translateX(-120%);
    pointer-events: none;
}

#pricing-tools-calculator a.primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 70px rgba(124, 58, 237, .22);
    filter: saturate(1.04);
}

#pricing-tools-calculator a.primary-button:hover::after {
    transform: translateX(140%);
    transition: transform .65s ease;
}

#pricing-tools-calculator a.secondary-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
    border: 1px solid rgba(15, 15, 18, .10);
    box-shadow: 0 14px 36px rgba(15, 15, 18, .08);
}

#pricing-tools-calculator a.secondary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(15, 15, 18, .10);
}

/* ===== Accordion: feels like modern settings panel ===== */
#pricing-tools-calculator .pt-acc {
    background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .48));
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 18px 50px rgba(15, 15, 18, .08);
}

#pricing-tools-calculator .pt-acc-btn {
    padding: 16px 14px;
    letter-spacing: -0.01em;
}

#pricing-tools-calculator .pt-acc-panel {
    background: rgba(255, 255, 255, .40);
}

/* ===== Summary rows: subtle separation ===== */
#pricing-tools-calculator .pt-summary-row {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(15, 15, 18, .10);
}

#pricing-tools-calculator .pt-summary-row:last-child {
    border-bottom: 0;
}

/* ===== Reduced motion: respect accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    #pricing-tools-calculator * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    #pricing-tools-calculator a.primary-button::after {
        display: none !important;
    }
}

/* ===== Mobile polish ===== */
@media (max-width: 991px) {

    #pricing-tools-calculator::before,
    #pricing-tools-calculator::after {
        inset: -90px -20px;
        filter: blur(14px);
    }

    #pricing-tools-calculator .pricing-card:hover {
        transform: none;
    }
}
/* Freeze everything except the overlay */
#pricing-tools-calculator .pt-freezable.is-frozen > :not(#pt-custom-overlay) {
    pointer-events: none;
    opacity: .35;
}

/* Overlay stays fully interactive and clear */
.pt-custom-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .92);
    pointer-events: auto;
    padding: 16px;
    border-radius: 12px;
}

/* ================================
   FIX: Dropdown focus ring (clean + even)
   ================================ */

#pricing-tools-calculator .select-wrapper {
    position: relative;
    border-radius: 14px;
    /* مهم: لا تقص الـ ring */
    overflow: visible;
}

/* شيل أي تأثيرات focus من الـ select نفسه */
#pricing-tools-calculator .select-wrapper .w-select {
    width: 100%;
    border-radius: 14px;

    outline: none !important;
    box-shadow: none !important;

    /* منع أي قص/تلوين غريب بالحدود */
    background-clip: padding-box;
}

/* خلي الـ ring على الـ wrapper (متناسق من كل الجهات) */
#pricing-tools-calculator .select-wrapper:focus-within {
    box-shadow: var(--pt-ring);
}

/* وخلي لون الحد مثل باقي الـ inputs */
#pricing-tools-calculator .select-wrapper:focus-within .w-select {
    border-color: rgba(124, 58, 237, .55) !important;
}

/* بعض المتصفحات بتستخدم focus-visible */
#pricing-tools-calculator .select-wrapper .w-select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* FIX: remove double-arrow + fix right edge */
#pricing-tools-calculator .select-wrapper {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: visible;
}

#pricing-tools-calculator .select-wrapper .w-select {
    background-image: none !important;
    /* أهم سطر */
    padding-right: 52px !important;
    /* مساحة للسهم */
    padding-left: 14px !important;

    border-radius: 14px;
    outline: none !important;
    box-shadow: none !important;
    background-clip: padding-box;
}

/* Webflow arrow wrapper: خليه ما يغطي البوردر */
#pricing-tools-calculator .select-wrapper .select-icon-wrapper {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
}
/* Arabic only */
:lang(ar) #pricing-tools-calculator .pricing-card__right,
html[dir="rtl"] #pricing-tools-calculator .pricing-card__right {
    direction: rtl;
    text-align: right;
}

:lang(ar) #pricing-tools-calculator .pricing-card__right .pricing-label,
html[dir="rtl"] #pricing-tools-calculator .pricing-card__right .pricing-label {
    display: block;
    width: 100%;
    text-align: right;
    margin-left: auto;
}

/* ==========================================
   PRICING TOOLS — ULTRA MODERN RANGE (NO JS)
   Gradient you requested:
   linear-gradient(90deg, rgba(124, 58, 237, .45), rgba(56, 189, 248, .32))
   Scoped to #pricing-tools-calculator
========================================== */

#pricing-tools-calculator .pt-range {
    --h: 12px;
    --thumb: 18px;

    /* التدرّج المطلوب */
    --grad: linear-gradient(90deg, rgba(124, 58, 237, .45), rgba(56, 189, 248, .32));

    /* track base */
    --base: rgba(15, 15, 18, .08);

    width: 100%;
    height: var(--h);
    border-radius: 999px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;

    /* طبقات “مبهرة” (بدون تعبئة ديناميكية) */
    background:
        /* sheen */
        linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)) 0 0 / 100% 100% no-repeat,
        /* glow wash */
        radial-gradient(140px 28px at 18% 50%, rgba(124, 58, 237, .22), transparent 70%) 0 0 / 100% 100% no-repeat,
        radial-gradient(160px 28px at 82% 50%, rgba(56, 189, 248, .20), transparent 70%) 0 0 / 100% 100% no-repeat,
        /* gradient line */
        var(--grad),
        /* base */
        var(--base);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, .75) inset,
        0 10px 26px rgba(15, 15, 18, .10);

    cursor: pointer;
}

/* Track (WebKit) */
#pricing-tools-calculator .pt-range::-webkit-slider-runnable-track {
    height: var(--h);
    border-radius: 999px;
    background: transparent;
}

/* Track (Firefox) */
#pricing-tools-calculator .pt-range::-moz-range-track {
    height: var(--h);
    border-radius: 999px;
    background: transparent;
}

/* Thumb — WebKit */
#pricing-tools-calculator .pt-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 999px;

    /* “Glass” thumb */
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .48));

    /* ring متدرّج + عمق */
    box-shadow:
        0 14px 28px rgba(15, 15, 18, .20),
        0 0 0 3px rgba(255, 255, 255, .65),
        0 0 0 7px rgba(124, 58, 237, .12),
        0 0 0 12px rgba(56, 189, 248, .10);

    border: 1px solid rgba(255, 255, 255, .60);
    margin-top: calc((var(--h) - var(--thumb)) / 2);

    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

/* Thumb — Firefox */
#pricing-tools-calculator .pt-range::-moz-range-thumb {
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .60);

    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .48));

    box-shadow:
        0 14px 28px rgba(15, 15, 18, .20),
        0 0 0 3px rgba(255, 255, 255, .65),
        0 0 0 7px rgba(124, 58, 237, .12),
        0 0 0 12px rgba(56, 189, 248, .10);

    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

/* Hover / Active */
#pricing-tools-calculator .pt-range:hover::-webkit-slider-thumb,
#pricing-tools-calculator .pt-range:hover::-moz-range-thumb {
    transform: scale(1.06);
    filter: saturate(1.05);
    box-shadow:
        0 18px 36px rgba(15, 15, 18, .22),
        0 0 0 3px rgba(255, 255, 255, .70),
        0 0 0 8px rgba(124, 58, 237, .16),
        0 0 0 14px rgba(56, 189, 248, .14);
}

#pricing-tools-calculator .pt-range:active::-webkit-slider-thumb,
#pricing-tools-calculator .pt-range:active::-moz-range-thumb {
    transform: scale(0.98);
}

/* Focus ring (keyboard) */
#pricing-tools-calculator .pt-range:focus-visible {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .75) inset,
        0 10px 26px rgba(15, 15, 18, .10),
        0 0 0 4px rgba(124, 58, 237, .18);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    #pricing-tools-calculator .pt-range,
    #pricing-tools-calculator .pt-range::-webkit-slider-thumb,
    #pricing-tools-calculator .pt-range::-moz-range-thumb {
        transition: none !important;
    }
}