/* The first layer in index.html gives this layout priority over legacy billing rules. */
@layer billing-hero-layout {
  @media (min-width:1101px) {
    html body #settings-section.banymay-settings:has(#billing-settings-card[open]:not([hidden])) > .settings-page.settings-page--control-center {
      box-sizing:border-box !important; padding-right:18px !important;
    }
    html body #settings-section.banymay-settings .settings-card-stack:has(#billing-settings-card[open]:not([hidden])) {
      flex:0 0 auto !important; overflow:visible !important;
    }
    html body #settings-section.banymay-settings .settings-card-stack > #billing-settings-card[open]:not([hidden]) {
      box-sizing:border-box !important; flex:0 0 auto !important; overflow:visible !important;
      width:100% !important; max-width:100% !important; margin-left:0 !important;
    }
    html body #settings-section.banymay-settings .settings-main-panel:has(#billing-settings-card[open]:not([hidden])) {
      height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important;
    }
    #billing-panel {
      --hero-text:#eef4f8; --hero-muted:#abc0ce; --hero-accent:#2bd0cf;
      --hero-surface:#0b2633; --hero-offer:#102e3a; --hero-border:#294c5b;
      --hero-pill:#153e43; --hero-pill-border:#428d88; --hero-price:#eaf4fa;
    }
    html[data-appearance="light"] #billing-panel {
      --hero-text:#173353; --hero-muted:#637f9a; --hero-accent:#008f89;
      --hero-surface:#fff; --hero-offer:#f2f7fb; --hero-border:#d9e6ee;
      --hero-pill:#e4f4ef; --hero-pill-border:#8bbdb0; --hero-price:#173d5c;
    }
    html[data-appearance="black"] #billing-panel {
      --hero-text:#e9e9e9; --hero-muted:#b9b9b9; --hero-accent:#65d5c5;
      --hero-surface:#191919; --hero-offer:#222; --hero-border:#414141;
      --hero-pill:#203a33; --hero-pill-border:#538b73; --hero-price:#f2f2f2;
    }
    html[data-theme="warm-oak"] #billing-panel {
      --hero-text:#493323; --hero-muted:#756657; --hero-accent:#00675d;
      --hero-surface:#f7f1e7; --hero-offer:#f0ecdc; --hero-border:#dfd0bc;
      --hero-pill:#e0e9d7; --hero-pill-border:#83b998; --hero-price:#173d5c;
    }
    #billing-panel .billing-hero {
      box-sizing:border-box !important; display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(360px,35%) !important;
      grid-template-rows:auto 1fr !important; column-gap:24px !important; row-gap:12px !important;
      width:100% !important; min-width:0 !important; max-width:none !important;
      height:auto !important; min-height:190px !important; margin:0 !important; padding:12px 12px 12px 24px !important;
      border:1px solid var(--hero-border) !important; border-radius:14px !important;
      background:var(--hero-surface) !important; box-shadow:none !important; overflow:visible !important;
    }
    #billing-panel .billing-hero::before,
    #billing-panel .billing-hero::after,
    #billing-panel :is(.billing-hero-glow,.billing-expired-hero-icon) { display:none !important; content:none !important; }
    #billing-panel .billing-hero-top {
      display:block !important; grid-column:1 !important; grid-row:1 !important;
      margin:4px 0 0 !important; padding:0 !important; align-self:start !important;
    }
    #billing-panel .billing-kicker {
      display:inline-block !important; margin:0 !important; padding:7px 11px !important;
      border:1px solid var(--hero-pill-border) !important; border-radius:5px !important;
      color:var(--hero-accent) !important; -webkit-text-fill-color:var(--hero-accent) !important;
      background:var(--hero-pill) !important; font:700 12px/16px Inter,system-ui,sans-serif !important;
      letter-spacing:.02em !important; text-transform:uppercase !important;
    }
    #billing-panel .billing-hero-main { display:contents !important; }
    #billing-panel .billing-plan-copy {
      grid-column:1 !important; grid-row:2 !important; align-self:center !important;
      width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 0 8px !important;
    }
    #billing-panel .billing-plan-copy h3 {
      margin:0 0 10px !important; color:var(--hero-text) !important; -webkit-text-fill-color:var(--hero-text) !important;
      font:750 clamp(24px,1.7vw,32px)/1.16 Inter,system-ui,sans-serif !important; letter-spacing:-.025em !important;
    }
    #billing-panel .billing-plan-copy p {
      margin:0 !important; color:var(--hero-muted) !important; -webkit-text-fill-color:var(--hero-muted) !important;
      font:400 clamp(11px,.78vw,15px)/1.35 Inter,system-ui,sans-serif !important;
      letter-spacing:-.025em !important; white-space:nowrap !important;
    }
    #billing-panel .billing-price-column.billing-offer-panel {
      container:billing-offer / inline-size !important;
      box-sizing:border-box !important; position:relative !important; display:flex !important;
      flex-direction:column !important; align-items:stretch !important; justify-content:center !important;
      grid-column:2 !important; grid-row:1 / span 2 !important; align-self:stretch !important; justify-self:stretch !important;
      width:auto !important; min-width:0 !important; max-width:none !important; min-height:166px !important;
      margin:0 !important; padding:15px 18px !important; gap:12px !important;
      border:1px solid var(--hero-border) !important; border-radius:13px !important;
      background:var(--hero-offer) !important; box-shadow:none !important;
    }
    #billing-panel .billing-offer-panel::before {
      content:"" !important; display:block !important; position:absolute !important;
      left:-16px !important; top:8px !important; bottom:8px !important; width:1px !important; background:var(--hero-border) !important;
    }
    #billing-panel .billing-offer-status {
      display:block !important; width:100% !important; min-width:0 !important; min-height:0 !important;
      margin:0 !important; padding:0 0 12px !important; border:0 !important; border-bottom:1px solid var(--hero-border) !important;
    }
    #billing-panel .billing-status-group {
      display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
      width:100% !important; min-width:0 !important; gap:16px !important; margin:0 !important;
    }
    #billing-panel .billing-status-pill {
      position:static !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
      flex:0 0 auto !important; margin:0 !important; padding:10px 15px !important;
      border:1px solid var(--hero-pill-border) !important; border-radius:8px !important; background:var(--hero-pill) !important;
      color:var(--hero-accent) !important; -webkit-text-fill-color:var(--hero-accent) !important;
      font:700 15px/20px Inter,system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:uppercase !important; white-space:nowrap !important;
    }
    #billing-panel .billing-trial-summary { display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:4px !important; min-width:0 !important; }
    #billing-panel .billing-trial-summary:has(#billing-trial-remaining[hidden]) { display:none !important; }
    #billing-panel .billing-trial-remaining {
      display:block !important; margin:0 !important; color:var(--hero-text) !important; -webkit-text-fill-color:var(--hero-text) !important;
      font:700 17px/22px Inter,system-ui,sans-serif !important; white-space:nowrap !important;
    }
    #billing-panel #billing-trial-caption { color:var(--hero-muted) !important; -webkit-text-fill-color:var(--hero-muted) !important; font:400 13px/18px Inter,system-ui,sans-serif !important; }
    #billing-panel :is(#billing-trial-remaining,#billing-trial-caption)[hidden] { display:none !important; }
    #billing-panel .billing-offer-price {
      display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
      width:100% !important; min-width:0 !important; gap:14px !important; margin:0 !important;
    }
    #billing-panel .billing-price-block {
      display:block !important; flex:0 1 auto !important; grid-column:auto !important; grid-row:auto !important;
      width:auto !important; min-width:0 !important; max-width:none !important; min-height:0 !important;
      margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
      background:transparent !important; box-shadow:none !important; text-align:left !important;
    }
    #billing-panel .billing-price {
      display:flex !important; align-items:baseline !important; gap:16px !important;
      color:var(--hero-price) !important; -webkit-text-fill-color:var(--hero-price) !important;
      font:800 clamp(30px,2.2vw,42px)/1.1 Inter,system-ui,sans-serif !important; white-space:nowrap !important;
    }
    #billing-panel .billing-price-original { color:var(--hero-muted) !important; -webkit-text-fill-color:var(--hero-muted) !important; font:650 16px/1.2 Inter,system-ui,sans-serif !important; text-decoration:line-through !important; }
    #billing-panel .billing-price-current { color:inherit !important; -webkit-text-fill-color:inherit !important; font:inherit !important; }
    #billing-panel .billing-price-period {
      flex:0 0 auto !important; display:block !important; width:auto !important; min-width:0 !important; max-width:none !important;
      margin:0 !important; padding:4px 0 4px 14px !important; border:0 !important; border-left:1px solid var(--hero-border) !important;
      color:var(--hero-muted) !important; -webkit-text-fill-color:var(--hero-muted) !important;
      font:400 13px/18px Inter,system-ui,sans-serif !important; text-align:left !important; white-space:nowrap !important;
    }
    #billing-panel .billing-price-period-first { display:block !important; font-weight:700 !important; }
    #billing-panel .billing-price-period-next { display:block !important; font-weight:400 !important; }
    @container billing-offer (max-width:340px) {
      #billing-panel .billing-status-group { gap:10px !important; }
      #billing-panel .billing-status-pill { padding:8px 10px !important; font-size:13px !important; }
      #billing-panel .billing-trial-remaining { font-size:15px !important; }
      #billing-panel .billing-offer-price { gap:10px !important; }
      #billing-panel .billing-price { font-size:30px !important; gap:8px !important; }
      #billing-panel .billing-price-original { font-size:14px !important; }
      #billing-panel .billing-price-period { font-size:12px !important; padding-left:10px !important; }
    }
  }
}