/* =========================================================
   Sleep Station – MyAllocator BookNow – Custom Stylesheet
   VERSION I (final premium: inset CTA + calmer presence)
   Ziele:
   - Card + Inputs ruhig und editorial
   - Date control unified (wrapper = 1 control)
   - CTA: weniger massiv (kleiner), seitlich inset, präziser Schatten
   - Datepicker SAFE (nur Panel + z-index; keine Tabellenzellen)
   ========================================================= */

/* ---------- Base ---------- */
html, body { background: transparent !important; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:#111 !important;
  line-height:1.25 !important;
}

/* ---------- Tokens (local) ---------- */
:root{
  --ss-ink:#111214;
  --ss-paper:#fffdf7;
  --ss-white:#ffffff;

  /* a touch deeper / less candy than before */
  --ss-coral:#dd4a5b;

  --ss-line:rgba(0,0,0,0.14);
  --ss-line-soft:rgba(0,0,0,0.10);

  --ss-shadow-card:0 14px 34px rgba(0,0,0,0.08);
  --ss-shadow-field:0 10px 22px rgba(0,0,0,0.038);
  --ss-shadow-pop:0 18px 40px rgba(0,0,0,0.18);

  --ss-radius-card:20px;
  --ss-radius-ui:14px;
  --ss-radius-cta:12px;
}

/* ---------- Card / Layout ---------- */
.container{
  max-width:480px !important;
  width:100% !important;
  margin:0 auto !important;

  background:var(--ss-paper) !important;
  border-radius:var(--ss-radius-card) !important;

  box-shadow:var(--ss-shadow-card) !important;
  border:1px solid var(--ss-line-soft) !important;

  padding:22px 22px 18px 22px !important;
  overflow:visible !important;
  position:relative !important;
}

/* ---------- Headings / Copy ---------- */
h1.startBookNow{
  font-size:40px !important;
  letter-spacing:-0.03em !important;
  margin:0 0 8px 0 !important;
  line-height:1.02 !important;
  color:var(--ss-ink) !important;
}

#customMessage{ margin:0 0 14px 0 !important; }
#customMessage p{
  font-size:17px !important;
  color:rgba(0,0,0,0.60) !important;
  margin:0 !important;
}

/* ---------- Language / Flag Dropdown ---------- */
#flags{
  position:absolute !important;
  top:14px !important;
  right:22px !important;
  z-index:3000 !important;
}

#flags .lang-toggle{
  border:1px solid var(--ss-line-soft) !important;
  background:var(--ss-white) !important;
  border-radius:999px !important;
  padding:8px 10px !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.06) !important;
}

#flags .lang-toggle img{
  width:20px !important;
  height:14px !important;
  border-radius:3px !important;
}

#flags .caret{
  margin-left:8px !important;
  border-top-color:rgba(0,0,0,0.55) !important;
}

.dropdown-menu{
  border-radius:14px !important;
  box-shadow:var(--ss-shadow-pop) !important;
  border:1px solid var(--ss-line-soft) !important;
  padding:8px !important;
  z-index:4000 !important;
}

.dropdown-menu>li>a{
  border-radius:10px !important;
  padding:10px 12px !important;
}
.dropdown-menu>li>a:hover{ background:rgba(0,0,0,0.05) !important; }

/* ---------- Form Basics ---------- */
form#form fieldset{ border:none !important; margin:0 !important; padding:0 !important; }
.pull-left{ float:none !important; display:block !important; }
.space1{ display:none !important; }

/* Labels: editorial + compact */
label{
  font-weight:900 !important;
  font-size:14px !important;
  letter-spacing:0.03em !important;
  text-transform:uppercase !important;
  margin:14px 0 8px 0 !important;
  color:rgba(0,0,0,0.72) !important;
}

/* ---------- Arrival Date (UNIFIED CONTROL) ---------- */
#dp{
  width:100% !important;
  display:flex !important;
  align-items:stretch !important;

  border:1px solid var(--ss-line) !important;
  border-radius:var(--ss-radius-ui) !important;
  background:var(--ss-white) !important;
  box-shadow:var(--ss-shadow-field) !important;

  overflow:hidden !important;
}

#dp input#date_start{
  width:100% !important;
  height:50px !important;
  padding:0 16px !important;
  font-size:18px !important;

  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;

  color:var(--ss-ink) !important;
  box-sizing:border-box !important;
}

#dp .add-on{
  width:64px !important;
  height:50px !important;

  border:none !important;
  border-radius:0 !important;

  background:rgba(0,0,0,0.03) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow:none !important;
}

#dp .add-on i{ opacity:0.72 !important; }

#dp:focus-within{
  border-color:rgba(221,74,91,0.62) !important;
  box-shadow:
    0 0 0 4px rgba(221,74,91,0.18),
    var(--ss-shadow-field) !important;
}

