/* x2x Booking v3.0 */

.x2xbk-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#1e293b; max-width:980px; margin:0 auto; padding:20px 0; font-size:14px; line-height:1.5; }
.x2xbk-wrap *,.x2xbk-wrap *::before,.x2xbk-wrap *::after { box-sizing:border-box; }

/* === STEP 1 === */
.x2xbk-wrap .x2xbk-s1 {
  display:grid;
  grid-template-columns:240px 1fr 220px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 8px 32px rgba(3,30,80,.10);
  border:1px solid #e2e8f0;
  overflow:hidden;
  min-height:520px;
}

/* === STEP 2 === */
.x2xbk-wrap .x2xbk-s2 {
  display:grid;
  grid-template-columns:240px 1fr;
  background:#fff;
  border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 8px 32px rgba(3,30,80,.10);
  border:1px solid #e2e8f0;
  overflow:hidden;
  min-height:520px;
}

/* === STEP 3 === */
.x2xbk-wrap .x2xbk-s3 {
  background:#fff;
  border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 8px 32px rgba(3,30,80,.10);
  border:1px solid #e2e8f0;
  padding:60px 40px;
  text-align:center;
}

/* === COL INFO (shared step1+step2) === */
.x2xbk-wrap .x2xbk-col-info {
  display:flex; flex-direction:column;
  padding:32px 22px;
  border-right:1px solid #e2e8f0;
  background:#fff;
}
.x2xbk-wrap .x2xbk-logo-wrap { margin-bottom:16px; }
.x2xbk-wrap .x2xbk-logo-wrap img { height:100px; max-width:300px; width:auto; display:block; object-fit:contain; }
.x2xbk-wrap .x2xbk-hr { height:1px; background:#e2e8f0; margin:0 0 14px; border:none; }
.x2xbk-wrap .x2xbk-title { font-size:20px; font-weight:800; color:#031E50; margin:0 0 14px; line-height:1.25; }
.x2xbk-wrap .x2xbk-meta { list-style:none; padding:0; margin:0 0 12px; }
.x2xbk-wrap .x2xbk-meta li { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#64748b; margin-bottom:8px; line-height:1.45; }
.x2xbk-wrap .x2xbk-meta li svg { flex-shrink:0; margin-top:1px; }
.x2xbk-wrap .x2xbk-desc { font-size:11.5px; color:#64748b; line-height:1.6; margin:0 0 16px; padding:10px 12px; background:#f8fafc; border-left:3px solid #E67E22; border-radius:0 6px 6px 0; }
.x2xbk-wrap .x2xbk-chips { margin-top:auto; display:flex; flex-direction:column; gap:7px; }
.x2xbk-wrap .x2xbk-chip { display:none; align-items:flex-start; gap:8px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:8px 11px; font-size:11px; color:#031E50; line-height:1.4; }
.x2xbk-wrap .x2xbk-chip svg { flex-shrink:0; margin-top:2px; }

/* === COL CALENDAR === */
.x2xbk-wrap .x2xbk-col-cal { padding:32px 26px; border-right:1px solid #e2e8f0; background:#fff; }
.x2xbk-wrap .x2xbk-cal-title { font-size:16px; font-weight:800; color:#031E50; margin:0 0 16px; }
.x2xbk-wrap .x2xbk-tz-row { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:12px; color:#64748b; }
.x2xbk-wrap .x2xbk-tz-sel { border:none; outline:none; font-size:12px; color:#2563eb; font-weight:600; background:transparent; cursor:pointer; appearance:none; -webkit-appearance:none; padding:0 14px 0 0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%232563eb'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center; font-family:inherit; box-shadow:none; }
.x2xbk-wrap .x2xbk-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.x2xbk-wrap .x2xbk-cal-nav span { font-size:15px; font-weight:700; color:#031E50; flex:1; text-align:center; }
.x2xbk-wrap .x2xbk-prev,.x2xbk-wrap .x2xbk-next { width:30px; height:30px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; color:#031E50; padding:0; margin:0; flex-shrink:0; transition:all .15s; }
.x2xbk-wrap .x2xbk-prev:hover,.x2xbk-wrap .x2xbk-next:hover { background:#f8fafc; border-color:#94a3b8; }
.x2xbk-wrap .x2xbk-cal-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.x2xbk-wrap .x2xbk-cal-dow span { display:block; text-align:center; }
.x2xbk-wrap .x2xbk-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.x2xbk-wrap .x2xbk-xd { aspect-ratio:1/1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:all .14s; position:relative; color:#1e293b; background:transparent; border:none; padding:0; margin:0; }
.x2xbk-wrap .x2xbk-xav { color:#2563eb; font-weight:600; }
.x2xbk-wrap .x2xbk-xav:hover { background:rgba(37,99,235,.1); }
.x2xbk-wrap .x2xbk-xsel { background:#031E50; color:#fff; font-weight:700; }
.x2xbk-wrap .x2xbk-xt::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:#E67E22; }
.x2xbk-wrap .x2xbk-xsel.x2xbk-xt::after { background:rgba(255,255,255,.6); }
.x2xbk-wrap .x2xbk-xdis { color:#d1d5db; cursor:default; }
.x2xbk-wrap .x2xbk-xe { cursor:default; }

/* === COL SLOTS === */
.x2xbk-wrap .x2xbk-col-slots { padding:28px 14px; overflow-y:auto; max-height:560px; background:#fff; }
.x2xbk-wrap .x2xbk-slots-date { font-size:13px; font-weight:700; color:#031E50; margin-bottom:12px; }
.x2xbk-wrap .x2xbk-slots-hint { font-size:12px; color:#64748b; text-align:center; padding-top:28px; line-height:1.6; }
.x2xbk-wrap .x2xbk-slots-list { display:flex; flex-direction:column; gap:7px; }
.x2xbk-wrap .x2xbk-slw { position:relative; }
.x2xbk-wrap .x2xbk-slb { display:block; width:100%; padding:11px 10px; border:1.5px solid #2563eb; border-radius:8px; background:#fff; color:#2563eb; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; text-align:center; transition:background .15s; }
.x2xbk-wrap .x2xbk-slb:hover:not(.x2xbk-xbk) { background:#eff6ff; }
.x2xbk-wrap .x2xbk-xbk { border-color:#e2e8f0; color:#94a3b8; text-decoration:line-through; cursor:not-allowed; background:#f8fafc; font-size:12px; }
.x2xbk-wrap .x2xbk-sle { display:none; grid-template-columns:1fr auto; gap:6px; align-items:center; }
.x2xbk-wrap .x2xbk-slbadge { padding:0 10px; border:1.5px solid #1e293b; border-radius:8px; background:#1e293b; color:#fff; font-size:13px; font-weight:700; height:42px; display:flex; align-items:center; justify-content:center; }
.x2xbk-wrap .x2xbk-slnxt { padding:10px 14px; background:#2563eb; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; height:42px; display:flex; align-items:center; white-space:nowrap; transition:background .15s; }
.x2xbk-wrap .x2xbk-slnxt:hover { background:#1d4ed8; }
.x2xbk-wrap .x2xbk-xsk { height:42px; border-radius:8px; background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size:200% 100%; animation:x2xbk-xsk 1.4s ease infinite; }
@keyframes x2xbk-xsk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* === COL FORM (step2) === */
.x2xbk-wrap .x2xbk-col-form { padding:36px; background:#fff; }
.x2xbk-wrap .x2xbk-col-form h3 { font-size:20px; font-weight:800; color:#031E50; margin:0 0 4px; }
.x2xbk-wrap .x2xbk-sub { font-size:13px; color:#64748b; margin:0 0 22px; }
.x2xbk-wrap .x2xbk-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.x2xbk-wrap .x2xbk-fg { display:flex; flex-direction:column; gap:5px; }
.x2xbk-wrap .x2xbk-full { grid-column:1/-1; }
.x2xbk-wrap .x2xbk-fg label { font-size:12px; font-weight:700; color:#031E50; display:block; }
.x2xbk-wrap .x2xbk-fg input,.x2xbk-wrap .x2xbk-fg select,.x2xbk-wrap .x2xbk-fg textarea { border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 13px; font-size:14px; outline:none; font-family:inherit; color:#1e293b; background:#fff; width:100%; transition:border-color .15s,box-shadow .15s; box-shadow:none; margin:0; }
.x2xbk-wrap .x2xbk-fg input:focus,.x2xbk-wrap .x2xbk-fg select:focus,.x2xbk-wrap .x2xbk-fg textarea:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.x2xbk-wrap .x2xbk-fg textarea { resize:vertical; min-height:80px; }
.x2xbk-wrap .x2xbk-err { background:#fef2f2; border:1px solid #fca5a5; border-radius:8px; padding:10px 14px; font-size:13px; color:#b91c1c; margin-top:10px; }
.x2xbk-wrap .x2xbk-terms { font-size:11px; color:#64748b; margin:14px 0 18px; line-height:1.5; }
.x2xbk-wrap .x2xbk-confirm { display:inline-flex; align-items:center; gap:8px; background:#E67E22; color:#fff; border:none; border-radius:100px; padding:14px 36px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 16px rgba(230,126,34,.35); transition:all .2s; }
.x2xbk-wrap .x2xbk-confirm:hover:not(:disabled) { background:#c0390e; transform:translateY(-1px); }
.x2xbk-wrap .x2xbk-confirm:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.x2xbk-wrap .x2xbk-back { display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:#64748b; cursor:pointer; font-size:13px; font-family:inherit; padding:0; margin:0 0 18px; transition:color .15s; box-shadow:none; }
.x2xbk-wrap .x2xbk-back:hover { color:#031E50; }

/* === STEP 3 === */
.x2xbk-wrap .x2xbk-check { width:70px; height:70px; border-radius:50%; background:linear-gradient(135deg,#10b981,#059669); display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; margin:0 auto 24px; box-shadow:0 8px 28px rgba(16,185,129,.35); animation:xpop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes xpop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.x2xbk-wrap .x2xbk-s3 .x2xbk-logo-wrap img { max-height:80px; max-width:240px; display:block; margin:0 auto; }
.x2xbk-wrap .x2xbk-s3 h2 { font-size:26px; font-weight:800; color:#031E50; margin:0 0 8px; }
.x2xbk-wrap .x2xbk-suc-sub { font-size:14px; color:#64748b; margin:0 auto 26px; line-height:1.65; max-width:400px; }
.x2xbk-wrap .x2xbk-bk-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:18px 22px; max-width:400px; margin:0 auto 20px; text-align:left; }
.x2xbk-wrap .x2xbk-xbr { display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px solid #e2e8f0; }
.x2xbk-wrap .x2xbk-xbr:last-child { border-bottom:none; }
.x2xbk-wrap .x2xbk-xbi { display:flex; align-items:center; width:20px; flex-shrink:0; color:#64748b; }
.x2xbk-wrap .x2xbk-xbl { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.x2xbk-wrap .x2xbk-xbv { font-size:14px; color:#031E50; font-weight:600; margin-top:1px; }
.x2xbk-wrap .x2xbk-notice { max-width:400px; margin:0 auto 26px; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:14px 16px; font-size:13px; color:#92400e; line-height:1.55; text-align:left; display:flex; align-items:flex-start; gap:10px; }
.x2xbk-wrap .x2xbk-notice svg { flex-shrink:0; margin-top:2px; }
.x2xbk-wrap .x2xbk-again { background:none; border:1.5px solid #e2e8f0; border-radius:100px; padding:11px 28px; font-size:14px; font-weight:600; color:#031E50; cursor:pointer; font-family:inherit; transition:all .18s; }
.x2xbk-wrap .x2xbk-again:hover { border-color:#031E50; background:#f8fafc; }

/* === POPUP === */
.x2xbk-ov { position:fixed; inset:0; background:rgba(15,23,42,.65); z-index:999999; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; backdrop-filter:blur(3px); }
.x2xbk-ov.x2xbk-open { opacity:1; visibility:visible; }
.x2xbk-ob { background:#f8fafc; border-radius:20px; width:100%; max-width:1020px; max-height:90vh; overflow-y:auto; position:relative; padding:24px; transform:scale(.95) translateY(10px); transition:transform .3s cubic-bezier(.34,1.2,.64,1); box-shadow:0 25px 80px rgba(0,0,0,.35); }
.x2xbk-ov.x2xbk-open .x2xbk-ob { transform:scale(1) translateY(0); }
.x2xbk-oi { min-height:200px; }
.x2xbk-oi .x2xbk-wrap { padding:0; }
.x2xbk-oc { position:absolute; top:14px; right:14px; z-index:10; width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid #e2e8f0; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; color:#64748b; transition:all .18s; line-height:1; padding:0; }
.x2xbk-oc:hover { background:#fee2e2; color:#dc2626; border-color:#fca5a5; }
.x2xbk-osp { width:40px; height:40px; border:3px solid #e2e8f0; border-top-color:#E67E22; border-radius:50%; animation:xspin .7s linear infinite; margin:80px auto; }
@keyframes xspin { to{transform:rotate(360deg)} }
.x2xbk-popup-trigger { display:inline-flex; align-items:center; gap:8px; background:#E67E22; color:#fff; border:none; border-radius:100px; padding:14px 32px; font-size:15px; font-weight:700; cursor:pointer; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; box-shadow:0 4px 16px rgba(230,126,34,.35); transition:all .2s; }
.x2xbk-popup-trigger:hover { background:#c0390e; transform:translateY(-2px); }

/* === RESPONSIVE === */
@media(max-width:860px){
  .x2xbk-wrap .x2xbk-s1,.x2xbk-wrap .x2xbk-s2 { grid-template-columns:1fr; }
  .x2xbk-wrap .x2xbk-col-info { border-right:none; border-bottom:1px solid #e2e8f0; padding:24px 20px; }
  .x2xbk-wrap .x2xbk-col-cal { border-right:none; border-bottom:1px solid #e2e8f0; }
  .x2xbk-wrap .x2xbk-col-slots { max-height:none; }
  .x2xbk-wrap .x2xbk-slots-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .x2xbk-wrap .x2xbk-col-form { padding:28px 22px; }
  .x2xbk-wrap .x2xbk-fgrid { grid-template-columns:1fr; }
  .x2xbk-wrap .x2xbk-full { grid-column:auto; }
}
@media(max-width:500px){
  .x2xbk-wrap .x2xbk-slots-list { grid-template-columns:1fr; }
  .x2xbk-wrap .x2xbk-s3 { padding:40px 20px; }
}