:root{
  --yenolx-bg: #111;
  --yenolx-text: #ffa500;
  --yenolx-text-2: #ffcc00;
  --yenolx-accent: #ffa500;
  --yenolx-accent-2: #ffc107;
  --yenolx-badge-bg: #ffd966;
  --yenolx-badge-text:#000;
  --yenolx-border:#ffa500;
}

.yenolx-booking { max-width: 820px; margin: 1rem auto; padding: .5rem; color:var(--yenolx-text); }
.yenolx-card { background: var(--yenolx-bg); border-radius: 16px; box-shadow: 0 10px 30px rgba(255,165,0,.25); padding: 1rem; }
.yenolx-card .row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-bottom: .75rem; }
.yenolx-card label { font-size: .9rem; display: flex; flex-direction: column; gap: .25rem; }
.yenolx-card input, .yenolx-card select { background:#222; color:var(--yenolx-text-2); border: 1.5px solid var(--yenolx-border); border-radius: 10px; padding: .6rem .7rem; font-size: 1rem; }
.btn { display: inline-block; border: 1px solid var(--yenolx-accent); border-radius: 999px; padding: .6rem 1rem; background: var(--yenolx-accent); color:#000; cursor: pointer; }
.btn.primary { background: var(--yenolx-accent-2); border-color: var(--yenolx-accent-2); color:#000; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-btn { padding: .5rem .75rem; border: 1px solid var(--yenolx-border); border-radius: 999px; background: #111; color: var(--yenolx-text-2); cursor: pointer; font-size: .95rem; }
.slot-btn.special { outline: 2px solid var(--yenolx-accent); }
.slot-badge { font-size: .75rem; margin-left: .4rem; padding: .1rem .4rem; border-radius: 999px; background: var(--yenolx-badge-bg); color: var(--yenolx-badge-text); }
#yenolx-message { margin-top: .5rem; font-size: .95rem; color: var(--yenolx-text-2); }

.yenolx-offer{
  margin-top:.5rem; border:1px dashed var(--yenolx-accent);
  border-radius:12px; padding:.75rem; background:rgba(255,165,0,.06);
}
.yenolx-offer h4{ margin:0 0 .25rem; color:var(--yenolx-text-2); }
.yenolx-offer ul{ margin:.25rem 0 .5rem 1.25rem; }
.yenolx-offer .accept{ display:flex; align-items:center; gap:.5rem; margin-top:.25rem; }
.yenolx-offer input[type="checkbox"]{ accent-color:var(--yenolx-accent); width:18px; height:18px; }

@media (max-width: 640px){
  .yenolx-card .row { grid-template-columns: 1fr; }
  .slots { gap: .4rem; }
}