/* ══════════════════════════════════════════
   PRICING PAGE STYLES
   Extracted from pricing.php inline styles
   ══════════════════════════════════════════ */

/* ══ TOKENS ══ */
:root {
    --cream:#FAFAF8; --cream2:#F3F3EF; --white:#fff;
    --ink:#1A1A2E; --muted:#4B5563; --soft:#6B7280; --faint:#9CA3AF;
    --border:#E5E5DF;
    --indigo:#2563eb; --indigo2:#1d4ed8; --indigo-lt:#EEF2FF; --indigo-md:#C7D2FE;
    --sage:#10B981; --sage2:#059669; --sage-lt:#ECFDF5;
    --coral:#FF5A35; --coral-lt:#FFF4F2;
    --amber:#F59E0B; --amber-lt:#FFFBEB;
    /* old dynamic-card vars */
    --primary-color:#0040bb; --success-color:#28a745;
    --text-muted-custom:#6c757d; --background-card:#fff;
    --slider-track-color:#e9ecef;
    --r:16px; --r-lg:24px;
    --t:all .22s cubic-bezier(.4,0,.2,1);
    --sh-sm:0 2px 8px rgba(26,26,46,.07);
    --sh-md:0 8px 28px rgba(26,26,46,.09);
    --sh-lg:0 20px 56px rgba(26,26,46,.12);
    --sh-indigo:0 16px 48px rgba(37,99,235,.22);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden;line-height:1.65;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* ══ UTILITY ══ */
.tc{text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:14px;}
.ey-indigo{background:var(--indigo-lt);color:var(--indigo);border:1px solid var(--indigo-md);}
.ey-sage{background:var(--sage-lt);color:var(--sage2);border:1px solid rgba(16,185,129,.25);}
.ey-coral{background:var(--coral-lt);color:var(--coral);border:1px solid rgba(255,90,53,.22);}
.sec-title{font-size:42px;font-weight:800;line-height:1.1;letter-spacing:-.6px;color:var(--ink);margin-bottom:14px;}
.sec-sub{font-size:16.5px;color:var(--muted);line-height:1.78;max-width:580px;margin:auto;}
.hl{color:var(--indigo);}

/* ══ BUTTONS ══ */
.btn-new{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:12px;font-size:14.5px;font-weight:700;transition:var(--t);cursor:pointer;border:none;font-family:inherit;}
.btn-indigo{background:var(--indigo);color:#fff;}
.btn-indigo:hover{background:var(--indigo2);transform:translateY(-2px);box-shadow:var(--indigo);}
.btn-ol{background:transparent;border:1.5px solid var(--border);color:var(--ink);}
.btn-ol:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-2px);}
.btn-full{width:100%;}

/* ══ BILLING TOGGLE ══ */
.plans-intro{padding:70px 0 0;}
.plans-intro .tc{margin-bottom:40px;}
.top-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:52px;}
.toggle-wrap{display:flex;align-items:center;gap:14px;margin-bottom:0;}
.toggle-label{font-size:14.5px;font-weight:600;color:var(--soft);}
.toggle-label.active{color:var(--ink);}
.toggle-switch{width:56px;height:30px;background:var(--indigo);border-radius:15px;position:relative;cursor:pointer;transition:var(--t);border:none;flex-shrink:0;}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .22s ease;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.toggle-switch.yearly::after{transform:translateX(26px);}
.toggle-switch.monthly::after{transform:translateX(0);}
.save-badge{background:var(--sage-lt);color:var(--sage2);border:1px solid rgba(16,185,129,.25);font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;}

