/* =========================================================
   PERFECTA CLEANERS — CALCULATOR PRO UI
   Load this AFTER static/style.css
========================================================= */

.price-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 8%, rgba(198,161,91,.08), transparent 24%),
        linear-gradient(180deg, #FBF8F5 0%, #FFFFFF 100%) !important;
}

.price-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(107,16,32,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107,16,32,.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}

.price-section .container {
    position: relative;
    z-index: 1;
}

.calculator-heading {
    align-items: end;
    margin-bottom: 46px;
}

.calculator-heading h2 {
    color: #470A14 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(48px, 5.5vw, 72px) !important;
    font-weight: 600 !important;
    line-height: .95 !important;
    letter-spacing: -2.2px !important;
}

.calculator-heading h2 em {
    color: #A9823F !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

.demo-price-note {
    width: min(410px, 100%) !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(198,161,91,.34) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 12px 32px rgba(71,10,20,.045) !important;
}

.demo-price-note > span {
    color: #A9823F !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 2.2px !important;
}

.demo-price-note strong {
    color: #470A14 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 12px !important;
}

.demo-price-note p {
    color: #6C6062 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
}

/* ---------- LAYOUT ---------- */

.calculator-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 28px !important;
    align-items: start !important;
}

.calculator-items {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------- MAIN SERVICE TABS ---------- */

.price-service-tabs {
    position: sticky;
    top: 86px;
    z-index: 30;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 6px !important;
    margin: 0 0 34px !important;
    padding: 6px !important;
    border: 1px solid rgba(107,16,32,.12) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 16px 42px rgba(71,10,20,.07) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
}

.price-service-tab {
    position: relative;
    min-height: 58px !important;
    padding: 0 14px !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #6B1020 !important;
    cursor: pointer;
    font-family: "DM Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    transition:
        transform .28s cubic-bezier(.16,1,.3,1),
        background .28s ease,
        color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease !important;
}

.price-service-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(198,161,91,.34) !important;
    background: #FBF8F5 !important;
    color: #470A14 !important;
}

.price-service-tab.is-active {
    background: linear-gradient(145deg, #6B1020, #470A14) !important;
    color: #FFFFFF !important;
    border-color: rgba(198,161,91,.55) !important;
    box-shadow: 0 10px 25px rgba(71,10,20,.17) !important;
}

.price-service-tab.is-active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8px;
    height: 1px;
    background: #C6A15B;
    opacity: .9;
}

/* ---------- PANEL HEADING ---------- */

.price-tab-panel {
    animation: perfectaTabFade .36s cubic-bezier(.16,1,.3,1);
}

@keyframes perfectaTabFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.price-main-heading {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 28px !important;
    margin-bottom: 34px !important;
    padding: 0 2px 22px !important;
    border-bottom: 1px solid rgba(107,16,32,.12) !important;
}

.price-main-kicker {
    display: block;
    margin-bottom: 7px;
    color: #A9823F !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase;
}

.price-main-heading h3 {
    margin: 0 !important;
    color: #470A14 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(38px, 4vw, 52px) !important;
    font-weight: 600 !important;
    line-height: .95 !important;
    letter-spacing: -1.4px !important;
}

.price-main-heading p {
    max-width: 410px;
    margin: 0 !important;
    color: #6C6062 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
    text-align: right;
}

/* ---------- SUBCATEGORY ---------- */

.price-subcategory {
    margin-bottom: 42px !important;
}

.price-subcategory:last-of-type {
    margin-bottom: 0 !important;
}

.price-subcategory-heading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
}

.price-subcategory-heading::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(198,161,91,.52), transparent);
}

.price-subcategory-heading span {
    color: #A9823F !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

.price-subcategory-heading h4 {
    margin: 0 !important;
    color: #470A14 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
}

.price-nested-heading {
    margin: 28px 0 12px !important;
    color: #6B1020 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase;
}

/* ---------- PRICE GRID ---------- */

.price-items-grid,
.price-items-grid.real-prices-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
}

/* ---------- PROFESSIONAL PRICE CARD ---------- */

.price-item,
.real-price-card {
    position: relative;
    min-height: 150px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 52px !important;
    gap: 16px !important;
    padding: 20px !important;
    overflow: hidden;
    border: 1px solid rgba(107,16,32,.11) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(251,248,245,.72)) !important;
    box-shadow: 0 8px 25px rgba(71,10,20,.03) !important;
    transform: none !important;
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s cubic-bezier(.16,1,.3,1) !important;
}

.price-item::after,
.real-price-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(250px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(198,161,91,.10), transparent 52%);
    transition: opacity .3s ease;
}

.price-item:hover::after,
.real-price-card:hover::after {
    opacity: 1;
}

.price-item:hover,
.real-price-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(198,161,91,.48) !important;
    box-shadow: 0 18px 44px rgba(71,10,20,.08) !important;
}

.price-item.selected,
.real-price-card.selected {
    border-color: rgba(107,16,32,.38) !important;
    box-shadow:
        inset 3px 0 0 #C6A15B,
        0 18px 44px rgba(71,10,20,.07) !important;
}

.price-item.selected::before,
.real-price-card.selected::before {
    content: "✓";
    position: absolute;
    top: 13px;
    right: 66px;
    z-index: 5;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #6B1020;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
}

