/* =========================================================
   Semantic theme (strong overrides) — load AFTER Tailwind
   ========================================================= */

/* Brand variables (single source of truth) */
:root {
    --primary: #00B67A;                 /* brand green */
    --primary-600: #009d6a;
    --primary-ring: rgba(0,182,122,.40); /* focus glow */
    --primary-ring-strong: rgba(0,182,122,.55);

    --accent: #f97316;                  /* orange-500 */
    --accent-600: #ea580c;
    --tab-accent: #ea580c;

    --heading: #1f2937;                 /* gray-800 */
    --muted: #6b7280;                   /* gray-600 */
    --muted-dark: #374151;              /* slate-700 */
    --muted-light: #9ca3af;             /* gray-400 */

    --border-muted: #d1d5db;            /* gray-300 */
    --border-primary: #10b981;          /* green-500 */
    --divide-muted: #e5e7eb;            /* gray-200 */

    --success-bg: #ecfdf5;              /* green-50 */
    --success-text: #065f46;
    --success-border: #10b981;

    --error: #dc2626;
    --error-border: #ef4444;

    --warning: #fffbeb;
    --warning-border: color-mix(in srgb, var(--warning) 90%, var(--error));
    --warning-text: #78350f;

    /* Confirmation page defaults */
    --confirm-bg-start: #e11d48;  /* rose-600 */
    --confirm-bg-end: #fbcfe8;    /* pink-200 */
    --loading-bar-bg: #e5e7eb;
    --loading-bar-color: var(--primary);
    --loading-text-color: #374151;
    --confirmation-card-bg: rgba(255,255,255,0.97);
    --confirmation-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* ---------- Surfaces & backgrounds ---------- */
.bg-surface { background:#fff; }
.bg-surface-strong { background:rgba(255,255,255,.95); }
.bg-muted-light { background:#f3f4f67d; }
.bg-disabled { background:#9ca3af; }
.bg-success-light { background:var(--success-bg); }
.bg-skip-modal { background:#2B2737; }
.modal-backdrop, .bg-overlay { background:rgba(0,0,0,.6); }
.bg-confirm-gradient { background: #fff; }

/* ---------- Text colours ---------- */
.text-heading { color:var(--heading); }
.text-muted { color:var(--muted); }
.text-muted-dark { color:var(--muted-dark); }
.text-muted-light { color:var(--muted-light); }
.text-success { color:var(--success-text); }
.text-error { color:var(--error); }
.text-primary { color:var(--primary); }
.text-accent { color:var(--accent); }
.text-accent:hover { color:var(--accent-600); }
.text-link { color:#2563eb; }

/* ---------- Borders & dividers ---------- */
.border-muted { border-color:var(--border-muted); }
.border-primary { border-color:var(--border-primary); }
.border-success { border-color:var(--success-border); }
.border-error { border-color:var(--error-border)!important; }
.divide-muted > :not([hidden]) ~ :not([hidden]) { border-color:var(--divide-muted); }

/* ---------- Buttons ---------- */
.btn-muted { background:#f3f4f6; color:#111827; }
.btn-muted:hover { background:#e5e7eb; }

.btn-primary { background:var(--success-border); color:#fff; font-weight:500; }
.btn-primary:hover { background:#059669; }

.btn-confirm {
    background:var(--primary);
    color:#fff;
    font-weight:600;
    transition:background-color .2s, transform .1s;
}
.btn-confirm:hover { background:var(--primary-600); }
.btn-disabled { background:#9ca3af; color:#fff; cursor:not-allowed; }
button:disabled { opacity:.6; cursor:not-allowed; }

/* Outline/neutral button */
.btn-outline {
    background:#fff;
    border:1px solid var(--border-muted);
    color:var(--heading);
    border-radius:.375rem;
}
.btn-outline:hover { background:#f9fafb; }

/* ---------- Tabs ---------- */
.tab-active { background:var(--success-bg); border-color:#86efac; color:var(--success-text); }
.tab-inactive { background:#fff; color:#111827; }
.tab-inactive:hover { background:#f9fafb; }

/* ---------- Code & error boxes ---------- */
.code-block {
    background:#f9fafb; padding:.75rem; font-size:.75rem;
    overflow:auto; max-height:60vh; border-radius:.25rem;
    white-space:pre-wrap; word-break:break-word;
}
.error-box {
    background:#fef2f2; padding:.75rem; font-size:.875rem; color:#b91c1c;
}

/* =========================================================
   Forms — definitive overrides for focus, hover, accents
   ========================================================= */

:where(input[type="text"],input[type="email"],input[type="tel"],
       input[type="number"],input[type="date"],input[type="password"],
       input[type="search"],select,textarea) {
    display:block; width:100%; min-height:2.5rem;
    padding:.5rem .75rem; line-height:1.25;
    border:1px solid var(--border-muted); border-radius:.375rem;
    background:#fff; color:#111827;
}

/* Global accent for checkboxes/radios */
input[type="radio"] { accent-color:var(--accent); }

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
}
input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: var(--accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
input[type="checkbox"]:checked::before { transform: scale(1); }

.accent-accent { accent-color:var(--accent); }

::placeholder { color:var(--muted-light); }

/* Focus ring */
:where(input,select,textarea):focus {
    outline:none!important;
    border-color:var(--primary)!important;
    box-shadow:0 0 0 2px var(--primary-ring)!important;
}
:where(input,select,textarea):focus-visible {
    outline:none!important;
    border-color:var(--primary)!important;
    box-shadow:0 0 0 2px var(--primary-ring)!important;
}

/* Error helper */
.input-error {
    border-color:var(--error-border)!important;
    box-shadow:0 0 0 2px rgba(239,68,68,.25)!important;
    background:#fff!important;
}

/* Disabled */
:where(input,select,textarea):disabled { cursor:not-allowed; opacity:.6; }

/* ---------- Select arrow (overlay span method) ---------- */
select:not([multiple]) {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:none; padding-right:2.25rem;
}
.relative > select + span {
    position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    display:inline-flex; align-items:center; height:calc(100% - 2px);
    pointer-events:none; white-space:nowrap; line-height:1;
}
select[multiple] { padding-right:.75rem; }

/* Date picker */
input[type="date"]::-webkit-calendar-picker-indicator { opacity:1; }

/* Stripe disabled */
#submit[disabled] { opacity:.6; cursor:not-allowed; }

/* Hover helper */
.hover\:bg-muted-hover:hover { background:#e5e7eb; }

/* Utility */
.underline-link { text-decoration:underline; text-underline-offset:2px; }
#move_in_date:disabled { background:#f3f4f6; }

/* =========================================================
   New helpers referenced by your button markup
   ========================================================= */
.bg-primary-hover { background:rgba(0,182,122,.08); }
.hover\:bg-primary-hover:hover { background:rgba(0,182,122,.08); }

.focus\:ring-primary-ring-strong:focus {
    box-shadow:0 0 0 2px var(--primary-ring-strong)!important;
}

/* Spinner colours */
.text-spinner { color:var(--primary); }
.spinner-track { opacity:.25; }
.spinner-fill { opacity:.75; }
.text-white-spinner { color:#fff; }

/* Logo and layout helpers */
.app-logo {
    background:url('/images/logos/default-logo.png') no-repeat center center;
    background-size:contain;
}
.page-header-subtitle { font-size:1.5rem; font-weight:bold; }
#energy_package_address_header { font-weight:500; font-size:1.125rem; }

.close-error-modal,
.close-skip-modal {
    color:white;
    font-weight:bold;
    padding-right:0.5rem;
    font-size:2rem!important;
}

/* =========================================================
   Confirmation Page Styling (theme-aware)
   ========================================================= */
.confirmation-wrapper {
    min-height:100vh;
    display:flex;
    align-items:start;
    justify-content:center;
    padding:1rem;
}
@media (min-width:640px) {
    .confirmation-wrapper { align-items:center; }
}

.tal-shadow {
    box-shadow:0 0px 0.5rem 0px rgba(0,0,0,0.1);
}

.confirmation-card {
    width:100%;
    max-width:24rem;
    background:var(--confirmation-card-bg);
    border-radius:2rem;
    box-shadow:var(--confirmation-shadow);
    overflow:hidden;
    text-align:center;
    position:relative;
}
.confirmation-card .check-icon-wrapper {
    display:grid; place-items:center;
    width:5rem; height:5rem;
    margin:0 auto 1.5rem auto;
    border-radius:9999px;
    background:var(--loading-bar-bg);
}
.confirmation-card .check-icon {
    display:grid; place-items:center;
    width:3rem; height:3rem;
    border-radius:9999px;
    background:var(--primary);
    color:#fff;
}

/* Fake loading bar */
.loading-wrapper {
    margin-top:2rem;
    width:100%;
    height:2.5rem;
    background:var(--loading-bar-bg);
    border-radius:.375rem;
    position:relative;
    overflow:hidden;
}
.loading-bar {
    position:absolute;
    top:0; left:0;
    height:100%; width:0%;
    background:var(--loading-bar-color);
    transition:width 5s linear;
}
.loading-text {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--loading-text-color);
    font-size:.875rem; font-weight:500;
}

/* CTA */
.confirmation-cta {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:100%;
    border-radius:.5rem;
    font-weight:600;
    padding:.75rem 1.25rem;
    background:var(--primary);
    color:#fff;
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
    transition:background-color .2s, transform .1s;
}
.confirmation-cta:hover { background:var(--primary-600); }
.confirmation-cta:active { transform:translateY(1px); }

.fade-hidden {
    opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.fade-visible {
    opacity:1; pointer-events:auto; transition:opacity .4s ease;
}

.start-again-btn {
    border-color: rgb(255 255 255 / 0.2);
}

/* Warning box */
/* ---------- Custom warning box & text ---------- */
.warning-box {
    background: var(--warning);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
}

/* =========================================================
    Date input reset
   ========================================================= */
/*
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
} */

/* From HeroIcons */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: #6b7280;
    -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'>\
<path stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/>\
</svg>") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 20px;
    height: 20px;
}