*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body{
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  position: relative;

  font-family:Inter,sans-serif;
  background:#030303;
  background:radial-gradient(circle at 20% 20%, #0a0a0a, #030303 60%);
  color:white;
}

.section {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .section {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Glass */
.glass{
background: rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

.tinted-glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: none !important;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

/* Inputs */
.input{
width:100%;
padding:14px;
border-radius:14px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
}

.input:focus{
outline:none;
border-color:#ff6a00;
}

.inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================
   CUSTOM SCROLLBAR — DELUXE THEME
========================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #ff6a00 #050505;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ff6a00,
    #ff8c2a
  );
  border-radius: 999px;
  border: 2px solid #050505;
  box-shadow: 0 0 8px rgba(255,106,0,0.35);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ff7a18,
    #ff9a3a
  );
  box-shadow: 0 0 14px rgba(255,106,0,0.6);
}

::-webkit-scrollbar-corner {
  background: #050505;
}

/* ===============================
   DROPDOWN SYSTEM
=============================== */

.dropdown{
position:relative;
z-index:40;
}

.dropdown.open{
z-index:9999;
}

.dropdown-btn{
width:100%;
text-align:left;
padding:15px;
border-radius:14px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
display:flex;
justify-content:space-between;
align-items:center;
transition:all .25s ease;
}

.dropdown-btn:hover{
border-color:rgba(255,106,0,0.5);
}

.dropdown-arrow{
transition:transform .25s ease;
color:#ff6a00;
}

.dropdown.open .dropdown-arrow{
transform:rotate(180deg);
}

/* Menu */
.dropdown-menu{
position:absolute;
top:110%;
left:0;
right:0;

/* SOLID TINT — NOT GLASS */
background:#0b0b0b; /* solid base color */
background:linear-gradient(
  180deg,
  rgba(18,18,18,0.98),
  rgba(10,10,10,0.98)
);

backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;

/* Structure */
border-radius:16px;
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 25px 70px rgba(0,0,0,0.75);

overflow:hidden;

opacity:0;
transform:translateY(-8px) scale(.98);
pointer-events:none;

transition:all .25s ease;
}

.dropdown.open .dropdown-menu{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}

/* Items */
.dropdown-item{
padding:16px;
cursor:pointer;
transition:all .2s ease;
border-bottom:1px solid rgba(255,255,255,0.04);
}

.dropdown-item:hover{
background:rgba(255,106,0,0.18);
padding-left:22px;
}

/* ===============================
   CUSTOM CHECKBOX (GLASS TICK)
=============================== */

.check-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 16px;
border-radius:14px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
cursor:pointer;
transition:all .25s ease;
}

.check-row:hover{
border-color:rgba(255,106,0,0.4);
background:rgba(255,255,255,0.05);
}

.check-wrap{
position:relative;
width:22px;
height:22px;
}

.check-input{
position:absolute;
opacity:0;
}

.check-box{
width:22px;
height:22px;
border-radius:6px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);
display:flex;
align-items:center;
justify-content:center;
transition:all .25s ease;
}

.check-box::after{
content:"✓";
font-size:14px;
color:#ff6a00;
opacity:0;
transform:scale(.5);
transition:all .2s ease;
}

.check-input:checked + .check-box{
background:rgba(255,106,0,0.18);
border-color:#ff6a00;
box-shadow:0 0 12px rgba(255,106,0,0.4);
}

.check-input:checked + .check-box::after{
opacity:1;
transform:scale(1);
}

.brand{
background:linear-gradient(135deg,#ff6a00,#ff9a2a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ===============================
   ORANGE BACKGROUND BLOBS
=============================== */

/* Glow System */
.orange-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  max-width: 100vw;
  overflow: hidden;
}

/* Sizes */
.glow-lg {
  width: 650px;
  height: 650px;
}

.glow-md {
  width: 420px;
  height: 420px;
}

.glow-sm {
  width: 260px;
  height: 260px;
}

/* Intensities */
.glow-strong {
  background: radial-gradient(circle, rgba(255,106,0,0.40), transparent 70%);
}

.glow-soft {
  background: radial-gradient(circle, rgba(255,106,0,0.22), transparent 70%);
}

.glow-subtle {
  background: radial-gradient(circle, rgba(255,106,0,0.14), transparent 70%);
}

textarea{
  resize:none !important;
}

/* =============================
   FLATPICKR GLASS THEME
============================= */

.flatpickr-calendar{
background:rgba(10,10,10,0.9);
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
color:white;
}

.flatpickr-months,
.flatpickr-weekdays{
background:transparent;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday,
.flatpickr-month{
color:white !important;
}

.flatpickr-weekday{
color:#aaa;
}

.flatpickr-day{
border-radius:10px;
color:#ddd;
}

.flatpickr-day:hover{
background:rgba(255,106,0,0.2);
}

.flatpickr-day.selected{
background:rgba(255,106,0,0.3);
border:1px solid #ff6a00;
box-shadow:0 0 12px rgba(255,106,0,0.4);
}

.flatpickr-time input{
color:white;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus{
background:rgba(255,106,0,0.2);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg{
fill:#ff6a00;
}

.flatpickr-disabled{
opacity:0.2;
}

/* =============================
   TIME SLOT BUTTONS
============================= */

.time-slot{
padding:14px;
border-radius:14px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
transition:all .25s ease;
font-weight:500;
cursor:pointer;
text-align:center;
}

.time-slot:hover{
border-color:rgba(255,106,0,0.5);
background:rgba(255,255,255,0.08);
}

.time-slot.active{
border-color:#ff6a00;
background:rgba(255,106,0,0.18);
box-shadow:0 0 16px rgba(255,106,0,0.35);
}

/* =====================
   STEP FLOW STATES
===================== */

.step-section{
transition: all .4s ease;
position:relative;
}

/* LOCKED = Greyed */
.step-locked{
opacity:0.35;
filter:grayscale(0.7);
pointer-events:none;
}

/* ACTIVE */
.step-active{
opacity:1;
filter:none;
pointer-events:auto;
}