/* ============================================================
   MY TRIPS TAB
   ============================================================ */
.my-profile {
  position: relative;
  background:
    linear-gradient(180deg, rgba(3, 12, 18, .84), rgba(2, 10, 15, .92)),
    var(--tnh-forest-photo, url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=72')) center/cover no-repeat;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.my-profile-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(125, 211, 252, .25);
  border-radius: 10px;
  background: rgba(5, 16, 26, .62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #a5e4ff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.my-profile-edit-btn:active { transform: scale(.96); }
.my-profile-edit-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 14px;
  overflow: hidden;
  text-align: left;
}
.my-profile-edit-label {
  display: block;
  margin: 11px 2px 6px;
  color: #b8c7d2;
  font-size: 10px;
  font-weight: 800;
}
.my-profile-edit-control {
  box-sizing: border-box!important;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 12px;
  outline: none;
  background: rgba(3,12,20,.76);
  color: #f1f5f9;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.my-profile-edit-control:focus {
  border-color: rgba(56,189,248,.58);
  box-shadow: 0 0 0 3px rgba(56,189,248,.09);
}
.my-profile-edit-control.is-locked { color: #8293a6; opacity: .82; }
.my-profile-edit-help {
  margin: 8px 2px 0;
  color: #7f91a3;
  font-size: 9px;
  line-height: 1.55;
}
.my-profile-edit-help.is-safe { color: #6ee7b7; }
.my-profile-edit-section {
  margin: 2px 0 8px;
  padding: 9px 11px;
  border: 1px solid rgba(56,189,248,.15);
  border-radius: 11px;
  background: rgba(14,165,233,.07);
  color: #b8eaff;
  font-size: 10px;
  font-weight: 850;
}
.my-profile-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.my-profile-edit-grid > div { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.my-profile-edit-grid .my-profile-edit-control { min-width: 0; max-width: 100%; }
.my-profile-edit-control[type="date"] {
  width: 100%!important;
  min-width: 0!important;
  max-width: 100%!important;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 12px!important;
  color-scheme: dark;
}
.my-profile-birth-grid > div:last-child .my-profile-edit-control {
  min-height: 40px;
  background: rgba(14, 31, 43, .82);
  color: #9fb2c1;
}
.my-profile-edit-privacy {
  margin: 12px 2px 0;
  padding: 9px 10px;
  border-left: 3px solid rgba(45,212,191,.55);
  border-radius: 0 9px 9px 0;
  background: rgba(13,148,136,.07);
  color: #92a9b7;
  font-size: 9px;
  line-height: 1.55;
}
.my-insurance-trip-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.my-insurance-trip-summary strong { color: #e8f7ff; font-size: 12px; }
.my-insurance-trip-summary span { color: #86a5b7; font-size: 9px; }
.my-insurance-trip-list { display: grid; gap: 9px; margin-top: 12px; }
.my-insurance-picker-html { margin-left: 0!important; margin-right: 0!important; }
.my-insurance-picker-popup .my-insurance-trip-list {
  max-height: 52vh;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.swal2-popup.my-insurance-picker-popup button.my-insurance-trip-choice {
  width: 100%;
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(9,28,41,.94),rgba(4,13,22,.96))!important;
  color: #f1f5f9!important;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.my-insurance-autofill-note {
  margin: 8px 0 3px;
  padding: 9px 11px;
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 11px;
  background: rgba(120,70,8,.09);
  color: #aab8c5;
  font-size: 9px;
  line-height: 1.55;
  text-align: left;
}
.my-insurance-autofill-note.is-ready {
  border-color: rgba(16,185,129,.2);
  background: rgba(16,185,129,.07);
  color: #83d7b8;
}
.my-insurance-trip-choice span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.my-insurance-trip-choice strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.my-insurance-trip-choice small { color: #8196a8; font-size: 8.5px; }
.my-insurance-trip-choice b { color: #38bdf8; font-size: 20px; }
.trip-insurance-card-badge {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 4;
  display: inline-flex;
  width: auto;
  max-width: 120px;
  min-height: 35px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 6px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(135deg,rgba(2,12,17,.24),rgba(3,20,25,.16));
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  color: #fff;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 5px 16px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10);
  cursor: pointer;
}
.trip-insurance-card-badge.is-saved {
  border-color: rgba(110,231,183,.42);
  background: linear-gradient(135deg,rgba(3,31,28,.28),rgba(2,18,22,.16));
}
.trip-insurance-card-badge.is-pending {
  border-color: rgba(251,191,36,.38);
  background: linear-gradient(135deg,rgba(45,29,4,.26),rgba(10,17,20,.15));
}
.trip-insurance-card-badge.is-loading {
  pointer-events: none;
  border-color: rgba(56,189,248,.30);
  background: linear-gradient(135deg,rgba(3,25,38,.28),rgba(2,18,22,.16));
}
.trip-insurance-card-badge.is-error {
  border-color: rgba(148,163,184,.34);
  background: linear-gradient(135deg,rgba(20,29,39,.30),rgba(2,18,22,.16));
}
.trip-insurance-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: rgba(245,158,11,.88);
  color: #fbbf24;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 13px rgba(245,158,11,.24);
}
.trip-insurance-card-badge.is-pending .trip-insurance-card-icon { color: #fff7dd; }
.trip-insurance-card-badge.is-saved .trip-insurance-card-icon {
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 13px rgba(16,185,129,.30);
}
.trip-insurance-card-badge.is-loading .trip-insurance-card-icon {
  background: rgba(14,165,233,.18);
  box-shadow: 0 0 12px rgba(56,189,248,.22);
}
.trip-insurance-card-badge.is-error .trip-insurance-card-icon {
  background: rgba(100,116,139,.42);
  color: #dbeafe;
  box-shadow: none;
}
.trip-insurance-mini-spinner {
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(224,242,254,.28);
  border-top-color: #7dd3fc;
  border-radius: 50%;
  animation: tripInsuranceMiniSpin .72s linear infinite;
}
@keyframes tripInsuranceMiniSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .trip-insurance-mini-spinner { animation-duration: 1.5s; }
}
.trip-insurance-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.trip-insurance-card-copy small {
  overflow: hidden;
  color: #fff;
  font-size: 7px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.trip-insurance-card-copy strong {
  color: #fff;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ป๊อปอัพโหลดข้อมูลประกัน — โลโก้วงกลมหายใจเบา ๆ + จุดแสงโคจร */
.trip-insurance-load-container {
  position: fixed;
  inset: 0;
  z-index: 40000 !important;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 16px !important;
  place-items: center;
  background: rgba(1,7,13,.70) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  overscroll-behavior: contain;
  touch-action: none;
}
.trip-insurance-load-swal {
  width: min(88vw,360px) !important;
  max-height: calc(100dvh - 32px);
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(56,189,248,.20) !important;
  background:
    linear-gradient(180deg,rgba(3,12,18,.84),rgba(2,10,15,.96)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=72') center/cover no-repeat !important;
  color: #f1f5f9 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-family: inherit !important;
  animation: tripInsurancePopupIn .22s ease-out both;
}
.trip-insurance-load-html { margin: 0 !important; padding: 0 !important; }
.trip-insurance-load-shell { padding: 23px 18px 24px; text-align: center; }
.trip-insurance-load-visual {
  position: relative;
  display: grid;
  width: 126px;
  height: 126px;
  margin: 0 auto 12px;
  place-items: center;
}
.trip-insurance-load-glow {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(56,189,248,.10);
  box-shadow: 0 0 30px rgba(56,189,248,.20);
  animation: tripInsuranceLoadGlow 1.8s ease-in-out infinite;
}
.trip-insurance-load-logo {
  position: relative;
  z-index: 3;
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid rgba(224,242,254,.70);
  border-radius: 50%;
  background: #0b2430;
  box-shadow: 0 10px 28px rgba(0,0,0,.34),0 0 22px rgba(56,189,248,.24);
  animation: tripInsuranceLogoBreathe 1.75s ease-in-out infinite;
  transform-origin: center;
}
.trip-insurance-load-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.trip-insurance-load-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
}
.trip-insurance-load-orbit.orbit-a {
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  animation: tripInsuranceOrbit 2.8s linear infinite;
}
.trip-insurance-load-orbit.orbit-b {
  width: 94px;
  height: 94px;
  margin: -47px 0 0 -47px;
  animation: tripInsuranceOrbit 2.15s linear infinite reverse;
}
.trip-insurance-load-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 8px rgba(125,211,252,.98),0 0 18px rgba(56,189,248,.55);
}
.trip-insurance-load-dot.dot-a { left: 0; top: 51px; width: 10px; height: 10px; }
.trip-insurance-load-dot.dot-b { right: 14px; top: 9px; width: 6px; height: 6px; opacity: .76; }
.trip-insurance-load-dot.dot-c { right: 0; top: 40px; width: 7px; height: 7px; }
.trip-insurance-load-shell h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
.trip-insurance-load-shell p {
  margin: 6px 0 0;
  color: #a9bac7;
  font-size: 12px;
  line-height: 1.6;
}
.trip-insurance-load-track {
  display: block;
  width: 108px;
  height: 3px;
  margin: 16px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.13);
}
.trip-insurance-load-track i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,rgba(56,189,248,.10),#38bdf8,rgba(125,211,252,.12));
  animation: tripInsuranceLoadTrack 1.08s ease-in-out infinite;
}
@keyframes tripInsuranceOrbit { to { transform: rotate(360deg); } }
@keyframes tripInsuranceLogoBreathe {
  0%,100% { transform: scale(.97); }
  50% { transform: scale(1.035); }
}
@keyframes tripInsuranceLoadGlow {
  0%,100% { opacity: .52; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes tripInsuranceLoadTrack {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(70%); }
  100% { transform: translateX(240%); }
}
@keyframes tripInsurancePopupIn {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .trip-insurance-load-orbit,
  .trip-insurance-load-logo,
  .trip-insurance-load-glow,
  .trip-insurance-load-track i { animation-duration: 3.6s; }
  .trip-insurance-load-swal { animation: none; }
}
.my-ava-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.my-ava {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(56, 189, 248, .35);
}
.my-ava-hint { font-size: 9px; color: var(--blue); text-align: center; line-height: 1.3; max-width: 76px; }
.my-info h3 { font-size: 17px; font-weight: 700; color: #fff; }
.my-info p { font-size: 12px; color: #e2e8f0; margin-top: 3px; }
.my-stats { display: flex; align-items: flex-start; gap: 18px; margin-top: 10px; }
.my-stat h4 { font-size: 20px; font-weight: 800; color: var(--blue); height: 26px; line-height: 26px; position: relative; }
.rank-stars-plain { line-height: 26px; font-size: 15px; letter-spacing: -1px; }
.rank-shield-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 82px;
}
.rank-shield-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: shieldGlow 1.8s ease-in-out infinite;
}
@keyframes shieldGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(247, 181, 0, .5)); }
  50% { filter: drop-shadow(0 0 13px rgba(247, 181, 0, .95)); }
}
.my-stat p { font-size: 10px; color: var(--sub); }


/* ============================================================
   PROFILE PAYMENT FILTER — ตัวกรองสถานะการชำระใต้กล่องโปรไฟล์
   ============================================================ */
.my-payment-filter {
  margin: -6px 0 24px;
  padding: 5px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: rgba(10, 20, 32, .72);
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.14);
}
.my-payment-filter::-webkit-scrollbar { display: none; }

.my-payment-filter-btn {
  appearance: none;
  border: 1px solid transparent;
  outline: none;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  background: transparent;
  color: #7f8da1;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.my-payment-filter-btn:active { transform: scale(.96); }

.my-payment-filter-btn.active {
  color: #f8fbff;
  background: linear-gradient(135deg, rgba(2,132,199,.92), rgba(14,165,233,.82));
  border-color: rgba(125,211,252,.34);
  box-shadow: 0 5px 14px rgba(2,132,199,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.my-payment-filter-btn[data-filter="deposit"].active {
  background: linear-gradient(135deg, rgba(217,119,6,.96), rgba(245,158,11,.88));
  border-color: rgba(251,191,36,.34);
  box-shadow: 0 5px 14px rgba(217,119,6,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
.my-payment-filter-btn[data-filter="full"].active {
  background: linear-gradient(135deg, rgba(5,150,105,.96), rgba(16,185,129,.88));
  border-color: rgba(52,211,153,.34);
  box-shadow: 0 5px 14px rgba(5,150,105,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
.my-payment-filter-btn[data-filter="unpaid"].active {
  background: linear-gradient(135deg, rgba(190,24,93,.92), rgba(239,68,68,.86));
  border-color: rgba(251,113,133,.32);
  box-shadow: 0 5px 14px rgba(190,24,93,.18), inset 0 1px 0 rgba(255,255,255,.14);
}

.my-payment-filter-empty {
  padding: 34px 18px;
  margin: 2px 0 12px;
  text-align: center;
  border: 1px dashed rgba(148,163,184,.18);
  border-radius: 18px;
  background: rgba(15,23,42,.28);
  color: #718096;
  font-size: 12px;
  line-height: 1.7;
}

.h-item { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
.h-item:hover { border-color: var(--blue); transform: translateY(-1px); }
.h-item:active { transform: scale(.99); }
.h-item img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.h-item .hi { flex: 1; }
.h-item .hi h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.h-item .hi p { font-size: 11px; color: var(--sub); }
.h-seat { text-align: right; flex-shrink: 0; }
.h-seat .snum { font-size: 18px; font-weight: 800; color: var(--blue); }
.h-seat p { font-size: 10px; color: var(--muted); }

/* mini-seat: ป้ายเบาะสไตล์ boarding-pass โทนทองเข้าธีมเดียวกับป้ายราคาการ์ดทริป */
.mini-seat {
  position: relative;
  min-width: 56px;
  height: 54px;
  padding: 0 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a2233, #0d131f);
  border: 1px solid rgba(212, 175, 55, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mini-seat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f6e2a0, #c9971f, transparent);
}
.mini-seat .mini-seat-label { font-size: 7px; font-weight: 800; letter-spacing: .5px; color: rgba(246, 226, 160, .6); margin-bottom: 2px; }
.mini-seat .mini-seat-num {
  font-size: 16px;
  font-weight: 900;
  color: #f6e2a0;
  line-height: 1.1;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(246, 226, 160, .35);
}

.hist-group-title { font-size: 13px; font-weight: 700; color: var(--sub); margin: 18px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hist-group-title:first-child { margin-top: 0; }
.h-arr { color: var(--blue); font-size: 18px; flex-shrink: 0; padding-left: 2px; }

.pickup-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--sub);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 1px dashed var(--border);
  border-radius: 0 0 18px 18px;
  padding: 8px 14px 10px;
  margin: -10px 0 10px;
}
.pickup-note strong { color: #e2e8f0; font-weight: 700; }


.empty-st { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-st .ico { font-size: 48px; margin-bottom: 12px; }

.btn-logout {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
}
.btn-logout:hover { background: rgba(239, 68, 68, .1); color: var(--red); border-color: rgba(239, 68, 68, .3); }

/* ================================================================
   PROFILE — PICKUP UI
   กล่องดำโปร่งแสง + ปุ่มแก้ไขเหลืองอมส้ม
   ================================================================ */
.pickup-manage-box{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:11px;
  margin:-1px 0 13px;
  padding:12px 13px;
  border:1px solid rgba(148,163,184,.14);
  border-top:0;
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(135deg,rgba(2,7,12,.91),rgba(5,12,18,.86)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=800&q=64') center/cover no-repeat;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
}
.pickup-manage-copy{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.pickup-manage-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(24,35,45,.86),rgba(8,16,23,.88));
  border:1px solid rgba(148,163,184,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.16);
  font-size:17px;
}
.pickup-manage-copy > div{min-width:0}
.pickup-manage-copy small{
  display:block;
  margin-bottom:3px;
  color:#8192a5;
  font-size:9.5px;
  font-weight:700;
}
.pickup-manage-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eef4f8;
  font-size:11.5px;
  font-weight:800;
}
.pickup-manage-btn{
  min-height:36px;
  padding:0 11px;
  border-radius:11px;
  border:1px solid rgba(251,146,60,.38);
  background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(234,88,12,.18));
  color:#ffd38a;
  box-shadow:inset 0 1px 0 rgba(255,237,213,.10),0 6px 16px rgba(194,65,12,.10);
  font-family:inherit;
  font-size:9.5px;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.pickup-manage-btn.add{
  border-color:rgba(251,146,60,.38);
  background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(234,88,12,.18));
  color:#ffd38a;
}
.pickup-manage-btn.edit{
  border-color:rgba(56,189,248,.42);
  background:linear-gradient(135deg,rgba(7,27,38,.78),rgba(3,17,25,.68));
  color:#bcecff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(45,212,191,.06),
    0 0 15px rgba(56,189,248,.15);
  text-shadow:0 0 9px rgba(125,211,252,.22);
}
.pickup-manage-btn.edit:hover{
  border-color:rgba(94,234,212,.52);
  background:linear-gradient(135deg,rgba(8,34,43,.84),rgba(3,21,29,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(45,212,191,.08),
    0 0 18px rgba(45,212,191,.18);
}
.pickup-manage-btn:active{transform:scale(.97)}

/* ---------- popup ---------- */
.profile-pickup-swal-container{
  padding:16px!important;
  background:rgba(2,8,15,.66)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.profile-pickup-swal{
  position:relative!important;
  width:min(390px,calc(100vw - 26px))!important;
  max-height:82dvh!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:23px!important;
  border:1px solid rgba(125,211,252,.12)!important;
  background:
    linear-gradient(180deg,rgba(7,16,27,.90),rgba(5,12,21,.98)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=900&q=68') center/cover no-repeat!important;
  box-shadow:0 26px 72px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.profile-pickup-swal::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%,rgba(56,189,248,.07),transparent 30%),
    linear-gradient(180deg,rgba(5,12,22,.10),rgba(3,9,16,.44));
}
.profile-pickup-swal-html{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  padding:17px 16px 8px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  color:#eaf4fb!important;
}
.profile-pickup-close{
  position:absolute;
  z-index:5;
  top:11px;
  right:11px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(10,18,29,.88);
  color:#d9e5ef;
  font:500 23px/1 Arial,sans-serif;
  cursor:pointer;
}
.profile-pickup-close:active{transform:scale(.93)}
.profile-pickup-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin:2px 42px 13px 0;
  text-align:left;
}
.profile-pickup-head-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.13);
  font-size:21px;
}
.profile-pickup-head small{
  display:block;
  color:#78a8c2;
  font-size:9px;
  font-weight:800;
  margin-bottom:2px;
}
.profile-pickup-head h3{
  margin:0;
  color:#f3f8fc;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}
.profile-pickup-head p{
  margin:4px 0 0;
  color:#71869b;
  font-size:10px;
}
.profile-pickup-trip{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
  padding:10px 11px;
  border-radius:13px;
  background:rgba(8,18,30,.58);
  border:1px solid rgba(148,163,184,.08);
  text-align:left;
}
.profile-pickup-trip-icon{font-size:16px}
.profile-pickup-trip strong{
  display:block;
  color:#eaf5fb;
  font-size:11px;
  font-weight:850;
}
.profile-pickup-trip small{
  display:block;
  margin-top:3px;
  color:#74889b;
  font-size:9px;
}
.profile-pickup-select-wrap{
  position:relative;
  padding:12px;
  border-radius:15px;
  background:rgba(8,18,30,.58);
  border:1px solid rgba(148,163,184,.08);
}
.profile-pickup-select-label{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 1px 7px;
  color:#9eb2c2;
  font-size:9.5px;
  font-weight:800;
  text-align:left;
}
.profile-pickup-select-label .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,.45);
}
.profile-pickup-select{
  width:100%;
  height:44px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(56,189,248,.15);
  border-radius:12px;
  outline:none;
  padding:0 38px 0 12px;
  background:linear-gradient(180deg,rgba(13,26,42,.94),rgba(9,20,33,.94));
  color:#eef7fc;
  font-family:inherit;
  font-size:11px;
  font-weight:750;
}
.profile-pickup-select:focus{
  border-color:rgba(56,189,248,.34);
  box-shadow:0 0 0 3px rgba(56,189,248,.055);
}
.profile-pickup-select-arrow{
  position:absolute;
  right:25px;
  top:50px;
  color:#7492a7;
  font-size:15px;
  pointer-events:none;
}
.profile-pickup-other-wrap{
  display:none;
  margin-top:10px;
  text-align:left;
}
.profile-pickup-other-wrap.show{display:block}
.profile-pickup-other-wrap label{
  display:block;
  margin:0 1px 5px;
  color:#8299aa;
  font-size:9px;
  font-weight:750;
}
.profile-pickup-other{
  width:100%;
  height:42px;
  border:1px solid rgba(56,189,248,.13);
  border-radius:11px;
  outline:none;
  padding:0 11px;
  background:rgba(5,14,24,.82);
  color:#eef7fc;
  font-family:inherit;
  font-size:10.5px;
}
.profile-pickup-other::placeholder{color:#566b7d}
.profile-pickup-preview{
  display:none;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:9px 10px;
  border-radius:11px;
  background:rgba(56,189,248,.055);
  border:1px solid rgba(56,189,248,.09);
  text-align:left;
}
.profile-pickup-preview.show{display:flex}
.profile-pickup-preview > span{font-size:14px}
.profile-pickup-preview small{
  display:block;
  color:#6f8ca0;
  font-size:8px;
}
.profile-pickup-preview strong{
  display:block;
  margin-top:2px;
  color:#cfefff;
  font-size:10px;
}
.profile-pickup-note{
  display:flex;
  gap:7px;
  margin:10px 1px 1px;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(8,18,30,.42);
  border:1px solid rgba(148,163,184,.055);
  text-align:left;
}
.profile-pickup-note span{font-size:10px}
.profile-pickup-note p{
  margin:0;
  color:#657b8e;
  font-size:8.3px;
  line-height:1.45;
}
.profile-pickup-actions{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:1fr 1.2fr!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
  padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;
  background:linear-gradient(180deg,rgba(5,12,21,.62),rgba(5,12,21,.97))!important;
  border-top:1px solid rgba(148,163,184,.07)!important;
}
.profile-pickup-confirm,
.profile-pickup-cancel{
  min-height:41px;
  border-radius:12px;
  font-family:inherit;
  font-size:9.5px;
  font-weight:900;
  cursor:pointer;
}
.profile-pickup-confirm{
  border:1px solid rgba(56,189,248,.22);
  background:linear-gradient(135deg,#0369a1,#0284c7);
  color:#f2fbff;
  box-shadow:0 8px 20px rgba(2,132,199,.14);
}
.profile-pickup-cancel{
  border:1px solid rgba(148,163,184,.11);
  background:rgba(15,23,42,.80);
  color:#a7b5c1;
}
.profile-pickup-confirm:active,
.profile-pickup-cancel:active{transform:scale(.97)}
.profile-pickup-swal .swal2-validation-message{
  margin:7px 16px 0!important;
  padding:7px 9px!important;
  border-radius:9px!important;
  background:rgba(127,29,29,.52)!important;
  color:#fecaca!important;
  font-size:9px!important;
}

@media(max-width:430px){
  .pickup-manage-box{
    grid-template-columns:1fr;
  }
  .pickup-manage-btn{
    width:100%;
  }
  .profile-pickup-swal{
    width:calc(100vw - 22px)!important;
    max-height:80dvh!important;
  }
}


/* ================================================================
   PICKUP SAVE STATUS POPUPS — compact / forest / wow animation
   กระทบเฉพาะ popup กำลังบันทึก + บันทึกสำเร็จ
   ================================================================ */
.pickup-save-swal-container{
  padding:18px!important;
  background:rgba(3,8,14,.68)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}
.pickup-save-swal{
  position:relative!important;
  width:min(340px,calc(100vw - 44px))!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(125,211,252,.13)!important;
  color:#eef8ff!important;
  background:
    linear-gradient(180deg,rgba(7,16,27,.87),rgba(4,11,19,.97)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=760&q=68') center/cover no-repeat!important;
  box-shadow:
    0 26px 74px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  animation:pickupSavePopupIn .38s cubic-bezier(.18,.82,.22,1) both!important;
}
.pickup-save-swal::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 5%,rgba(56,189,248,.08),transparent 31%),
    linear-gradient(180deg,rgba(4,12,21,.08),rgba(3,9,16,.50));
}
.pickup-save-swal-html{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  padding:25px 20px 22px!important;
  color:#edf7fd!important;
}
.pickup-save-state{
  text-align:center;
}
.pickup-save-state small{
  display:block;
  margin-top:14px;
  color:#79a6bf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.35px;
}
.pickup-save-state h3{
  margin:4px 0 0;
  color:#f5fbff;
  font-size:18px;
  line-height:1.18;
  font-weight:900;
}
.pickup-save-state > p{
  margin:7px 0 0;
  color:#8094a7;
  font-size:10px;
  line-height:1.45;
}

/* loading */
.pickup-save-orbit{
  position:relative;
  width:92px;
  height:92px;
  margin:0 auto 2px;
  display:grid;
  place-items:center;
}
.pickup-save-orbit::before,
.pickup-save-orbit::after{
  content:'';
  position:absolute;
  border-radius:50%;
}
.pickup-save-orbit::before{
  inset:3px;
  border:1px solid rgba(56,189,248,.13);
  animation:pickupOrbitPulse 2.1s ease-in-out infinite;
}
.pickup-save-orbit::after{
  inset:13px;
  border:1px dashed rgba(125,211,252,.18);
  animation:pickupOrbitSpin 5s linear infinite;
}
.pickup-save-core{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(3,105,161,.30),rgba(8,47,73,.36));
  border:1px solid rgba(125,211,252,.18);
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    0 0 28px rgba(56,189,248,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  font-size:24px;
  animation:pickupCoreFloat 1.8s ease-in-out infinite;
}
.orbit-dot{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 12px rgba(125,211,252,.65);
}
.dot-a{animation:pickupDotA 2.3s linear infinite}
.dot-b{animation:pickupDotB 2.9s linear infinite reverse}
.dot-c{
  width:4px;
  height:4px;
  opacity:.7;
  animation:pickupDotC 3.7s linear infinite;
}
.pickup-save-progress{
  position:relative;
  height:4px;
  margin:17px 16px 0;
  overflow:hidden;
  border-radius:999px;
  background:rgba(148,163,184,.09);
}
.pickup-save-progress i{
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,#38bdf8,#bae6fd,transparent);
  filter:drop-shadow(0 0 5px rgba(56,189,248,.45));
  animation:pickupSaveProgress 1.2s ease-in-out infinite;
}

/* success */
.pickup-success-burst{
  position:relative;
  width:102px;
  height:102px;
  margin:0 auto 3px;
  display:grid;
  place-items:center;
}
.pickup-success-ring{
  position:relative;
  width:67px;
  height:67px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(125,211,252,.25);
  background:radial-gradient(circle,rgba(56,189,248,.14),rgba(2,132,199,.05));
  box-shadow:
    0 0 0 10px rgba(56,189,248,.025),
    0 0 36px rgba(56,189,248,.11);
  animation:pickupSuccessRing .58s cubic-bezier(.2,.9,.2,1) both;
}
.pickup-success-ring::before{
  content:'';
  position:absolute;
  inset:-9px;
  border-radius:50%;
  border:1px solid rgba(125,211,252,.11);
  animation:pickupSuccessWave 1.45s ease-out infinite;
}
.pickup-success-check{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#e0f2fe,#7dd3fc);
  color:#062233;
  font-size:22px;
  font-weight:1000;
  box-shadow:0 7px 18px rgba(2,132,199,.20);
  animation:pickupCheckWow .48s .12s cubic-bezier(.15,1.2,.3,1) both;
}
.burst{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  margin:-2px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 9px rgba(125,211,252,.52);
  opacity:0;
}
.b1{animation:pickupBurst1 .9s .14s ease-out both}
.b2{animation:pickupBurst2 .9s .18s ease-out both}
.b3{animation:pickupBurst3 .9s .22s ease-out both}
.b4{animation:pickupBurst4 .9s .26s ease-out both}
.pickup-success-location{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  max-width:260px;
  margin:12px auto 0;
  padding:8px 11px;
  border-radius:11px;
  background:rgba(56,189,248,.055);
  border:1px solid rgba(56,189,248,.09);
}
.pickup-success-location span{font-size:13px}
.pickup-success-location strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#cfefff;
  font-size:10.5px;
  font-weight:850;
}
.pickup-save-swal .swal2-timer-progress-bar{
  height:2px!important;
  background:linear-gradient(90deg,#0ea5e9,#7dd3fc)!important;
  box-shadow:0 0 8px rgba(56,189,248,.35);
}

/* error only */
.pickup-save-swal-error{
  padding:12px 0 16px!important;
}
.pickup-save-swal-error .swal2-title{
  color:#f8fafc!important;
  font-family:inherit!important;
  font-size:17px!important;
}
.pickup-save-swal-error .swal2-html-container{
  color:#94a3b8!important;
  font-family:inherit!important;
  font-size:11px!important;
}

/* animations */
@keyframes pickupSavePopupIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  70%{transform:translateY(-2px) scale(1.012)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pickupOrbitPulse{
  0%,100%{transform:scale(.92);opacity:.35}
  50%{transform:scale(1.06);opacity:.9}
}
@keyframes pickupOrbitSpin{
  to{transform:rotate(360deg)}
}
@keyframes pickupCoreFloat{
  0%,100%{transform:translateY(2px) rotate(-2deg)}
  50%{transform:translateY(-4px) rotate(2deg)}
}
@keyframes pickupDotA{
  0%{transform:rotate(0deg) translateX(42px) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(42px) rotate(-360deg)}
}
@keyframes pickupDotB{
  0%{transform:rotate(80deg) translateX(34px) rotate(-80deg)}
  100%{transform:rotate(440deg) translateX(34px) rotate(-440deg)}
}
@keyframes pickupDotC{
  0%{transform:rotate(200deg) translateX(46px) rotate(-200deg)}
  100%{transform:rotate(560deg) translateX(46px) rotate(-560deg)}
}
@keyframes pickupSaveProgress{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(340%)}
}
@keyframes pickupSuccessRing{
  from{opacity:0;transform:scale(.55) rotate(-8deg)}
  70%{transform:scale(1.08) rotate(2deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes pickupSuccessWave{
  0%{opacity:.55;transform:scale(.72)}
  100%{opacity:0;transform:scale(1.45)}
}
@keyframes pickupCheckWow{
  from{opacity:0;transform:scale(.3) rotate(-18deg)}
  75%{transform:scale(1.18) rotate(3deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes pickupBurst1{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(42px,-34px)}
}
@keyframes pickupBurst2{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(-44px,-25px)}
}
@keyframes pickupBurst3{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(38px,34px)}
}
@keyframes pickupBurst4{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(-38px,37px)}
}

@media(max-width:430px){
  .pickup-save-swal{
    width:min(330px,calc(100vw - 38px))!important;
    border-radius:22px!important;
  }
  .pickup-save-swal-html{
    padding:23px 18px 20px!important;
  }
}


/* ================================================================
   PICKUP SUCCESS POPUP — ปุ่มออกชัดเจน
   ================================================================ */
.pickup-save-swal-success{
  position:relative!important;
}
.pickup-success-close{
  position:absolute;
  z-index:10;
  top:11px;
  right:11px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(7,15,25,.86);
  color:#dceaf3;
  font:500 23px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 7px 20px rgba(0,0,0,.28);
  transition:transform .15s ease,background .15s ease;
}
.pickup-success-close:active{
  transform:scale(.92);
  background:rgba(14,27,43,.96);
}
.pickup-success-done{
  width:100%;
  min-height:42px;
  margin-top:16px;
  border-radius:12px;
  border:1px solid rgba(56,189,248,.22);
  background:linear-gradient(135deg,#0369a1,#0284c7);
  color:#f2fbff;
  font-family:inherit;
  font-size:10.5px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(2,132,199,.14);
  transition:transform .15s ease,filter .15s ease;
}
.pickup-success-done:active{
  transform:scale(.97);
  filter:brightness(.96);
}


/* ================================================================
   PICKUP SUCCESS — ปุ่มกลับหน้าโปรไฟล์
   ================================================================ */
.pickup-success-close{
  display:none!important;
}
.pickup-success-done{
  display:none!important;
}
.pickup-success-profile-btn{
  width:100%;
  min-height:44px;
  margin-top:16px;
  border-radius:13px;
  border:1px solid rgba(74,222,128,.30);
  background:linear-gradient(135deg,#15803d,#16a34a);
  color:#f0fff4;
  font-family:inherit;
  font-size:10.8px;
  font-weight:900;
  letter-spacing:.1px;
  cursor:pointer;
  box-shadow:
    0 10px 24px rgba(22,163,74,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
  animation:pickupProfileBtnGlow 2.4s ease-in-out infinite;
}
.pickup-success-profile-btn:active{
  transform:scale(.97);
  filter:brightness(.96);
}
@keyframes pickupProfileBtnGlow{
  0%,100%{
    box-shadow:
      0 10px 24px rgba(22,163,74,.18),
      0 0 0 0 rgba(74,222,128,.08),
      inset 0 1px 0 rgba(255,255,255,.14);
  }
  50%{
    box-shadow:
      0 12px 28px rgba(22,163,74,.27),
      0 0 0 5px rgba(74,222,128,.035),
      inset 0 1px 0 rgba(255,255,255,.16);
  }
}


/* ================================================================
   PROFILE > ของที่เช่า
   ================================================================ */
.my-equip-section{margin:20px 0 22px}
.my-equip-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#f8fafc;font-size:17px;font-weight:900}
.my-equip-count{font-size:10px;color:#8fa3b8;border:1px solid rgba(56,189,248,.18);background:rgba(15,23,42,.7);padding:5px 9px;border-radius:999px}
.my-equip-summary-card{
  width:100%;min-height:86px;border-radius:22px;padding:14px;
  display:flex;align-items:center;gap:13px;text-align:left;
  border:1px solid rgba(56,189,248,.4);
  background:linear-gradient(145deg,rgba(11,30,41,.98),rgba(5,13,22,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);
  color:#fff;font-family:inherit;
}
.my-equip-summary-card:active{transform:scale(.985)}
.my-equip-summary-icon{width:54px;height:54px;flex:0 0 54px;border-radius:17px;display:grid;place-items:center;font-size:28px;background:#0c2230;border:1px solid rgba(56,189,248,.3)}
.my-equip-summary-copy{min-width:0;flex:1}
.my-equip-summary-copy strong{display:block;font-size:14px;font-weight:900;margin-bottom:5px}
.my-equip-summary-copy span{display:block;font-size:10.5px;color:#8fa3b8}
.my-equip-summary-arrow{font-size:30px;color:#38bdf8}

.my-equip-swal{
  width:min(92vw,430px)!important;padding:0!important;border-radius:28px!important;
  background:
    linear-gradient(180deg,rgba(3,10,17,.74),rgba(3,10,17,.90)),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=82') center/cover no-repeat!important;
  border:1px solid rgba(56,189,248,.22)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.04)!important;
  overflow:hidden!important;
}
.my-equip-swal-html{margin:0!important;padding:0!important}
.my-equip-popup-shell{padding:22px 16px 4px;color:#eef6f8;text-align:center}
.my-equip-popup-shell h3{margin:5px 0 2px;font-size:20px;font-weight:950}
.my-equip-popup-shell>p{margin:0 0 14px;font-size:10.5px;color:#8296a8}
.my-equip-popup-orbit{position:relative;width:78px;height:78px;margin:0 auto 8px;display:grid;place-items:center}
.my-equip-orbit-ring{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(56,189,248,.26);border-top-color:#38bdf8;animation:myEquipOrbit 2.8s linear infinite}
.my-equip-orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 14px #38bdf8}
.my-equip-orbit-dot.dot-a{top:4px;left:36px}
.my-equip-orbit-dot.dot-b{bottom:9px;right:9px;width:5px;height:5px;opacity:.65}
.my-equip-popup-core{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;font-size:26px;background:linear-gradient(145deg,#12303a,#08171e);border:1px solid rgba(56,189,248,.34);animation:myEquipPulse 2s ease-in-out infinite}
.my-equip-popup-scroll{max-height:min(52vh,430px);overflow:auto;-webkit-overflow-scrolling:touch;text-align:left;scrollbar-width:none}
.my-equip-popup-scroll::-webkit-scrollbar{display:none}
.my-equip-popup-trip{border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(9,20,28,.78);padding:11px;margin-bottom:10px}
.my-equip-popup-trip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.my-equip-popup-trip-head>div{min-width:0}
.my-equip-popup-trip-head strong{display:block;font-size:12px;color:#fff;font-weight:900}
.my-equip-popup-trip-head span{font-size:9px;color:#8194a6}
.my-equip-popup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed rgba(148,163,184,.12)}
.my-equip-popup-row-main{min-width:0}
.my-equip-popup-row-main strong{display:block;font-size:10.5px;color:#dce7ed}
.my-equip-popup-row-main span{display:block;margin-top:3px;font-size:10px;color:#7dd3fc;font-weight:800}
.my-equip-pay{display:inline-flex;white-space:nowrap;border-radius:999px;padding:4px 7px;font-size:8.5px;font-weight:900;border:1px solid transparent}
.my-equip-pay.paid{color:#86efac;background:rgba(34,197,94,.11);border-color:rgba(34,197,94,.24)}
.my-equip-pay.checking{color:#fde68a;background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.24)}
.my-equip-pay.unpaid{color:#fca5a5;background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22)}
.my-equip-swal-back{width:calc(100% - 32px)!important;margin:7px 16px 16px!important;border:0!important;border-radius:14px!important;padding:11px 14px!important;background:linear-gradient(135deg,#0f766e,#15803d)!important;color:#fff!important;font-family:inherit!important;font-size:12px!important;font-weight:900!important}
@keyframes myEquipOrbit{to{transform:rotate(360deg)}}
@keyframes myEquipPulse{50%{transform:scale(1.055)}}

/* ================================================================
   PROFILE > ไปแล้ว — fade
   การ์ดข้างในเป็น markup เดิม 100%
   ================================================================ */
#bookingHistoryList.my-past-fade-list > *{display:none}
#bookingHistoryList.my-past-fade-list > .my-past-show{display:block;animation:myPastFadeIn .5s ease}
#bookingHistoryList.my-past-fade-list > .my-past-show.my-past-out{animation:myPastFadeOut .5s ease forwards}
@keyframes myPastFadeIn{from{opacity:0}to{opacity:1}}
@keyframes myPastFadeOut{from{opacity:1}to{opacity:0}}


/* ================================================================
   PROFILE — รีดีไซน์เฉพาะหัวข้อ
   ประวัติความบ้า / กำลังจะไป / ของที่เช่า / ไปแล้ว
   ไม่แตะการ์ดหรือการทำงานใด ๆ
   ================================================================ */

/* หัวใหญ่ "ประวัติความบ้า" */
#tab-mytrips .history-section > .sec-hdr:first-child,
#tab-mytrips .history-wrap > .sec-hdr:first-child{
  position:relative;
  margin:24px 0 17px!important;
  padding:0 0 13px 14px!important;
  border-bottom:1px solid rgba(56,189,248,.12);
}
#tab-mytrips .history-section > .sec-hdr:first-child::before,
#tab-mytrips .history-wrap > .sec-hdr:first-child::before{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:72px;height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,rgba(56,189,248,0));
  box-shadow:0 0 12px rgba(56,189,248,.28);
}

/* หัวกลุ่ม กำลังจะไป / ไปแล้ว */
#tab-mytrips .hist-group-title{
  position:relative;
  min-height:44px;
  margin:10px 0 10px!important;
  padding:0 2px 0 12px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#tab-mytrips .hist-group-title::before{
  content:"";
  position:absolute;
  left:0;top:10px;bottom:10px;
  width:3px;
  border-radius:99px;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  box-shadow:0 0 10px rgba(56,189,248,.26);
}
#tab-mytrips .hist-group-title > span:first-child{
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:.1px;
  color:#e7edf5!important;
}
#tab-mytrips .hist-group-title > span:last-child:not(:first-child){
  padding:6px 10px;
  border-radius:999px;
  background:rgba(14,165,233,.07);
  border:1px solid rgba(56,189,248,.13);
}

/* หัว "ของที่เช่า" */
#tab-mytrips .my-equip-section-title{
  position:relative;
  min-height:48px;
  margin:10px 0 10px!important;
  padding:0 2px 0 12px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#tab-mytrips .my-equip-section-title::before{
  content:"";
  position:absolute;
  left:0;top:11px;bottom:11px;
  width:3px;
  border-radius:99px;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  box-shadow:0 0 10px rgba(56,189,248,.26);
}
#tab-mytrips .my-equip-section-title > span:first-child{
  font-size:17px!important;
  font-weight:900!important;
  color:#f4f7fb!important;
}
#tab-mytrips .my-equip-section-title .my-equip-count{
  padding:6px 10px!important;
  border-radius:999px!important;
  background:rgba(14,165,233,.07)!important;
  border:1px solid rgba(56,189,248,.15)!important;
  color:#a9b8c8!important;
  font-size:10px!important;
  font-weight:800!important;
}

/* เส้นแบ่งเบา ๆ ก่อนหมวดของที่เช่าและไปแล้ว */
#tab-mytrips .my-equip-section{
  position:relative;
  padding-top:5px;
}
#tab-mytrips .my-equip-section::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-5px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.12),transparent);
  pointer-events:none;
}


/* PROFILE > ของที่เช่า — ปุ่มชำระรายการเก่าก่อนมีระบบชำระเงิน */
.my-equip-pay.legacy-pay{
  appearance:none;
  border:1px solid rgba(250,204,21,.75);
  background:linear-gradient(135deg,#facc15,#f59e0b);
  color:#17130a;
  cursor:pointer;
  font-family:inherit;
  font-weight:900;
  box-shadow:
    0 0 14px rgba(250,204,21,.25),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.my-equip-pay.legacy-pay:active{
  transform:scale(.97);
}