/* ---------- Nights Select ---------- */
select#nights, #nights{
  width:100% !important;
  height:50px !important;
  padding:0 48px 0 16px !important;
  font-size:18px !important;

  border-radius:var(--ss-radius-ui) !important;
  border:1px solid var(--ss-line) !important;

  background:var(--ss-white) !important;
  color:var(--ss-ink) !important;
  box-sizing:border-box !important;

  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  box-shadow:var(--ss-shadow-field) !important;
}

select#nights.input-mini, #nights.input-mini{ width:100% !important; }

#nights{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.62) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.62) 50%, transparent 50%),
    linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0.05));
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    calc(100% - 64px) 0;
  background-size:
    6px 6px,
    6px 6px,
    64px 50px;
  background-repeat:no-repeat;
}

select#nights:focus, #nights:focus{
  outline:none !important;
  border-color:rgba(221,74,91,0.62) !important;
  box-shadow:
    0 0 0 4px rgba(221,74,91,0.18),
    var(--ss-shadow-field) !important;
}

/* ---------- Datepicker (SAFE) ---------- */
.datepicker,
.datepicker-dropdown{ z-index:6000 !important; }

.datepicker-dropdown:before,
.datepicker-dropdown:after{ display:none !important; }

.datepicker{
  border-radius:16px !important;
  box-shadow:var(--ss-shadow-pop) !important;
  border:1px solid var(--ss-line-soft) !important;
  background:#fff !important;
}

/* ---------- CTA Button (inset + premium) ---------- */
.btn-toolbar.check-avail-btn{
  margin:14px 0 0 0 !important;
  padding:0 !important;
}

/* Make CTA feel "placed", not "full-bleed" */
button.btn-proceed,
input.btn-proceed,
.btn.btn-large.btn-primary.btn-proceed{
  width:calc(100% - 12px) !important;
  margin:0 6px !important;                 /* inset left/right */

  height:48px !important;                  /* less mass */
  border-radius:var(--ss-radius-cta) !important;

  border:1px solid rgba(0,0,0,0.12) !important;
  background:var(--ss-coral) !important;
  color:rgba(255,255,255,0.98) !important;

  font-weight:780 !important;              /* slightly calmer than 800 */
  font-size:17px !important;
  letter-spacing:0.001em !important;

  box-shadow:
    0 8px 14px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;

  text-shadow:none !important;
  -webkit-font-smoothing:antialiased !important;

  transition:filter .15s ease, transform .08s ease, box-shadow .15s ease !important;
}

button.btn-proceed:hover,
input.btn-proceed:hover{
  filter:brightness(1.02) saturate(1.02) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.13),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

button.btn-proceed:active,
input.btn-proceed:active{
  transform:translateY(1px) !important;
  filter:brightness(0.99) !important;
}

button.btn-proceed:focus,
button.btn-proceed:focus-visible,
input.btn-proceed:focus,
input.btn-proceed:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 4px rgba(221,74,91,0.22),
    0 8px 14px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

/* ---------- Room Selection (tables) ---------- */
/* IMPORTANT: do not touch datepicker tables (.table-condensed) */
table.table:not(.table-condensed){
  border-collapse:separate !important;
  border-spacing:0 !important;
  width:100% !important;
  background:#ffffff !important;
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}

table.table:not(.table-condensed) th,
table.table:not(.table-condensed) td{
  padding:10px 12px !important;
  vertical-align:middle !important;
  border-top:1px solid rgba(0,0,0,0.06) !important;
}

table.table:not(.table-condensed) thead th{
  border-top:none !important;
  font-weight:800 !important;
  color:rgba(0,0,0,0.80) !important;
}

table.table:not(.table-condensed) td:first-child{ width:52% !important; }

/* Persons column select */
table.table:not(.table-condensed) td select,
table.table:not(.table-condensed) td select.input-mini{
  min-width:92px !important;
  width:92px !important;
  height:42px !important;
  padding:0 34px 0 14px !important;
  font-size:17px !important;

  border-radius:999px !important;
  border:1px solid rgba(0,0,0,0.14) !important;
  background:#fff !important;
  box-sizing:border-box !important;

  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.65) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat:no-repeat;
}

/* Prevent clipping */
.container, .row, .span12, .span10, .span8, .span6, .span4,
#form, #form fieldset{
  overflow:visible !important;
}

/* ---------- Text defaults ---------- */
h2, h3{
  font-weight:900 !important;
  letter-spacing:-0.01em !important;
}

p{
  font-size:16px !important;
  color:rgba(0,0,0,0.62) !important;
}

/* ---------- Small screens ---------- */
@media (max-width:480px){
  .container{
    max-width:100% !important;
    padding:16px !important;
    border-radius:18px !important;
  }
  h1.startBookNow{ font-size:36px !important; }
  label{ font-size:13px !important; }
  #dp input#date_start, #dp .add-on, #nights{ height:48px !important; }
  button.btn-proceed, input.btn-proceed{
    height:48px !important;
    font-size:16px !important;
    width:calc(100% - 10px) !important;
    margin:0 5px !important;
  }
}