/* ══ PLAN CARDS GRID (NEW DESIGN) ══ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}

.pc{background:#fff;border-radius:var(--r-lg);border:1.5px solid var(--border);padding:32px 28px 28px;transition:var(--t);position:relative;overflow:hidden;}
.pc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(37,99,235,.2);}
.pc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border);transition:var(--t);}
.pc:hover::before{background:linear-gradient(90deg,var(--indigo),var(--sage));}

/* Featured (Standard) */
.pc.featured{background:linear-gradient(155deg,#F8F8FF 0%,#EEEEFF 100%);border-color:#c1d4ff;transform:translateY(-8px);}
.pc.featured::before{background:linear-gradient(90deg,var(--indigo),#5e91ff);}
.pc.featured:hover{transform:translateY(-14px);box-shadow:0 28px 72px rgba(122,175,255,.28);}

/* Recommended ribbon — used by JS when slider at max */
/* .pc.recommended{border:2px solid var(--primary-color) !important;} */
.pc.recommended::after{content:"Recommended";position:absolute;top:28px;right:-40px;background:var(--primary-color);color:#fff;padding:5px 40px;font-size:.75rem;font-weight:700;transform:rotate(45deg);box-shadow:0 2px 4px rgba(0,0,0,.15);z-index:10;}

.best-badge{position:absolute;top:18px;right:18px;background:#fff;color:#fff;font-size:10px;font-weight:800;padding:4px 12px;border-radius:50px;letter-spacing:.4px;display:flex;align-items:center;gap:5px;}
.pc-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;border:1px solid rgba(26,26,46,.1);}
.ic-indigo{background:var(--indigo-lt);color:var(--indigo);}
.ic-sage{background:var(--sage-lt);color:var(--sage2);} 
.ic-coral{background:var(--coral-lt);color:var(--coral);}
.pc-name{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.pc-desc{font-size:13.5px;color:var(--soft);line-height:1.65;margin-bottom:22px;min-height:42px;}

.pc-price-row{display:flex;align-items:baseline;gap:5px;margin-bottom:6px;flex-wrap:wrap;}
.pc-currency{font-size:22px;font-weight:700;color:var(--ink);line-height:1;margin-top:4px;}
.pc-amount{font-size:52px;font-weight:900;letter-spacing:-2px;color:var(--ink);line-height:1;}
.pc.featured .pc-amount{color:var(--indigo);}
.pc-per{font-size:13px;color:var(--soft);align-self:flex-end;padding-bottom:6px;}
.pc-billed{font-size:12px;color:var(--faint);margin-bottom:10px;}
.pc-orig{text-decoration:line-through;color:var(--faint);font-size:1.1rem;margin-right:4px;font-weight:500;}
.pc-yearly-note{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.pc-yearly-note span{color:var(--indigo);font-size:15px;font-weight:700;}
.pc-discount-badge{display:inline-block;background:var(--sage-lt);color:var(--sage2);border:1px solid rgba(16,185,129,.25);font-size:11px;font-weight:700;padding:2px 9px;border-radius:50px;margin-bottom:12px;}

.pc-div{height:1px;background:var(--border);margin:22px 0;}
.pc-volume{display:flex;align-items:center;gap:9px;background:var(--cream2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;margin-bottom:22px;}
.pc-volume i{font-size:19px;color:var(--indigo);}
.pcv-val{font-size:16px;font-weight:800;color:var(--ink);}
.pcv-lbl{font-size:11.5px;color:var(--soft);margin-top:1px;}
.pc.featured .pc-volume{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.2);}

.pc-features{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;}
.pf-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.5;}
.pf-row i{font-size:16px;flex-shrink:0;margin-top:1px;}
.pf-check{color:var(--sage);}
.pf-minus{color:var(--faint);}
.pf-row strong{color:var(--ink);font-weight:600;}

/* ══ VOLUME SLIDER ══ */
.volume-slider-container{padding:25px 30px;background:#fff;border-radius:12px;margin-bottom:40px;box-shadow:0 8px 25px rgba(0,0,0,.07);}
.volume-slider-container h4{font-weight:600;margin-bottom:.75rem;color:var(--ink);}
.volume-slider-container p.text-muted{font-size:.9rem;margin-bottom:1.5rem;color:var(--soft);}
.slider-controls{display:flex;align-items:center;justify-content:center;}
.slider-controls button{background:var(--primary-color);border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:filter .2s,transform .2s;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;}
.slider-controls button:hover{filter:brightness(90%);transform:scale(1.1);}
.slider-controls button:disabled{background:#e9ecef;cursor:not-allowed;opacity:.7;color:#6c757d;}
.slider-controls button svg{width:18px;height:18px;fill:currentColor;}
.custom-range-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:var(--slider-track-color);border-radius:5px;outline:none;margin:0 20px;}
.custom-range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:60px;height:30px;border-radius:50px;background-color:#eaf8f4;border:3px solid #000;background-image:url("data:image/svg+xml,%3Csvg width='40' height='24' viewBox='0 0 40 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black' stroke='blue' stroke-width='1.5'%3E%3Cpath d='M15 5 C11 8, 11 16, 15 19 L7 12 L15 5 Z'/%3E%3Cpath d='M25 5 C29 8, 29 16, 25 19 L33 12 L25 5 Z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:30px 20px;cursor:pointer;box-shadow:0 0 6px blue;transition:transform .2s;}
.custom-range-slider::-webkit-slider-thumb:hover{transform:scale(1.15);}
.custom-range-slider::-moz-range-thumb{width:22px;height:22px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(237,28,36,.4);transition:transform .2s;}
#currentVolumeDisplay{font-weight:700;color:var(--primary-color);font-size:1.1rem;margin-top:1rem;}

/* ══ PROOF STRIP ══ */
.proof-strip{background:linear-gradient(135deg,var(--indigo),#0040bb);padding:52px 0;margin-top:80px;}
.proof-inner{display:grid;grid-template-columns:repeat(4,1fr);}
.proof-item{text-align:center;padding:0 20px;}
.proof-item+.proof-item{border-left:1px solid rgba(255,255,255,.2);}
.pi-num{font-size:32px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin-bottom:6px;color:#fff;}
.pi-lbl{font-size:13px;color:#f1f1f1;}
.pi-ico{font-size:28px;color:#fff;margin-bottom:10px;}

/* ══ COMPARE TABLE ══ */
.compare-section{padding:70px 0;}
.cmp-header-row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.1fr;position:sticky;top:100px;z-index:20;background:var(--cream);padding-top:16px;}
.cmp-th{padding:20px 16px 16px;border-bottom:2px solid var(--border);}
.cmp-th:first-child{padding-left:0;}
.cmp-th-name{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.cmp-th-price{font-size:28px;font-weight:900;color:var(--indigo);letter-spacing:-1px;line-height:1;}
.cmp-th-price .small{font-size:13px;font-weight:500;color:var(--soft);letter-spacing:0;}
.cmp-th.featured-col{background:linear-gradient(160deg,#EEEEFF,#F4F4FF);border-radius:var(--r) var(--r) 0 0;border:1.5px solid rgba(37,99,235,.3);border-bottom:none;padding-bottom:18px;position:relative;}
.featured-col-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--indigo);color:#fff;font-size:10px;font-weight:800;padding:4px 14px;border-radius:0 0 8px 8px;white-space:nowrap;}
.cmp-th.featured-col .cmp-th-name{color:var(--indigo);}
.cmp-body{border:1px solid var(--border);border-radius:0 0 var(--r) var(--r);overflow:hidden;}
.cmp-group-hd{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.1fr;background:var(--cream2);border-bottom:1px solid var(--border);padding:13px 16px;}
.cmp-group-hd span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--ink);display:flex;align-items:center;gap:7px;}
.cmp-group-hd span i{font-size:15px;color:var(--indigo);}
.cmp-row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.1fr;border-bottom:1px solid var(--border);transition:var(--t);}
.cmp-row:last-child{border-bottom:none;}
.cmp-row:hover{background:rgba(37,99,235,.025);}
.cmp-cell{padding:14px 16px;font-size:13.5px;display:flex;align-items:center;gap:6px;color:var(--muted);}
.cmp-cell.featured-col{background:rgba(37,99,235,.03);border-left:1.5px solid rgba(37,99,235,.15);border-right:1.5px solid rgba(37,99,235,.15);}
.c-check{color:var(--sage);font-size:18px;}
.c-cross{color:var(--faint);font-size:18px;}
.c-val{font-size:13.5px;font-weight:600;color:var(--ink);}
.c-val.hi{color:var(--indigo);font-weight:700;}
.info-ico{color:var(--faint);font-size:14px;cursor:help;}

/* ══ ENTERPRISE ══ */
.ent-section{background:var(--cream2);padding:96px 0;}
.ent-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.ent-img-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);}
.ent-img-wrap img{width:100%;height:480px;object-fit:cover;filter:saturate(.88);}
.ent-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.4),rgba(26,26,46,.2));}
.ent-float{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid rgba(37,99,235,.2);border-radius:14px;padding:14px 18px;box-shadow:var(--sh-md);display:flex;align-items:center;gap:11px;}
.ef1{top:28px;right:10px;animation:floatY 3.2s ease-in-out infinite;}
.ef2{bottom:28px;left:10px;animation:floatY 3.2s ease-in-out infinite .8s;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ef-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.ef-val{font-size:18px;font-weight:800;color:var(--ink);line-height:1;}
.ef-lbl{font-size:11px;color:var(--soft);margin-top:2px;}
.ent-content h2{font-size:38px;font-weight:800;line-height:1.12;letter-spacing:-.5px;color:var(--ink);margin-bottom:14px;}
.ent-content>p{font-size:16px;color:var(--muted);line-height:1.78;margin-bottom:28px;}
.ent-perks{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}
.ent-perk{display:flex;gap:14px;align-items:flex-start;}
.ep-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:#fff;border:1px solid var(--border);}
.ent-perk h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.ent-perk p{font-size:13.5px;color:var(--soft);line-height:1.6;}

/* ══ RESPONSIVE ══ */
@media(max-width:1060px){
    .cards-grid{grid-template-columns:1fr 1fr;}
    .pc.featured{transform:none;}
    .cmp-header-row,.cmp-group-hd,.cmp-row{grid-template-columns:1.8fr 1fr 1fr 1fr;}
    .ent-inner{grid-template-columns:1fr;}
    .ef1,.ef2{display:none;}
    .proof-inner{grid-template-columns:1fr 1fr;}
    .proof-item+.proof-item{border-left:none;}
}
@media(max-width:760px){
    .sec-title{font-size:30px;}
    .cards-grid{grid-template-columns:1fr;}
    .pc.featured{transform:none;}
    .cmp-header-row,.cmp-group-hd,.cmp-row{grid-template-columns:1.5fr 0 0 1fr;}
    .cmp-cell:nth-child(2),.cmp-cell:nth-child(3),
    .cmp-th:nth-child(2),.cmp-th:nth-child(3),
    .cmp-group-hd>*:nth-child(2),.cmp-group-hd>*:nth-child(3){display:none;}
    .volume-slider-container{padding:20px 15px;}
    .custom-range-slider{margin:0 10px;}
}
@media(max-width:500px){
    .proof-inner{grid-template-columns:1fr;}
    .proof-item+.proof-item{border-left:none;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;margin-top:20px;}
}

/* Inline style attributes from pricing.php */
.pricing-custom-plan-amount {
    font-size: 32px;
    line-height: 1.25;
}

.pricing-standard-amount-indigo {
    color: var(--indigo);
}

.pricing-faint-text {
    color: var(--faint);
}


/* Additional utility classes for inline styles */
.pricing-compare-margin-bottom {
    margin-bottom: 48px;
}

.pricing-billing-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--soft);
    margin-bottom: 8px;
}

.pricing-billing-buttons {
    display: flex;
    gap: 6px;
}

.pricing-btn-monthly {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
    background: var(--cream2);
    color: var(--soft);
    border: 1.5px solid var(--border);
}

.pricing-btn-yearly {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
    background: var(--indigo);
    color: #fff;
    border: none;
}

.pricing-cmp-button-wrapper {
    margin-top: 12px;
}

.pricing-cmp-button {
    padding: 9px 16px;
    font-size: 12.5px;
    border-radius: 9px;
    width: 100%;
}

.pricing-cmp-button-link {
    display: block;
    padding: 9px 16px;
    font-size: 12.5px;
    border-radius: 9px;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.pricing-featured-badge-icon {
    font-size: 10px;
}

.pricing-custom-price-color {
    color: #353535;
}

.pricing-ent-icon-indigo {
    color: var(--indigo);
    font-size: 22px;
}

.pricing-ent-icon-sage {
    color: var(--sage);
    font-size: 22px;
}

.pricing-ent-icon-coral {
    color: var(--coral);
    font-size: 22px;
}

.pricing-ent-buttons-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pricing-ent-float-indigo {
    background: var(--indigo-lt);
    color: var(--indigo);
}

.pricing-ent-float-sage {
    background: var(--sage-lt);
    color: var(--sage2);
}