/* ============================================================
   VAN LOCATION FEATURE
   ============================================================ */
/* ============================================================
   VAN LOCATION FEATURE — ปรับดีไซน์เฉพาะส่วนนี้
   ============================================================ */
#vanLocationModal {
  background:
    linear-gradient(180deg, rgba(3,8,14,.72), rgba(3,8,14,.90)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=82') center/cover no-repeat;
}

#vanLocationModal .trip-calendar-header {
  padding: 11px 13px;
  border-radius: 19px;
  background: rgba(7,17,29,.76);
  border: 1px solid rgba(125,211,252,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}

.van-loc-title-wrap { display:flex; align-items:center; gap:10px; min-width:0; }
.van-loc-brand-logo {
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid rgba(125,211,252,.55);
  box-shadow:0 0 15px rgba(56,189,248,.20);
}
#vanLocationModal .trip-calendar-close,
#vanLocationModal .van-loc-back {
  background:rgba(7,17,29,.82);
  border:1px solid rgba(148,163,184,.18);
  color:#e2e8f0;
}

#vanLocationModal .van-loc-select,
#vanLocationModal .van-number-btn,
#vanLocationModal .van-driver-form,
#vanLocationModal .van-loc-map-box {
  background:linear-gradient(145deg, rgba(9,22,37,.84), rgba(5,13,23,.78));
  border-color:rgba(125,211,252,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}

#vanLocationModal .van-number-btn {
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#vanLocationModal .van-number-btn:active {
  transform:scale(.97);
  border-color:rgba(56,189,248,.52);
  box-shadow:0 0 18px rgba(56,189,248,.10);
}

.van-number-logo {
  width:25px; height:25px; border-radius:50%; object-fit:cover;
  vertical-align:middle; margin-right:7px;
  border:1px solid rgba(125,211,252,.45);
}

#vanLocationModal .van-form-group input[type="text"],
#vanLocationModal .van-form-group input[type="tel"],
#vanLocationModal .van-photo-drop,
#vanLocationModal .van-chat-input-row input {
  background:rgba(10,23,39,.88);
  border-color:rgba(125,211,252,.14);
}
#vanLocationModal .van-form-group input:focus,
#vanLocationModal .van-chat-input-row input:focus {
  border-color:#38bdf8;
}

#vanLocationModal .van-premium-card {
  background:
    linear-gradient(120deg, rgba(4,12,22,.92), rgba(5,18,31,.62)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=78') center/cover;
  border-color:rgba(125,211,252,.20);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}

#vanLocationModal .van-parking-photos-section {
  background:linear-gradient(180deg, rgba(56,189,248,.055), rgba(3,10,18,.30));
  border-color:rgba(125,211,252,.14);
}

/* แชทคงไฟวิ่งสีฟ้าตามดีไซน์เดิม */
#vanLocationModal .van-chat-section::before {
  background:conic-gradient(from 0deg, transparent 0%, transparent 78%, #bae6fd 87%, #38bdf8 92%, transparent 96%);
}
#vanLocationModal .van-chat-section::after {
  background:linear-gradient(160deg,#0b192a,#07111e);
}
#vanLocationModal .van-chat-msg-bubble { background:#101e31; }
#vanLocationModal .van-chat-msg.own .van-chat-msg-bubble {
  background:linear-gradient(135deg,rgba(2,132,199,.36),rgba(56,189,248,.18));
}
#vanLocationModal .van-chat-send-btn {
  background:linear-gradient(135deg,#0369a1,#38bdf8);
  box-shadow:0 0 15px rgba(56,189,248,.20);
}