.price-item-info {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.price-item-info h4 {
    margin: 0 !important;
    color: #470A14 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -.35px !important;
}

.price-item-info p {
    min-height: 0 !important;
    margin: 7px 0 0 !important;
    color: #6C6062 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 9.5px !important;
    line-height: 1.55 !important;
}

.real-price-card .price-label {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap;
    gap: 5px !important;
    margin: 17px 0 0 !important;
}

.real-price-card .price-label > strong {
    margin: 0 !important;
    color: #6B1020 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
}

.real-price-card .price-label small {
    color: #8A7B7E !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
}

/* ---------- QUANTITY CONTROL ---------- */

.quantity-control {
    position: relative;
    z-index: 4;
    width: 52px !important;
    height: 110px !important;
    display: grid !important;
    grid-template-rows: 1fr 38px 1fr !important;
    overflow: hidden;
    align-self: center;
    border: 1px solid rgba(107,16,32,.12) !important;
    border-radius: 13px !important;
    background: #FBF8F5 !important;
}

.quantity-button {
    min-height: 0 !important;
    border: 0 !important;
    background: #FFFFFF !important;
    color: #6B1020 !important;
    cursor: pointer;
    font-family: "DM Sans", sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    transition: background .2s ease, color .2s ease !important;
}

.quantity-button:hover {
    background: #6B1020 !important;
    color: #FFFFFF !important;
}

.quantity-number {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border-block: 1px solid rgba(107,16,32,.10);
    background: #FBF8F5 !important;
}

.quantity-number span {
    color: #470A14 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.quantity-number small {
    color: #8A7B7E !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 7px !important;
}

.item-subtotal {
    position: absolute !important;
    left: 20px !important;
    bottom: 14px !important;
    color: #8A7B7E !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
}

/* ---------- ASSESSMENT CARD ---------- */

.price-assessment-card {
    grid-template-columns: 1fr !important;
    min-height: 132px !important;
    border-color: rgba(198,161,91,.30) !important;
    background:
        radial-gradient(circle at 94% 0%, rgba(198,161,91,.12), transparent 35%),
        linear-gradient(145deg, #FFFFFF, #FBF8F5) !important;
}

.assessment-badge {
    display: inline-flex !important;
    width: fit-content !important;
    margin-top: 16px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(198,161,91,.34) !important;
    border-radius: 999px !important;
    background: #FFF9ED !important;
    color: #7A591B !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
}

/* ---------- DISCLAIMER ---------- */

.real-price-disclaimer {
    margin-top: 34px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(198,161,91,.32) !important;
    border-radius: 15px !important;
    background:
        linear-gradient(145deg, #FFF9ED, #FFFCF5) !important;
}

.real-price-disclaimer strong {
    color: #470A14 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.real-price-disclaimer p {
    margin-top: 5px !important;
    color: #6B5946 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 9.5px !important;
    line-height: 1.65 !important;
}

/* ---------- BASKET ---------- */

.basket {
    position: sticky !important;
    top: 95px !important;
    overflow: hidden !important;
    border: 1px solid rgba(198,161,91,.26) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(198,161,91,.14), transparent 35%),
        linear-gradient(150deg, #5A0E1C, #2F070D) !important;
    color: #FFFFFF !important;
    box-shadow: 0 28px 75px rgba(39,5,10,.18) !important;
}

.basket-top {
    padding: 24px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.basket-top span {
    color: #E9D7AC !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 2.2px !important;
}

.basket-top h3 {
    margin-top: 4px !important;
    color: #FFFFFF !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -.4px !important;
}

.basket-items {
    max-height: 315px !important;
    padding: 8px 24px !important;
}

.basket-empty {
    padding: 34px 0 !important;
    color: rgba(255,255,255,.68) !important;
}

.basket-empty div {
    color: #C6A15B !important;
}

.basket-empty strong {
    color: #FFFFFF !important;
    font-family: "DM Sans", sans-serif !important;
}

.basket-empty p {
    color: rgba(255,255,255,.66) !important;
    font-family: "DM Sans", sans-serif !important;
}

.basket-line {
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

.basket-line strong {
    color: #FFFFFF !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.basket-line span {
    color: rgba(255,255,255,.65) !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
}

.basket-total-area {
    padding: 21px 24px !important;
    border: 0 !important;
    background: rgba(0,0,0,.10) !important;
}

.basket-meta {
    color: #E9D7AC !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 7px !important;
    letter-spacing: 1.8px !important;
}

.basket-total,
.rotary-total {
    margin-top: 6px !important;
    color: #FFFFFF !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    letter-spacing: -1px !important;
}

.basket-note {
    margin-top: 8px !important;
    color: rgba(255,255,255,.62) !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
    line-height: 1.6 !important;
}

.basket-contact {
    padding: 20px 24px 24px !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
}

.basket-contact > strong {
    color: #FFFFFF !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 11px !important;
}

.basket-contact > p {
    color: rgba(255,255,255,.66) !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 8px !important;
}

.basket-button {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

.whatsapp-basket {
    background: #25D366 !important;
    color: #06331E !important;
}

.basket-call {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

/* ---------- MOBILE ---------- */

@media (max-width:1080px) {
    .calculator-layout {
        grid-template-columns: 1fr !important;
    }

    .basket {
        position: relative !important;
        top: auto !important;
        width: min(520px, 100%) !important;
    }
}

@media (max-width:720px) {
    .calculator-heading {
        align-items: flex-start !important;
    }

    .price-service-tabs {
        top: 72px;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 15px !important;
    }

    .price-service-tab {
        min-height: 50px !important;
        padding-inline: 6px !important;
        font-size: 8px !important;
        letter-spacing: .65px !important;
    }

    .price-main-heading {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 9px !important;
    }

    .price-main-heading p {
        text-align: left !important;
    }

    .price-items-grid,
    .price-items-grid.real-prices-grid {
        grid-template-columns: 1fr !important;
    }

    .price-item,
    .real-price-card {
        min-height: 145px !important;
    }

    .basket {
        position: fixed !important;
        top: auto !important;
        border-radius: 22px 22px 0 0 !important;
    }
}