/* ===========================================================
   TicoTrip · Date box (Mes / Año) — dropdown custom, look del sitio
   Componente compartido por index.html, ecuador.html, peru.html.
   REVERSIBLE: borrá este archivo + el <link>/<script> y revertí el markup.
   =========================================================== */

.tt-datebox-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.tt-datebox{
  position:relative;
  width:100%;
  /* Tema por defecto = Ecuador / Perú (blanco, tan, naranja) */
  --ttb-bg:#FFF;
  --ttb-border:#D9CDB8;
  --ttb-radius:12px;
  --ttb-color:#1F2818;
  --ttb-focus:#D17F1E;
  --ttb-hover:#F3ECE0;
  --ttb-sel:#D17F1E;
  --ttb-pad:14px 16px;
  --ttb-size:16px;
  --ttb-weight:400;
  --ttb-bw:2px;
  --ttb-shadow:0 0 0 3px rgba(209,127,30,.12);
}

.tt-datebox .ttb-trigger{
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding:var(--ttb-pad);
  background:var(--ttb-bg);
  border:var(--ttb-bw) solid var(--ttb-border);
  border-radius:var(--ttb-radius);
  color:var(--ttb-color);
  font-family:inherit;
  font-size:var(--ttb-size);
  font-weight:var(--ttb-weight);
  line-height:1.2;
  cursor:pointer;
  text-align:left;
  transition:border-color .2s, box-shadow .2s;
}
.tt-datebox.is-open .ttb-trigger,
.tt-datebox .ttb-trigger:focus-visible{
  outline:none;
  border-color:var(--ttb-focus);
  box-shadow:var(--ttb-shadow);
}
.tt-datebox .ttb-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tt-datebox .ttb-value.ttb-placeholder{ opacity:.55; }

.tt-datebox .ttb-chevron{
  display:flex;
  flex:0 0 auto;
  color:var(--ttb-focus);
  transition:transform .2s ease;
}
.tt-datebox.is-open .ttb-chevron{ transform:rotate(180deg); }

.tt-datebox .ttb-list{
  position:absolute;
  z-index:80;
  top:calc(100% + 6px);
  left:0;
  right:0;
  margin:0;
  padding:6px;
  list-style:none;
  max-height:240px;
  overflow-y:auto;
  background:var(--ttb-bg);
  border:var(--ttb-bw) solid var(--ttb-border);
  border-radius:var(--ttb-radius);
  box-shadow:0 14px 30px rgba(31,40,24,.18);
  -webkit-overflow-scrolling:touch;
}
.tt-datebox .ttb-option{
  padding:11px 14px;
  border-radius:calc(var(--ttb-radius) - 4px);
  color:var(--ttb-color);
  font-family:inherit;
  font-size:var(--ttb-size);
  font-weight:var(--ttb-weight);
  line-height:1.2;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.tt-datebox .ttb-option:hover,
.tt-datebox .ttb-option.is-active{ background:var(--ttb-hover); }
.tt-datebox .ttb-option.is-selected{
  background:var(--ttb-sel);
  color:#FFF;
}

.tt-datebox.is-disabled{ opacity:.5; pointer-events:none; }

/* ---- Tema HOME (crema, dorado, radio 6px) ---- */
.tt-datebox-row.tt-home .tt-datebox{
  --ttb-bg:rgba(242,235,221,.94);
  --ttb-border:rgba(217,164,65,.45);
  --ttb-radius:6px;
  --ttb-color:#1F2818;
  --ttb-focus:#D9A441;
  --ttb-hover:#ECE2CC;
  --ttb-sel:#D9A441;
  --ttb-pad:14px 16px;
  --ttb-size:15px;
  --ttb-weight:300;
  --ttb-bw:1.5px;
  --ttb-shadow:0 0 0 3px rgba(217,164,65,.14);
}

@media (max-width:360px){
  .tt-datebox-row{ gap:10px; }
}