/* WayCare AutoCare Requirements & Add-ons v1.2 */

.wcreq-section,
.wcreq-section *{
    box-sizing:border-box;
    text-shadow:none !important;
}

.wcreq-section{
    width:100%;
    padding:22px 22px 24px;
    background:#F8FAFC;
    font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow:hidden;
}

.wcreq-shell{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

.wcreq-layout{
    display:grid;
    grid-template-columns:minmax(320px,.86fr) minmax(420px,1.14fr);
    gap:20px;
    align-items:stretch;
}

/* Requirements */
.wcreq-panel{
    min-width:0;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(135deg,#08243D 0%, #0A3153 65%, #0B2A45 100%);
    color:#fff;
    box-shadow:0 18px 46px rgba(8,36,61,.16);
    position:relative;
    display:flex;
    flex-direction:column;
}

.wcreq-panel::before{
    content:"";
    position:absolute;
    inset:-26%;
    background:radial-gradient(circle at 16% 8%, rgba(91,227,184,.16), transparent 40%);
    pointer-events:none;
}

.wcreq-panel-top,
.wcreq-accordion-body{
    position:relative;
    z-index:1;
}

.wcreq-panel-top{
    padding:22px 24px 12px;
}

.wcreq-req-label,
.wcreq-addons-label{
    font-family:"Geist Mono",monospace !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.19em !important;
    text-transform:uppercase;
    margin:0 0 16px;
}

.wcreq-req-label{ color:#5BE3B8; }

.wcreq-intro{
    margin:0 0 9px;
    color:#fff;
    font-family:Poppins,system-ui,sans-serif !important;
    font-size:15px !important;
    line-height:1.38 !important;
    font-weight:700 !important;
}

.wcreq-helper{
    margin:0;
    color:rgba(255,255,255,.72);
    font-family:Poppins,system-ui,sans-serif !important;
    font-size:12px !important;
    line-height:1.42 !important;
    font-weight:520 !important;
}

.wcreq-accordion-toggle{ display:none; }

.wcreq-accordion-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(165px,.95fr);
    gap:0;
    align-items:stretch;
    min-height:0;
}

.wcreq-checklist{
    padding:6px 20px 22px 24px;
    display:grid;
    align-content:center;
    gap:14px;
}

.wcreq-check{
    display:grid;
    grid-template-columns:20px 1fr;
    gap:10px;
    align-items:start;
}

.wcreq-check-icon{
    color:#2ABFB7;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
}

.wcreq-check-title{
    margin:0 0 4px;
    color:#fff;
    font-family:Fraunces, Georgia, serif !important;
    font-size:15px !important;
    line-height:1.08 !important;
    font-weight:600 !important;
    letter-spacing:-.02em !important;
}

.wcreq-check-text{
    margin:0;
    color:rgba(255,255,255,.76);
    font-family:Poppins,system-ui,sans-serif !important;
    font-size:12.5px !important;
    line-height:1.34 !important;
    font-weight:520 !important;
}

.wcreq-image-wrap{
    min-height:100%;
    height:auto;
    align-self:stretch;
    overflow:hidden;
    border-left:1px solid rgba(255,255,255,.14);
    display:flex;
}

.wcreq-image{
    width:100%;
    height:100%;
    flex:1 1 auto;
    object-fit:cover;
    object-position:var(--wcreq-img-x, center) var(--wcreq-img-y, center);
    display:block;
}

/* Add-ons */
.wcreq-addons-panel{
    min-width:0;
    border:1px solid #E2E8F0;
    border-radius:18px;
    padding:22px 24px 18px;
    background:#fff;
    box-shadow:0 14px 34px rgba(15,23,42,.05);
}

.wcreq-addons-label{
    color:#0E9F97;
    margin-bottom:16px;
}

.wcreq-addons-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.wcreq-addon-card{
    position:relative;
    min-width:0;
    min-height:128px;
    border:1px solid #E2E8F0;
    border-radius:14px;
    background:#fff;
    padding:16px 14px 14px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow:hidden;
}

.wcreq-addon-card:hover{
    transform:translateY(-3px);
    border-color:rgba(14,159,151,.35);
    box-shadow:0 14px 30px rgba(15,23,42,.075);
}

.wcreq-badge{
    position:absolute;
    top:10px;
    right:10px;
    min-height:18px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#E9FFFA;
    color:#0E9F97;
    font-family:Poppins,system-ui,sans-serif !important;
    font-size:8px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.05em !important;
    text-transform:uppercase;
}

.wcreq-icon-circle{
    width:46px;
    height:46px;
    border-radius:999px;
    background:#E9FFFA;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
}

.wcreq-addon-icon{
    color:#0E9F97;
    font-size:26px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wcreq-addon-icon svg,
.wcreq-addon-icon img{
    width:26px;
    height:26px;
    object-fit:contain;
    display:block;
    fill:currentColor;
}

.wcreq-addon-icon i{ font-size:inherit; color:currentColor; }

.wcreq-addon-title{
    margin:0 0 8px;
    color:#122C4A;
    font-family:Fraunces, Georgia, serif !important;
    font-size:clamp(16px,1.35vw,22px) !important;
    line-height:1.02 !important;
    font-weight:600 !important;
    letter-spacing:-.025em !important;
    text-wrap:balance;
}

.wcreq-price{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:4px;
    color:#64748B;
    font-family:Poppins,system-ui,sans-serif !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:650 !important;
}

.wcreq-price strong{
    color:#0E9F97;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.025em !important;
}

.wcreq-note{
    margin:14px 0 0;
    color:#64748B;
    text-align:center;
    font-family:Poppins,system-ui,sans-serif !important;
    font-size:11.5px !important;
    line-height:1.4 !important;
    font-weight:600 !important;
}

.mobile-title{ display:none; }

@media (max-width:1100px){
    .wcreq-section{ padding:18px 14px 20px; }
    .wcreq-layout{ grid-template-columns:1fr; }
    .wcreq-accordion-body{ min-height:0; }
}

@media (max-width:767px){
    .wcreq-section{ padding:16px 10px 20px; }
    .wcreq-layout{ grid-template-columns:1fr; gap:14px; }

    .wcreq-panel,
    .wcreq-addons-panel{ border-radius:16px; }

    .wcreq-panel-top{ padding:18px 16px 14px; }

    .wcreq-req-label,
    .wcreq-addons-label{ font-size:10px !important; letter-spacing:.17em !important; margin-bottom:12px; }
    .wcreq-intro{ font-size:13px !important; margin-bottom:7px; }
    .wcreq-helper{ font-size:11px !important; }

    .wcreq-accordion-toggle{
        margin:14px 0 0;
        width:100%;
        min-height:40px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 14px;
        border:1px solid rgba(255,255,255,.16);
        border-radius:12px;
        background:rgba(255,255,255,.08);
        color:#fff;
        font-family:Poppins,system-ui,sans-serif !important;
        font-size:12px !important;
        line-height:1 !important;
        font-weight:850 !important;
    }
    .wcreq-accordion-toggle b{ color:#5BE3B8; font-size:18px; line-height:1; }
    .wcreq-section.has-mobile-accordion .wcreq-accordion-body{ display:none; }
    .wcreq-section.has-mobile-accordion.is-open .wcreq-accordion-body{ display:grid; }
    .wcreq-section.has-mobile-accordion.is-open .wcreq-accordion-toggle b{ transform:rotate(45deg); }

    .wcreq-accordion-body{ grid-template-columns:1fr; }
    .wcreq-checklist{ padding:0 16px 16px; gap:12px; }
    .wcreq-check{ grid-template-columns:18px 1fr; gap:9px; }
    .wcreq-check-title{ font-size:13px !important; }
    .wcreq-check-text{ font-size:11.2px !important; }
    .wcreq-image-wrap{ min-height:110px; border-left:0; border-top:1px solid rgba(255,255,255,.14); }

    .wcreq-addons-panel{ padding:18px 12px 14px; }
    .wcreq-addons-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .wcreq-addon-card{ min-height:112px; padding:14px 10px 12px; border-radius:13px; }
    .wcreq-addon-card:hover{ transform:none; }
    .wcreq-badge{ top:8px; right:8px; min-height:16px; font-size:7px !important; }
    .wcreq-icon-circle{ width:38px; height:38px; margin-bottom:8px; }
    .wcreq-addon-icon{ font-size:21px; }
    .wcreq-addon-icon svg,.wcreq-addon-icon img{ width:21px; height:21px; }
    .wcreq-addon-title{ font-size:clamp(13px,4.2vw,18px) !important; margin-bottom:6px; }
    .desktop-title{ display:none; }
    .mobile-title{ display:inline; }
    .wcreq-price{ font-size:10px !important; }
    .wcreq-price strong{ font-size:16px !important; }
    .wcreq-note{ margin-top:12px; font-size:10.5px !important; }
}

@media (max-width:390px){
    .wcreq-section{ padding-left:8px; padding-right:8px; }
    .wcreq-addons-grid{ gap:8px; }
    .wcreq-addon-card{ min-height:106px; padding-left:8px; padding-right:8px; }
    .wcreq-addon-title{ font-size:12.5px !important; }
}


/* v1.3 — readable checklist + four add-ons in one premium row */

/* Fix checklist disappearing into dark background */
.wcreq-check-title{
    color:#5BE3B8 !important;
    opacity:1 !important;
}

.wcreq-check-text{
    color:rgba(255,255,255,.82) !important;
    opacity:1 !important;
}

/* More balanced desktop layout */
@media (min-width:1101px){
    .wcreq-shell{
        max-width:1320px !important;
    }

    .wcreq-section{
        padding-top:24px !important;
        padding-bottom:26px !important;
    }

    .wcreq-layout{
        grid-template-columns:minmax(420px,.82fr) minmax(620px,1.18fr) !important;
        gap:18px !important;
        align-items:stretch !important;
    }

    .wcreq-panel-top{
        padding:22px 24px 10px !important;
    }

    .wcreq-accordion-body{
        grid-template-columns:minmax(250px,.92fr) minmax(240px,1.08fr) !important;
    }

    .wcreq-checklist{
        padding:4px 20px 22px 24px !important;
        gap:13px !important;
    }

    .wcreq-image-wrap{
        min-height:260px !important;
    }

    .wcreq-addons-panel{
        padding:22px 24px 18px !important;
    }

    .wcreq-addons-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:12px !important;
        align-items:stretch !important;
    }

    .wcreq-addon-card{
        min-height:150px !important;
        padding:16px 10px 14px !important;
    }

    .wcreq-icon-circle{
        width:44px !important;
        height:44px !important;
        margin-bottom:10px !important;
    }

    .wcreq-addon-icon,
    .wcreq-addon-icon i{
        font-size:24px !important;
    }

    .wcreq-addon-icon svg,
    .wcreq-addon-icon img{
        width:24px !important;
        height:24px !important;
    }

    .wcreq-addon-title{
        font-size:clamp(15px,1.05vw,19px) !important;
        line-height:1.08 !important;
        margin-bottom:7px !important;
        max-width:150px !important;
    }

    .wcreq-price strong{
        font-size:17px !important;
    }

    .wcreq-note{
        margin-top:12px !important;
    }
}

/* Tablet keeps cards clean */
@media (min-width:768px) and (max-width:1100px){
    .wcreq-addons-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .wcreq-addon-card{
        min-height:138px !important;
        padding:14px 9px 12px !important;
    }

    .wcreq-addon-title{
        font-size:15px !important;
    }
}

/* Mobile stays 2-column and readable */
@media (max-width:767px){
    .wcreq-check-title{
        color:#5BE3B8 !important;
    }

    .wcreq-addons-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}


/* v1.4 — desktop add-ons as perfect 2x2 square */
@media (min-width:1101px){
    .wcreq-layout{
        grid-template-columns:minmax(420px,.84fr) minmax(560px,1.16fr) !important;
        gap:22px !important;
        align-items:stretch !important;
    }

    .wcreq-addons-panel{
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        min-height:100% !important;
        padding:22px 28px 20px !important;
    }

    .wcreq-addons-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:16px !important;
        align-items:stretch !important;
        width:100% !important;
    }

    .wcreq-addon-card{
        min-height:190px !important;
        padding:18px 16px 16px !important;
        border-radius:16px !important;
        justify-content:center !important;
    }

    .wcreq-addon-title{
        max-width:220px !important;
        font-size:clamp(18px,1.28vw,24px) !important;
        line-height:1.05 !important;
        margin-bottom:8px !important;
    }

    .wcreq-icon-circle{
        width:52px !important;
        height:52px !important;
        margin-bottom:12px !important;
    }

    .wcreq-addon-icon,
    .wcreq-addon-icon i{
        font-size:28px !important;
    }

    .wcreq-addon-icon svg,
    .wcreq-addon-icon img{
        width:28px !important;
        height:28px !important;
    }

    .wcreq-price{
        gap:6px !important;
    }

    .wcreq-price strong{
        font-size:18px !important;
    }

    .wcreq-note{
        margin-top:16px !important;
    }
}

@media (min-width:768px) and (max-width:1100px){
    .wcreq-addons-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .wcreq-addon-card{
        min-height:160px !important;
    }
}