/* Northwest Chef Hire - static styles */
:root {
  --background: #fdfcfa;
  --foreground: #1f2433;
  --card: #ffffff;
  --cardcolor: #eeeeee;
  --primary: #2b3346;
  --primary-foreground: #fdfcfa;
  --secondary: #f3f1ec;
  --muted-foreground: #232323;
  --accent: #ff4d01;
  --accent-foreground: #ffffff;
  --border: #e6e3dd;
  --radius: 0.5rem;
  --font-serif: "Outfit", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, sans-serif;
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-mdcolor: 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 40px -10px rgba(0,0,0,.15);
  --page-padding: 1.5rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 18px; }
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height:auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1.2;
}
ul, ol { padding-left: 1.25rem; }
button, input, textarea { font: inherit; color: inherit; }

/* Layout */
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.container.hero-section,
.container.section { padding-inline: var(--page-padding); }
.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(253,252,250,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}


.hero-soft {
   

    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
 
    color: #fff;
}
.heroabout {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/aboutbg.jpg');
 
}
.heroindustry {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/bg2.jpg');
 
}
.heroRequest {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/bg3.jpg');
         background-position: center center;
 
}
.herocontact {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/bg4.jpg');
         background-position: center center;
 
}

.heromodern {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/bg6.jpg');
         background-position: center center;
 
}

.heroen {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/bg5.jpg');
         background-position: top center;
 
}
.heroabout1 {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 77, 1, 0.94),
            rgba(255, 126, 58, 0.90),
            rgba(255, 161, 92, 0.88)
        ),
        url('../assets/about1.jpg');
         background-position: center center;
 
}

.hero-soft h1, .hero-soft h2, .hero-soft p, .hero-soft .eyebrow { color: #fff !important; }
.hero-soft p.sub { color: rgba(255,255,255,.9) !important; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; max-width: 72rem; margin: 0 auto;
}
.brand { display: flex; align-items: center; line-height: 1.1; }
.brand-logo { height: 100px; width: auto; border-radius: 9999px; object-fit: contain; display: block; transition: transform .2s; }
.brand:hover .brand-logo { transform: scale(1.05); }
@media (min-width: 768px) { .brand-logo { height: 100px; width: auto; display: block;} }
.brand-name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--primary); font-weight: 600; }
.brand-tag { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); margin-top: 2px; }

/* Chips (get-in-touch) */
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.25rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: .875rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.chip:hover { border-color: var(--accent); }
.chip-square { border-radius: var(--radius); text-transform: uppercase; letter-spacing: .08em; padding: .55rem 1.75rem; }
.chip-active { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }
.field-label { display: block; font-size: .875rem; color: var(--foreground); margin-bottom: .5rem; }
.field-group { margin-top: 1.25rem; }
.field-grid-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.field-grid-2 > * { min-width: 0; }
@media (min-width: 768px) { .field-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.notice { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); background: rgba(243,241,236,.6); border-radius: var(--radius); font-size: .875rem; color: var(--muted-foreground); }
.notice strong { color: var(--foreground); display: block; margin-bottom: .35rem; }
.select-field, .file-field {
  width: 100%; max-width: 100%; min-width: 0;
  padding: .75rem 1rem; border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius); font-size: .875rem; outline: none;
  box-sizing: border-box;
}
.select-field[type="date"],
.select-field[type="time"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-min-logical-width: 0;
  padding-right: 2.75rem;
  line-height: 1.4;
  appearance: auto;
  -webkit-appearance: auto;
}
.select-field[type="date"]::-webkit-date-and-time-value,
.select-field[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
.select-field[type="date"]::-webkit-calendar-picker-indicator,
.select-field[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
}
.select-field:focus, .file-field:focus { border-color: var(--accent); }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; color: var(--muted-foreground); margin-top: 1.5rem; }
.consent input { margin-top: .25rem; accent-color: var(--accent);  width: auto !important;}
.nav { display: none; align-items: center; gap: 2rem; }
.nav a { font-size: .875rem; color: #000000; transition: color .15s; }
.nav a:hover, .nav a.active { color: var(--accent); }
.nav a:last-child {
    /* Your styles here */
    margin-right: 0;
    color: #fff;
}
.nav a:nth-child(4) {
    /* Your styles here */
    font-weight: bold;
    font-size: .9rem;
}
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--radius); font-size: .875rem; transition: opacity .15s, background .15s; cursor: pointer; border: none; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: .9; }
.btn-accent { background: var(--accent); color: var(--accent-foreground); }
.btn-accent:hover { opacity: .9; }
.btn-outline { background: var(--background); color: var(--foreground); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--secondary); }
.menu-toggle { background: none; border: none; cursor: pointer; padding: .25rem; }
.mobile-nav { display: none; flex-direction: column; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--background); }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: .5rem 0; font-size: .875rem; color: rgba(31,36,51,.8); }
.mobile-nav a.active { color: var(--accent); }