/* QR CHECK-IN — ปุ่มสร้าง QR สำหรับแอดมิน + หน้าตา QR ยืนยันตัวตน */
#vanLocationModal .van-checkin-admin-card {
  position: relative;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(56,189,248,.18);
  background: linear-gradient(145deg, rgba(8,18,31,.92), rgba(6,11,19,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
#vanLocationModal .van-checkin-admin-card::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(110deg, transparent 28%, rgba(56,189,248,.08) 48%, transparent 68%);
  transform: translateX(-120%);
  animation: vanCheckinSheen 4.4s ease-in-out infinite;
}
@keyframes vanCheckinSheen {
  0%,60% { transform:translateX(-120%); }
  82%,100% { transform:translateX(120%); }
}
#vanLocationModal .van-checkin-admin-row {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}
#vanLocationModal .van-checkin-admin-icon {
  width:42px;
  height:42px;
  border-radius:13px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  background:rgba(56,189,248,.09);
  border:1px solid rgba(56,189,248,.2);
}
#vanLocationModal .van-checkin-admin-copy { min-width:0; flex:1; }
#vanLocationModal .van-checkin-admin-title {
  font-size:13.5px;
  font-weight:800;
  color:#f8fafc;
}
#vanLocationModal .van-checkin-admin-sub {
  margin-top:2px;
  font-size:10.5px;
  line-height:1.45;
  color:#94a3b8;
}
#vanLocationModal .van-checkin-admin-btn {
  border:0;
  min-height:40px;
  padding:0 13px;
  border-radius:12px;
  flex-shrink:0;
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  color:#eaf8ff;
  background:linear-gradient(135deg, rgba(2,132,199,.86), rgba(56,189,248,.7));
  box-shadow:0 5px 16px rgba(2,132,199,.18);
}
#vanLocationModal .van-checkin-admin-btn:active { transform:scale(.97); }

.tnh-checkin-qr-wrap {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  padding:4px 0 2px;
}
.tnh-checkin-qr-box {
  width:246px;
  height:246px;
  padding:10px;
  border-radius:22px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(56,189,248,.16);
}
.tnh-checkin-qr-box img,
.tnh-checkin-qr-box canvas { border-radius:10px; display:block; }
.tnh-checkin-qr-trip {
  font-size:13px;
  font-weight:800;
  color:#fff;
  text-align:center;
  line-height:1.45;
}
.tnh-checkin-qr-meta {
  font-size:11px;
  color:#94a3b8;
  text-align:center;
  line-height:1.5;
}


/* ป็อปอัปเลือกบทบาท */
.van-role-popup {
  border-radius:24px !important;
  border:1px solid rgba(125,211,252,.20) !important;
  background:
    linear-gradient(145deg,rgba(5,14,25,.94),rgba(3,9,17,.96)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=76') center/cover !important;
  box-shadow:0 22px 60px rgba(0,0,0,.56) !important;
}
.van-role-logo {
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(125,211,252,.55);
  box-shadow:0 0 22px rgba(56,189,248,.18);
  margin:0 auto 15px;
}
.van-role-actions { display:flex; gap:12px; }
.van-role-btn {
  flex:1; min-width:0; padding:19px 10px; border-radius:17px;
  background:linear-gradient(145deg,rgba(12,30,49,.82),rgba(5,14,25,.78));
  border:1px solid rgba(125,211,252,.20);
  color:#fff; cursor:pointer; font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 9px 22px rgba(0,0,0,.18);
  transition:transform .16s ease,border-color .16s ease;
}
.van-role-btn:active { transform:scale(.97); border-color:rgba(56,189,248,.55); }
.van-role-btn .role-ico { display:block; font-size:29px; margin-bottom:7px; }
.van-role-btn .role-label { display:block; font-size:12.5px; font-weight:800; }


/* ===== VAN LOCATION UI REFRESH 6 ก.ย. 69 — เฉพาะหน้าเลือกบทบาท/เลือกทริป/เลือกคัน ===== */
@keyframes vanRoleLogoSway {
  0%,100% { transform:translateY(0) rotate(-5deg) scale(1); }
  25% { transform:translateY(-3px) rotate(4deg) scale(1.025); }
  50% { transform:translateY(-1px) rotate(-3deg) scale(1.015); }
  75% { transform:translateY(-4px) rotate(5deg) scale(1.03); }
}
@keyframes vanRoleCardFloatA {
  0%,100% { transform:translateY(0) rotate(-.35deg); }
  50% { transform:translateY(-4px) rotate(.45deg); }
}
@keyframes vanRoleCardFloatB {
  0%,100% { transform:translateY(-2px) rotate(.35deg); }
  50% { transform:translateY(2px) rotate(-.45deg); }
}
@keyframes vanRoleGlowBreath {
  0%,100% { box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.22),0 0 0 rgba(56,189,248,0); }
  50% { box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px rgba(0,0,0,.28),0 0 20px rgba(56,189,248,.10); }
}
.van-role-logo {
  animation:vanRoleLogoSway 3.1s ease-in-out infinite;
  transform-origin:50% 85%;
  will-change:transform;
}
.van-role-btn { position:relative; overflow:hidden; }
.van-role-btn::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.08) 42%,transparent 68%);
  transform:translateX(-120%); animation:vanRoleShimmer 4.8s ease-in-out infinite;
}
.van-role-btn:nth-child(1) { animation:vanRoleCardFloatA 3.7s ease-in-out infinite,vanRoleGlowBreath 3.7s ease-in-out infinite; }
.van-role-btn:nth-child(2) { animation:vanRoleCardFloatB 4.1s ease-in-out infinite,vanRoleGlowBreath 4.1s ease-in-out infinite; animation-delay:.22s; }
@keyframes vanRoleShimmer { 0%,65%,100%{transform:translateX(-120%)} 78%{transform:translateX(120%)} }
.van-role-btn:active { animation:none; transform:scale(.97); }