@media (min-width: 768px) {
  .nav { display: flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

@media (max-width: 1024px) {

 .brand-logo { height: 65px;  }
}


/* Hero */
.hero { border-bottom: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg, #ff4d01 0%, #ff7e3a 50%, #ffa15c 100%); color: #fff; }
.hero h1, .hero h2, .hero p, .hero .eyebrow { color: #fff !important; }
.hero p.sub { color: rgba(255,255,255,.9) !important; }
.hero-section { padding: 2rem 0; }
.eyebrow { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.hero h1 { font-size: 2.25rem; }
.hero p.sub { margin-top: 1rem; max-width: 42rem; font-size: 1rem; }

.herosub { border-bottom: 1px solid rgba(255,255,255,.2);  color: #fff; }
.herosub h1, .hero h2, .hero p, .hero .eyebrow { color: #fff !important; }
.herosub p.sub { color: rgba(255,255,255,.9) !important; }
.hero-section { padding: 2rem 0; }
.eyebrow { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.herosub h1 { font-size: 2.25rem; }
.herosub p.sub { margin-top: 1rem; max-width: 42rem; font-size: 1rem; }

@media (min-width: 768px) {
  .hero-section { padding: 6rem 0; }
  .hero h1 { font-size: 3rem; }
  .hero p.sub { font-size: 1.125rem; }


  .herosub h1 { font-size: 3rem; }
  .herosub p.sub { font-size: 1.125rem; }
}

/* Index hero with image */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }
.split img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-xl); width: 100%; }

/* Sections */
section.soft { background: rgba(243,241,236,.5); }
.section { padding: 5rem 0; }
.section h2 { font-size: 1.875rem; }
@media (min-width: 768px) { .section h2 { font-size: 2.25rem; } }

/* Grid */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
}

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: box-shadow .2s; }
.card:hover { box-shadow: var(--shadow-md); }
.card .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.card h3 { font-size: 1.25rem; margin-top: 1rem; }
.card p { margin-top: .5rem; font-size: .815rem; color: var(--muted-foreground); }
.card ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: rgba(31,36,51,.8); }
.card ul li { display: flex; gap: .5rem; align-items: flex-start; }

.cardcolor { background: var(--cardcolor); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: box-shadow .2s; }
.cardcolor:hover { box-shadow: var(--shadow-mdcolor); }
.cardcolor .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.cardcolor h3 { font-size: 1.25rem; margin-top: 1rem; color:#000000 }
.cardcolor p { margin-top: .5rem; font-size: .815rem; color: #000000; }
.cardcolor ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: rgba(31,36,51,.8); }
.cardcolor ul li { display: flex; gap: .5rem; align-items: flex-start; }
.bullet { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: .55rem; flex: none; }

.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; color: rgba(31,36,51,.85); margin-top: 1.5rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; }
.check-list svg { color: var(--accent); width: 1rem; height: 1rem; flex: none; margin-top: 3px; }

.tag-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 640px) { .tag-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .tag-grid { grid-template-columns: repeat(3,1fr); } }
.tag-grid > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .875rem; color: rgba(31,36,51,.8); }

.center-quote { max-width: 56rem; margin: 0 auto; text-align: center; padding: 5rem 1.5rem; }
.center-quote p { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.5; color: var(--primary); }

/* Contact */
.form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.form input, .form textarea {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--border);
  background: var(--card); border-radius: var(--radius); font-size: .875rem; outline: none;
}

.form input:focus, .form textarea:focus { border-color: var(--accent); }
.btn-submit {
  margin-top: 1.5rem;
  padding: .85rem 2rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  width: auto;
}
.form .note { font-size: .75rem; color: var(--muted-foreground); }
.info-row { display: flex; gap: .75rem; align-items: flex-start; margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.info-row svg { width: 1rem; height: 1rem; color: var(--accent); margin-top: 3px; flex: none; }
.info-row a { color: var(--accent); }
.info-row a:hover { text-decoration: underline; }
.info-block { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.25rem; }
.info-block h3 { font-family: var(--font-serif); font-size: 1.125rem; color: var(--primary); }
.licence { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius); padding: 1rem; }
.licence img { height: 3.5rem; width: auto; }
.licence .label { font-family: var(--font-serif); font-size: .875rem; color: var(--primary); }
.licence .num { font-size: .875rem; color: var(--muted-foreground); }
.licence .num strong { color: var(--foreground); font-weight: 500; }

/* Policy article */
.article { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.article h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--primary); }
.article h3 { font-family: var(--font-serif); font-size: 1.125rem; color: var(--primary); margin-top: .75rem; }
.article p, .article li { color: rgba(31,36,51,.85); font-size: .95rem; }
.article ul { margin-left: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.article .block { display: flex; flex-direction: column; gap: .75rem; }
.article a { color: var(--accent); }
.article a:hover { text-decoration: underline; }
.bigh2 { font-family: var(--font-serif); font-size: 1.875rem !important; color: var(--primary); margin-top: 1rem; }

/* Footer */
.footer { margin-top: 0rem; background: rgba(243,241,236,.5); border-top: 1px solid var(--border); }
.footer-inner { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-inner { grid-template-columns: repeat(4,1fr); } .footer-brand { grid-column: span 2; } }
.footer h4 { font-size: .875rem; font-weight: 500; color: var(--foreground); font-family: var(--font-sans); letter-spacing: 0; }
.footer ul { list-style: none; padding: 0; margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.footer ul a { font-size: .875rem; color: var(--muted-foreground); }
.footer ul a:hover { color: var(--accent); }
.footer-brand .name { font-family: var(--font-serif); font-size: 1.125rem; color: var(--primary); }
.footer-brand p { margin-top: .75rem; max-width: 22rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-brand .lic { margin-top: 1rem; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom div { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.5rem; font-size: .75rem; color: var(--muted-foreground); }

/* Utilities */
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.text-center { text-align: center; }
.muted { color: var(--muted-foreground); }
.stack > * + * { margin-top: 1rem; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.animate-fade-in { animation: fadeInUp .5s ease-out both; }
.animate-delay-100 { animation-delay: .1s; }
.animate-delay-200 { animation-delay: .2s; }
.card { transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }

/* Internal hero - compact + side image */

@media (min-width: 768px) { .hero-soft .hero-section { padding: 3.5rem 0; } }
.hero-internal { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .hero-internal { grid-template-columns: 1fr auto; } }
.hero-internal img { display: none; }
@media (min-width: 768px) {
  .hero-internal img {
    display: block; width: 14rem; height: 10rem; object-fit: cover;
    border-radius: var(--radius); box-shadow: 0 16px 30px rgba(0,0,0,.18);
    border: 2px solid rgba(255,255,255,.4);
  }
}

/* CTA bar reused on internal pages */
.cta-bar { background: rgba(243,241,236,.5); }
.cta-bar-inner { max-width: 64rem; margin: 0 auto; padding: 3.5rem 1.5rem; text-align: center; }
.cta-bar h2 { font-size: 1.5rem; }
@media (min-width: 768px) { .cta-bar h2 { font-size: 1.875rem; } }
.cta-bar .cta-buttons { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cta-bar .btn-grad { background: linear-gradient(135deg, #ff4d01 0%, #ff7e3a 100%); color: #fff; padding: .8rem 1.25rem; border-radius: var(--radius); font-size: .875rem; transition: transform .15s; }
.cta-bar .btn-grad:hover { transform: scale(1.03); }
.cta-bar .btn-ghost { padding: .8rem 1.25rem; border-radius: var(--radius); font-size: .875rem; border: 1px solid #ff4d01; color: #ff4d01; transition: background .15s, color .15s; }
.cta-bar .btn-ghost:hover { background: #ff4d01; color: #fff; }

/* Footer license block */
.footer-lic { display: flex; gap: 1rem; align-items: center; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; max-width: 22rem; }
.footer-lic img { height: 48px; width: auto; }
.footer-lic .title { font-family: var(--font-serif); font-size: .875rem; color: var(--primary); }
.footer-lic .lic-num { font-size: .75rem; color: var(--muted-foreground); }
.footer-lic .lic-num strong { color: var(--foreground); font-weight: 600; }

/* Multi-select dropdown */
.multiselect { position: relative; width: 100%; min-width: 0; }
.multiselect .multiselect-toggle {
  width: 100%; max-width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; text-align: left; cursor: pointer; background: var(--card);
  overflow: hidden;
}
.multiselect .multiselect-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.multiselect .multiselect-label.is-placeholder { color: var(--muted-foreground); }
.multiselect .multiselect-toggle svg { transition: transform .15s; flex: none; color: var(--muted-foreground); }
.multiselect.open .multiselect-toggle svg { transform: rotate(180deg); }
.multiselect.open .multiselect-toggle { border-color: var(--accent); }
.multiselect-menu {
  display: none; position: absolute; top: calc(100% + .25rem); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); z-index: 20; max-height: 260px; overflow-y: auto; padding: .25rem;
}
.multiselect.open .multiselect-menu { display: block; }
.multiselect-option {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem;
  font-size: .875rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; user-select: none;
}
.multiselect-option:hover { background: var(--secondary); }
.multiselect-option input[type=checkbox] { accent-color: var(--accent); width: auto !important; margin: 0; }
.multiselect-all { font-weight: 600; }
.multiselect-divider { height: 1px; background: var(--border); margin: .25rem 0; }

/* Booking type (request-a-staff) */
#requestStaffForm {
  max-width: 100%;
  overflow-x: hidden;
}
.ras-form-wrap {
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .ras-form-wrap.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .booking-slot {
    padding: .75rem;
  }
}
.booking-fields-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 1rem;
}
/* Cross-browser date/time picker field */
label.picker-wrap,
.picker-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.picker-display {
  flex: 1 1 0%;
  min-width: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.picker-display.is-placeholder { color: var(--muted-foreground); }
.picker-icon {
  flex: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: var(--accent);
  pointer-events: none;
}
.picker-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.001;
  cursor: pointer;
  font-size: 16px;
  z-index: 2;
  background: transparent;
}

/* Firefox: custom time picker dropdown (native type=time has no popup) */
.custom-time-picker .picker-wrap[data-picker="time"] {
  cursor: pointer;
  overflow: visible;
  z-index: 1;
}
.custom-time-picker .picker-wrap[data-picker="time"].ff-time-open {
  z-index: 50;
}
.custom-time-picker .time-range-cell,
.custom-time-picker .booking-time-block,
.custom-time-picker .booking-fields-wrap {
  overflow: visible;
}
.custom-time-picker .picker-wrap[data-picker="time"] .picker-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.custom-time-picker .ff-time-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .75rem;
}
.custom-time-picker .ff-time-dropdown.is-open {
  display: block;
}
.custom-time-picker .ff-time-dropdown-inner {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
.custom-time-picker .ff-time-col {
  flex: 1;
  min-width: 0;
}
.custom-time-picker .ff-time-col-label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
  margin-bottom: .35rem;
}
.custom-time-picker .ff-time-col select {
  width: 100%;
  min-width: 0;
  padding: .55rem .5rem;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  box-sizing: border-box;
  cursor: pointer;
}
.custom-time-picker .ff-time-done {
  flex: none;
  padding: .55rem .85rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-size: .875rem;
  cursor: pointer;
  white-space: nowrap;
}
.custom-time-picker .ff-time-done:hover { opacity: .9; }
.booking-panel {
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.booking-panel.is-visible { display: block; }
.booking-dates-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .booking-dates-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
}
.booking-dates-stack > div {
  min-width: 0;
  width: 100%;
}
.booking-time-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  width: 100%;
  min-width: 0;
}
.time-range-sublabel {
  display: block;
  font-size: .75rem;
  color: var(--muted-foreground);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.time-range-row {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  min-width: 0;
}
.time-range-cell {
  min-width: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .time-range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
  }
}
.booking-slots-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
.booking-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--card);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.booking-slot-date {
  width: 100%;
  min-width: 0;
}
.btn-remove-date {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: .875rem;
  line-height: 1.2;
}
.btn-remove-date-text {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .5rem .75rem;
  text-align: center;
}
.btn-add-date {
  margin-top: .5rem;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: .875rem;
  padding: 0;
}
.btn-add-date:hover { text-decoration: underline; }