/* STEP 2 — จัดหน้าเลือกทริปให้เป็น section ชัดขึ้น */
#vanLocStep2 { padding-top:10px; }
.van-trip-intro {
  position:relative; overflow:hidden; margin:12px 0 13px; padding:17px 16px 15px;
  border-radius:20px; text-align:left;
  background:linear-gradient(135deg,rgba(7,20,35,.93),rgba(8,28,47,.76));
  border:1px solid rgba(125,211,252,.18);
  box-shadow:0 14px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
}
.van-trip-intro::after {
  content:''; position:absolute; width:140px; height:140px; right:-72px; top:-82px;
  border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%); pointer-events:none;
}
.van-trip-intro-kicker { font-size:10px; font-weight:800; letter-spacing:1.5px; color:#7dd3fc; text-transform:uppercase; margin-bottom:4px; }
.van-trip-intro-title { font-size:18px; line-height:1.25; font-weight:900; color:#f8fafc; }
.van-trip-intro-sub { font-size:11.5px; line-height:1.55; color:#94a3b8; margin-top:5px; }
.van-trip-select-card {
  padding:12px; border-radius:18px; background:rgba(4,13,24,.72);
  border:1px solid rgba(125,211,252,.14); box-shadow:0 10px 24px rgba(0,0,0,.20);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.van-trip-select-label { display:flex; align-items:center; gap:8px; margin:0 2px 9px; font-size:11px; font-weight:800; color:#cbd5e1; }
.van-trip-select-label .van-trip-select-dot { width:8px; height:8px; border-radius:50%; background:#38bdf8; box-shadow:0 0 12px rgba(56,189,248,.75); flex:0 0 auto; }
#vanLocationModal .van-loc-select {
  min-height:50px; padding:0 42px 0 14px; border-radius:15px;
  background-color:rgba(8,23,39,.94); color:#f8fafc; font-weight:700;
  border:1px solid rgba(125,211,252,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.van-choices-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:19px 2px 10px; }
.van-choices-heading strong { font-size:13px; color:#f8fafc; }
.van-choices-heading span { font-size:10.5px; color:#7dd3fc; }

/* STEP 2 — การ์ดเลือกคัน: รถตู้หน้ายาว + ไฟวิ่งรอบกรอบแบบกล่องแชท */
#vanLocationModal .van-number-choice-row {
  display:grid; grid-template-columns:1fr; gap:12px; width:100%;
}
#vanLocationModal .van-number-btn {
  --van-photo:url('https://i.ibb.co/bMtbZTCf/COMMUTER-Cover-2.jpg');
  position:relative; min-height:126px; width:100%; padding:0; border:0; border-radius:20px;
  overflow:hidden; isolation:isolate; text-align:left; color:#fff; cursor:pointer;
  background:#06101c; box-shadow:0 13px 30px rgba(0,0,0,.32); transform:none;
}
#vanLocationModal .van-number-btn::before {
  content:''; position:absolute; z-index:-2; top:50%; left:50%; width:220%; height:360%;
  background:conic-gradient(from 0deg,transparent 0%,transparent 75%,#bae6fd 84%,#38bdf8 89%,#2563eb 92%,transparent 97%);
  animation:vanChatBorderSpin 3.5s linear infinite;
}
#vanLocationModal .van-number-btn::after {
  content:''; position:absolute; z-index:-1; inset:2px; border-radius:18px;
  background:
    linear-gradient(90deg,rgba(3,10,18,.94) 0%,rgba(3,10,18,.78) 43%,rgba(3,10,18,.16) 74%,rgba(3,10,18,.28) 100%),
    linear-gradient(0deg,rgba(3,10,18,.76),transparent 55%),
    var(--van-photo) 66% 52%/cover no-repeat;
}
#vanLocationModal .van-number-btn:nth-child(2)::before { animation-delay:-1.1s; }
#vanLocationModal .van-number-btn:nth-child(3)::before { animation-delay:-2.2s; }
#vanLocationModal .van-number-btn:active { transform:scale(.985); }
#vanLocationModal .van-number-btn:hover { box-shadow:0 15px 36px rgba(0,0,0,.36),0 0 22px rgba(56,189,248,.10); }
.van-number-card-content {
  min-height:126px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:18px 16px 15px; position:relative; z-index:1;
}
.van-number-index {
  display:inline-flex; align-items:center; gap:7px; padding:5px 9px; margin-bottom:auto;
  border-radius:999px; background:rgba(2,8,16,.62); border:1px solid rgba(186,230,253,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:9.5px; font-weight:800; color:#bae6fd;
}
.van-number-index-dot { width:6px; height:6px; border-radius:50%; background:#22d3ee; box-shadow:0 0 10px #22d3ee; }
.van-number-title { font-size:20px; font-weight:900; line-height:1; text-shadow:0 2px 9px rgba(0,0,0,.7); }
.van-number-meta { display:flex; align-items:center; gap:7px; margin-top:7px; font-size:10.5px; font-weight:700; color:#cbd5e1; }
.van-number-arrow {
  position:absolute; right:14px; bottom:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#e0f2fe;
  background:rgba(2,132,199,.30); border:1px solid rgba(125,211,252,.42); box-shadow:0 0 16px rgba(56,189,248,.16);
}
.van-number-photo-credit { margin:10px 2px 2px; font-size:8.5px; line-height:1.4; color:rgba(148,163,184,.58); text-align:center; }

@media (min-width:700px) {
  #vanLocationModal .van-number-choice-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #vanLocationModal .van-number-btn { min-height:170px; }
  .van-number-card-content { min-height:170px; }
}

.van-loc-back { background: var(--bg2); border: 1px solid var(--border); color: #94a3b8; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.van-loc-select { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; color: #fff; font-size: 13.5px; font-family: inherit; }
.van-number-choice-row { display: flex; gap: 10px; }
.van-number-btn {
  flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 8px;
  color: #f1f5f9; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.van-number-btn:active { transform: scale(.95); background: var(--bg3); }

.van-loc-map-box { width: 100%; height: 220px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); padding: 20px; text-align: center; }
.van-loc-map-iframe { width: 100%; height: 240px; border: 0; border-radius: 16px; display: block; }

.van-chat-section {
  position: relative; margin-top: 18px; border-radius: 18px; padding: 14px;
  overflow: hidden; isolation: isolate;
}
.van-chat-section::before {
  content: ''; position: absolute; z-index: -2;
  top: 50%; left: 50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 78%, #7dd3fc 88%, #38bdf8 92%, transparent 96%);
  animation: vanChatBorderSpin 3.5s linear infinite;
}
@keyframes vanChatBorderSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.van-chat-section::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: 16px;
  background: linear-gradient(160deg, #0e1b2c, #0c1524);
}

.van-chat-header { font-size: 12.5px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.van-chat-messages { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding-right: 2px; }
.van-chat-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 85%; }
.van-chat-msg.own { flex-direction: row-reverse; max-width: 85%; margin-left: auto; }
.van-chat-msg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--blue2), var(--blue)); }
.van-chat-msg-bubble { background: var(--bg3); border-radius: 12px; padding: 8px 12px; flex: 1; min-width: 0; }
.van-chat-msg.own .van-chat-msg-bubble { background: linear-gradient(135deg, rgba(2,132,199,.35), rgba(56,189,248,.2)); }
.van-chat-msg.own .van-chat-msg-sender, .van-chat-msg.own .van-chat-msg-text { text-align: right; }
.van-chat-msg-sender { font-size: 11px; font-weight: 700; color: #7dd3fc; margin-bottom: 2px; }
.van-chat-msg-text { font-size: 13px; color: #f1f5f9; line-height: 1.5; overflow-wrap: anywhere; }
.van-chat-input-row { display: flex; gap: 8px; }
.van-chat-input-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 10px 14px; color: #fff; font-size: 13px; font-family: inherit; }
.van-chat-input-row input:focus { outline: none; border-color: var(--blue); }
.van-chat-send-btn { background: linear-gradient(135deg, var(--blue2), var(--blue)); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }

.van-driver-form { background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 16px; margin-bottom: 14px; text-align: left; }
.van-form-group { margin-bottom: 14px; }
.van-form-group:last-child { margin-bottom: 0; }
.van-form-group label { display: block; font-size: 12px; font-weight: 700; color: #94a3b8; margin-bottom: 6px; }
.van-form-group input[type="text"], .van-form-group input[type="tel"] { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; color: #fff; font-size: 13.5px; font-family: inherit; }
.van-form-group input:focus { outline: none; border-color: var(--blue); }
.van-photo-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg3); border: 1.5px dashed var(--border); border-radius: 14px; padding: 18px; cursor: pointer; text-align: center; }
.van-photo-drop:active { transform: scale(.98); }
.van-photo-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.van-photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.van-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.van-photo-thumb button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: none; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.van-parking-photos-view { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 10px 0; padding: 0 6% 6px; justify-content: center; -ms-overflow-style: none; scrollbar-width: none; }
.van-parking-photos-view::-webkit-scrollbar { display: none; }
.van-parking-photos-view img { width: 88%; max-width: 340px; height: 220px; border-radius: 18px; object-fit: cover; flex-shrink: 0; cursor: pointer; scroll-snap-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.35); }

/* การ์ดข้อมูลคนขับ + กล่องรูปจุดจอดรถ ในโหมดผู้โดยสาร — ดีไซน์หรูหรา ใช้รูปป่าจากเนตเป็นพื้นหลังแทนกล่องสีทึบธรรมดา */
.van-premium-card {
  position: relative; border-radius: 20px; overflow: hidden; padding: 16px 18px; margin-bottom: 14px; text-align: left;
  background:
    linear-gradient(115deg, rgba(6,14,10,.88) 20%, rgba(6,14,10,.55) 100%),
    url('https://images.unsplash.com/photo-1760772481955-dcb947cb2d3f?fm=jpg&q=60&w=700&auto=format&fit=crop') center/cover;
  border: 1px solid rgba(52,232,158,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.van-premium-card.blue-theme { border-color: rgba(56,189,248,.25); }
.van-parking-photos-section {
  border-radius: 20px; padding: 16px 0 18px; margin-top: 14px;
  background: linear-gradient(180deg, rgba(52,232,158,.07), transparent 60%);
  border: 1px solid rgba(52,232,158,.15);
}
.van-parking-photos-title { font-size: 12.5px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 10px; }

.calendar-entry-card {
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  min-height: 140px; margin-top: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.calendar-entry-card:active { transform: scale(.98); }
.calendar-entry-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.calendar-entry-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(6,11,19,.88) 30%, rgba(6,11,19,.45) 100%);
}
.calendar-entry-overlay { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 140px; padding: 16px 18px; }
.calendar-entry-icon { font-size: 30px; flex-shrink: 0; }
.calendar-entry-text { flex: 1; min-width: 0; }
.calendar-entry-title { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.calendar-entry-sub { font-size: 12px; color: #cbd5e1; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.calendar-entry-arrow { font-size: 22px; color: #fff; font-weight: 900; flex-shrink: 0; }

.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip-blue { background: rgba(56, 189, 248, .12); color: var(--blue); }
.chip-green { background: rgba(16, 185, 129, .12); color: var(--green); }
.chip-yellow { background: rgba(245, 158, 11, .12); color: var(--yellow); }


/* ============================================================
   QR CHECK-IN POPUPS — VISUAL ONLY
   รูปแบบเดียวกับ popup บันทึกจุดขึ้นรถ
   ไม่แตะ flow / fetch / token / confirm logic
   ============================================================ */
.checkin-save-swal-container{
  padding:16px !important;
  z-index:40000 !important;
}
.checkin-save-swal{
  width:min(88vw,360px) !important;
  padding:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(56,189,248,.16) !important;
  background:
    linear-gradient(180deg,rgba(3,12,18,.82),rgba(2,10,15,.95)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=76') center/cover no-repeat !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  color:#f1f5f9 !important;
}
.checkin-save-swal-html{
  margin:0 !important;
  padding:0 !important;
}
.checkin-save-state{
  padding:28px 22px 24px;
  text-align:center;
}
.checkin-save-state small{
  display:block;
  color:#7f98aa;
  font-size:9px;
  font-weight:750;
  letter-spacing:.2px;
}
.checkin-save-state h3{
  margin:5px 0 0;
  color:#f7fbff;
  font-size:19px;
  line-height:1.3;
  font-weight:850;
}
.checkin-save-state>p{
  margin:8px auto 0;
  max-width:250px;
  color:#8197a8;
  font-size:10px;
  line-height:1.6;
}

/* loading orbit */
.checkin-save-orbit{
  width:126px;
  height:126px;
  margin:0 auto 18px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.checkin-save-orbit::before,
.checkin-save-orbit::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.checkin-save-orbit::before{
  width:118px;
  height:118px;
  border:1px solid rgba(56,189,248,.18);
  box-shadow:0 0 24px rgba(56,189,248,.07);
}
.checkin-save-orbit::after{
  width:88px;
  height:88px;
  border:1px dashed rgba(125,211,252,.20);
}
.checkin-save-core{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(16,42,58,.94),rgba(6,21,31,.96));
  border:1px solid rgba(125,211,252,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 24px rgba(56,189,248,.08);
  font-size:30px;
  z-index:5;
  animation:checkinCorePulse 1.4s ease-in-out infinite;
}
.checkin-orbit-dot{
  position:absolute;
  display:block;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 10px rgba(125,211,252,.95),0 0 18px rgba(56,189,248,.42);
  z-index:4;
}
.checkin-orbit-dot.dot-a{
  width:11px;height:11px;left:3px;top:55px;
  animation:checkinOrbitA 2.65s linear infinite;
  transform-origin:60px 8px;
}
.checkin-orbit-dot.dot-b{
  width:7px;height:7px;right:13px;top:12px;opacity:.75;
  animation:checkinOrbitB 2.2s linear infinite reverse;
  transform-origin:-47px 50px;
}
.checkin-orbit-dot.dot-c{
  width:6px;height:6px;right:5px;top:58px;opacity:.9;
  animation:checkinOrbitC 1.85s linear infinite;
  transform-origin:-55px 5px;
}
.checkin-save-progress{
  width:126px;height:3px;
  margin:18px auto 0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.10);
}
.checkin-save-progress i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(56,189,248,.08),#38bdf8,rgba(125,211,252,.18));
  animation:checkinProgressMove 1.05s ease-in-out infinite;
}

/* success */
.checkin-success-burst{
  width:132px;
  height:132px;
  margin:0 auto 18px;
  position:relative;
  display:grid;
  place-items:center;
}
.checkin-success-ring{
  width:88px;
  height:88px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(16,185,129,.08);
  border:2px solid rgba(110,231,183,.34);
  box-shadow:0 0 28px rgba(16,185,129,.12);
  animation:checkinSuccessPop .55s cubic-bezier(.18,.85,.25,1) both;
}
.checkin-success-check{
  color:#86efac;
  font-size:48px;
  font-weight:500;
  line-height:1;
}
.checkin-success-burst .burst{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:#6ee7b7;
  box-shadow:0 0 12px rgba(110,231,183,.75);
  animation:checkinBurst 1.45s ease-in-out infinite;
}
.checkin-success-burst .b1{top:8px;left:62px;animation-delay:.0s}
.checkin-success-burst .b2{right:14px;top:42px;animation-delay:.18s}
.checkin-success-burst .b3{bottom:11px;left:48px;animation-delay:.34s}
.checkin-success-burst .b4{left:14px;top:46px;animation-delay:.5s}

.checkin-success-name{
  margin-top:14px;
  color:#fff;
  font-size:17px;
  font-weight:850;
}
.checkin-success-trip{
  margin:12px auto 0;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(2,12,20,.40);
  border:1px solid rgba(148,163,184,.07);
}
.checkin-success-trip strong{
  display:block;
  color:#dcebf4;
  font-size:10px;
  font-weight:800;
}
.checkin-success-trip span{
  display:block;
  margin-top:5px;
  color:#8aa1b1;
  font-size:9px;
}
.checkin-success-status{
  margin-top:12px;
  color:#6ee7b7;
  font-size:10px;
  font-weight:850;
}
.checkin-save-swal .swal2-actions{
  margin:0 !important;
  padding:0 22px 24px !important;
  width:100% !important;
}
.checkin-success-confirm{
  width:100% !important;
  min-height:44px !important;
  margin:0 !important;
  border-radius:13px !important;
  border:1px solid rgba(52,211,153,.20) !important;
  background:linear-gradient(180deg,rgba(16,185,129,.90),rgba(5,150,105,.94)) !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:11px !important;
  box-shadow:0 10px 24px rgba(16,185,129,.14) !important;
}

/* failed / warning — ใช้ภาษาภาพเดียวกับ loading และ success */
.checkin-failure-visual{
  width:132px;
  height:132px;
  margin:0 auto 18px;
  position:relative;
  display:grid;
  place-items:center;
}
.checkin-failure-visual::before{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid rgba(251,146,60,.13);
  box-shadow:0 0 28px rgba(249,115,22,.08);
}
.checkin-failure-ring{
  width:88px;
  height:88px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(124,45,18,.28),rgba(67,20,7,.15));
  border:2px solid rgba(251,146,60,.48);
  box-shadow:0 0 30px rgba(249,115,22,.12),inset 0 0 18px rgba(251,146,60,.05);
  animation:checkinFailurePop .5s cubic-bezier(.18,.85,.25,1) both;
}
.checkin-failure-mark{
  color:#fdba74;
  font-size:51px;
  font-weight:500;
  line-height:1;
  transform:translateY(-1px);
}
.checkin-failure-pulse{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fb923c;
  box-shadow:0 0 12px rgba(251,146,60,.72);
  animation:checkinFailureDot 1.6s ease-in-out infinite;
}
.checkin-failure-pulse.pulse-a{left:15px;top:55px}
.checkin-failure-pulse.pulse-b{right:17px;top:30px;animation-delay:.42s}
.checkin-save-failure small{color:#c8885d}
.checkin-failure-note{
  margin:14px auto 0;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(251,146,60,.09);
  background:rgba(80,30,10,.12);
  color:#a98772;
  font-size:8.5px;
  line-height:1.5;
}
.checkin-failure-confirm{
  width:100% !important;
  min-height:44px !important;
  margin:0 !important;
  border-radius:13px !important;
  border:1px solid rgba(251,146,60,.20) !important;
  background:linear-gradient(180deg,#f59e0b,#ea580c) !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:11px !important;
  box-shadow:0 10px 24px rgba(234,88,12,.15) !important;
}

@keyframes checkinCorePulse{
  0%,100%{transform:scale(.96)}
  50%{transform:scale(1.06)}
}
@keyframes checkinOrbitA{to{transform:rotate(360deg)}}
@keyframes checkinOrbitB{to{transform:rotate(360deg)}}
@keyframes checkinOrbitC{to{transform:rotate(360deg)}}
@keyframes checkinProgressMove{
  0%{transform:translateX(-150%)}
  100%{transform:translateX(280%)}
}
@keyframes checkinSuccessPop{
  0%{opacity:0;transform:scale(.72)}
  65%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes checkinFailurePop{
  0%{opacity:0;transform:scale(.74) rotate(-8deg)}
  70%{opacity:1;transform:scale(1.06) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes checkinFailureDot{
  0%,100%{opacity:.22;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.35)}
}
@keyframes checkinBurst{
  0%,100%{opacity:.18;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.35)}
}