/* =====================================================
   BEGAN Partner — Reserve System (refined)
   Premium allocation · compact density · mobile-first
   =====================================================*/

:root {
  --reserve-bg: #040404;
  --reserve-bg-elevated: #0a0a0a;
  --reserve-surface: #0f0f0f;
  --reserve-surface-hover: #151515;
  --reserve-border: rgba(255, 255, 255, 0.07);
  --reserve-border-strong: rgba(201, 169, 98, 0.4);
  --reserve-text: #f0f0f0;
  --reserve-text-muted: #7a7a7a;
  --reserve-accent: #c9a962;
  --reserve-accent-dim: rgba(201, 169, 98, 0.12);
  --reserve-accent-glow: rgba(201, 169, 98, 0.22);
  --reserve-green: #5ee89a;
  --reserve-blue: #8ba8ff;
  --reserve-danger: #ff4d2a;
  --reserve-radius: 14px;
  --reserve-radius-sm: 8px;
  --reserve-gap: 0.625rem;
  --reserve-gap-md: 0.875rem;
  --reserve-touch: 42px;
  --reserve-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --reserve-transition: 0.22s ease;
  --reserve-media-ratio: 5 / 4;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.reserve-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--reserve-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--reserve-text);
  background: var(--reserve-bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -15%, rgba(201, 169, 98, 0.1), transparent),
    radial-gradient(ellipse 50% 35% at 100% 80%, rgba(255, 77, 42, 0.05), transparent);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shell */
.reserve-app {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.75rem;
  padding-bottom: 5.5rem;
}


.reserve-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--reserve-border);
  text-align: center;
  font-size: 0.75rem;
  color: var(--reserve-text-muted);
}

.reserve-footer p {
  margin: 0;
}

/* Grid: 1 mobile, 2 tablet, centered desktop */
.reserve-grid {
  display: grid;
  gap: var(--reserve-gap-md);
  grid-template-columns: 1fr;
  width: 100%;
}

  .reserve-grid:has(.reserve-card:only-child) {
    grid-template-columns: minmax(340px, 420px);
    justify-content: center;
  }

  .reserve-grid:has(.reserve-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(340px, 420px));
    justify-content: center;
  }
}

/* Card */
.reserve-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--reserve-surface);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 6px 24px rgba(0, 0, 0, 0.5);
  transition: border-color var(--reserve-transition), transform var(--reserve-transition);
}

.reserve-card:hover {
  border-color: var(--reserve-border-strong);
}

/* Cinematic media */
.reserve-card__media {
  position: relative;
  aspect-ratio: var(--reserve-media-ratio);
  overflow: hidden;
  background: #000;
}

.reserve-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (min-width: 1024px) {
  .reserve-card:hover .reserve-card__thumb {
    transform: scale(1.06);
  }
}

.reserve-card__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 35%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 42%, transparent 68%);
  pointer-events: none;
}

.reserve-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  padding: 0.3em 0.65em;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.reserve-card__badge[data-status="UPCOMING"] {
  color: var(--reserve-blue);
  background: rgba(139, 168, 255, 0.15);
  border: 1px solid rgba(139, 168, 255, 0.45);
}

.reserve-card__badge[data-status="RESERVE_OPEN"] {
  color: var(--reserve-green);
  background: rgba(94, 232, 154, 0.12);
  border: 1px solid rgba(94, 232, 154, 0.5);
  box-shadow: 0 0 20px rgba(94, 232, 154, 0.15);
}

.reserve-card__badge[data-status="PRODUCTION"] {
  color: var(--reserve-accent);
  background: rgba(201, 169, 98, 0.15);
  border: 1px solid var(--reserve-border-strong);
}

.reserve-card__badge[data-status="FINISHED"] {
  color: #b0b0b0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--reserve-border);
}

.reserve-card__badge[data-status="CLOSED"] {
  color: var(--reserve-danger);
  background: rgba(255, 77, 42, 0.12);
  border: 1px solid rgba(255, 77, 42, 0.45);
}

.reserve-card__media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.25rem 0.65rem 0.5rem;
  pointer-events: none;
}

.reserve-card__name {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.reserve-card__desc {
  margin: 0;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

.reserve-card__video-btn {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--reserve-transition), border-color var(--reserve-transition);
}

.reserve-card__video-btn:hover {
  background: rgba(201, 169, 98, 0.25);
  border-color: var(--reserve-border-strong);
}

.reserve-card__video-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.5rem;
  background: var(--reserve-accent);
  color: #0a0a0a;
  border-radius: 50%;
}

/* Body — compact */
.reserve-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--reserve-gap);
  padding: 0.65rem 0.65rem 0.5rem;
  flex: 1;
}

.reserve-card__product-meta {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  background: var(--reserve-bg-elevated);
}

.reserve-card__title {
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reserve-card__subtitle {
  margin: 0;
  font-size: 0.625rem;
  color: var(--reserve-text-muted);
}

.reserve-card__unit-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--reserve-border);
  font-size: 0.625rem;
}

.reserve-card__unit-price-label {
  color: var(--reserve-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reserve-card__unit-price [data-product-unit-price] {
  font-weight: 700;
  color: var(--reserve-accent);
}

.reserve-block-title {
  margin: 0 0 0.35rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reserve-text-muted);
}

/* Analytics strip */
.reserve-analytics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reserve-analytics__item {
  padding: 0.4rem 0.35rem;
  text-align: center;
  background: var(--reserve-bg-elevated);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
}

.reserve-analytics__value {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--reserve-accent);
  line-height: 1.2;
}

.reserve-analytics__label {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--reserve-text-muted);
}

/* Progress */
.reserve-progress {
  padding: 0.45rem 0.5rem;
  background: var(--reserve-bg-elevated);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
}

.reserve-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.reserve-progress__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--reserve-text-muted);
}

.reserve-progress__pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--reserve-accent);
}

.reserve-progress__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.reserve-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a7340, var(--reserve-accent), #e8d5a3);
  box-shadow: 0 0 12px var(--reserve-accent-glow);
  transition: width 0.4s ease;
}

.reserve-progress__meta {
  margin: 0.3rem 0 0;
  font-size: 0.625rem;
  color: var(--reserve-text-muted);
  text-align: right;
}

/* Partner list */
.reserve-partners__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reserve-partner-row {

  display:flex;
  flex-direction:column;

  gap:4px;

  min-height:auto;

  padding:8px 10px;

  border:1px solid var(--reserve-border);

  border-radius:var(--reserve-radius-sm);

  background:var(--reserve-bg-elevated);

}
.reserve-partner-row__header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

}
.reserve-partner-row__name{

  flex:1;

  min-width:0;

  font-size:11px;

  font-weight:700;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}
.reserve-partner-row__priority {
  align-self: flex-start;
  font-size: 0.53125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.2em 0.45em;
  border-radius: 4px;
  text-transform: uppercase;
}

.reserve-partner-row__priority[data-priority-level="PRIORITY01"]{

  color:#f6d365;

  background:
    linear-gradient(
      135deg,
      rgba(246,211,101,.20),
      rgba(253,160,133,.10)
    );

  border:1px solid rgba(246,211,101,.45);

  box-shadow:
    0 0 12px rgba(246,211,101,.18);

}
.reserve-partner-row__priority[data-priority-level="PRIORITY02"]{

  color:#7dd3fc;

  background:
    rgba(125,211,252,.08);

  border:1px solid rgba(125,211,252,.25);

  box-shadow:none;

}
.reserve-partner-row__priority[data-priority-level="PRIORITY03"]{

  color:#9ca3af;

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.06);

}
.reserve-partner-row__qty{

  flex-shrink:0;

  font-size:11px;

  font-weight:700;

  color:#d7d7d7;

  white-space:nowrap;

}
.reserve-partner-row__priority{

  align-self:flex-start;

  margin-top:2px;

}

.reserve-partners__list--extra {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border: none;
  margin: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin 0.25s ease;
}

.reserve-partners.is-expanded .reserve-partners__list--extra {
  max-height: 720px;
  opacity: 1;
  margin-top: 0.35rem;
}

.reserve-partners__toggle {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.5rem;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--reserve-accent);
  background: transparent;
  border: 1px dashed var(--reserve-border-strong);
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
  transition: background var(--reserve-transition);
}

.reserve-partners__toggle:hover {
  background: var(--reserve-accent-dim);
}

.reserve-partners__chevron {
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 0.25s ease;
}

/* Multi-size allocation */
.reserve-size-qty-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}

.reserve-size-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.35rem;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  background: var(--reserve-bg-elevated);
}

.reserve-size-qty-row__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.reserve-qty--compact .reserve-qty__btn {
  min-width: 36px;
  min-height: 36px;
  font-size: 1rem;
}

.reserve-qty--compact .reserve-qty__value {
  min-width: 2rem;
  font-size: 0.8125rem;
}

.reserve-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  background: var(--reserve-bg-elevated);
  overflow: hidden;
}

.reserve-qty__btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--reserve-text);
  background: transparent;
  border: none;
  cursor: pointer;
}

.reserve-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.reserve-qty__value {
  min-width: 2.25rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  border-inline: 1px solid var(--reserve-border);
}

/* Payment */
.reserve-payment-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
}

@media (min-width: 480px) {
  .reserve-payment-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reserve-payment-option {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.4rem 0.45rem;
  background: var(--reserve-bg-elevated);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
  transition: border-color var(--reserve-transition), background var(--reserve-transition);
}

.reserve-payment-option.is-active {
  border-color: var(--reserve-border-strong);
  background: var(--reserve-accent-dim);
  box-shadow: 0 0 10px var(--reserve-accent-glow);
}

.reserve-payment-option__input {
  margin-top: 0.15rem;
  accent-color: var(--reserve-accent);
  flex-shrink: 0;
}

.reserve-payment-option__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.reserve-payment-option__text {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
}

.reserve-payment-option__hint {
  font-size: 0.5625rem;
  color: var(--reserve-text-muted);
  line-height: 1.2;
}

/* Summary */
.reserve-summary {
  margin: 0;
  padding: 0.45rem 0.5rem;
  background: var(--reserve-bg-elevated);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
}

.reserve-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.reserve-summary__row dt {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--reserve-text-muted);
}

.reserve-summary__row dd {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
}

.reserve-summary__row--discount dd {
  color: var(--reserve-green);
}

.reserve-summary__row--final {
  padding-top: 0.25rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--reserve-border);
}

.reserve-summary__row--final dd {
  font-size: 0.875rem;
  color: var(--reserve-accent);
}

.reserve-priority{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:88px;

  padding:4px 10px;

  border-radius:999px;

  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;

  text-transform:uppercase;

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

}

/* =========================
PRIORITY 01
========================= */

.reserve-priority[
  data-priority-level="PRIORITY01"
]{

  color:#f6d365;

  background:
    linear-gradient(
      135deg,
      rgba(246,211,101,.18),
      rgba(253,160,133,.10)
    );

  border-color:
    rgba(246,211,101,.45);

  box-shadow:
    0 0 12px rgba(246,211,101,.18);

}

/* =========================
PRIORITY 02
========================= */

.reserve-priority[
  data-priority-level="PRIORITY02"
]{

  color:#7dd3fc;

  background:
    linear-gradient(
      135deg,
      rgba(125,211,252,.16),
      rgba(59,130,246,.08)
    );

  border-color:
    rgba(125,211,252,.35);

  box-shadow:
    0 0 10px rgba(125,211,252,.12);

}

/* =========================
PRIORITY 03
========================= */

.reserve-priority[
  data-priority-level="PRIORITY03"
]{

  color:#d1d5db;

  background:
    rgba(255,255,255,.06);

  border-color:
    rgba(255,255,255,.08);

}
/* Summary pcs label */
.reserve-summary__pcs {

  margin-bottom: 8px;

  font-size: 22px;

  font-weight: 900;

  letter-spacing: .04em;

  text-transform: uppercase;

  color: #f6d365;

  text-shadow:
    0 0 14px rgba(246,211,101,.22);

}
/* Trust / tracking badge */
.reserve-trust {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--reserve-border-strong);
  border-radius: var(--reserve-radius-sm);
  background: rgba(201, 169, 98, 0.06);
}

.reserve-trust__badge {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--reserve-accent);
}

/* Production timeline */
.reserve-timeline {
  display: grid;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: var(--reserve-bg-elevated);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
}

.reserve-timeline__row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.625rem;
}

.reserve-timeline__label {
  color: var(--reserve-text-muted);
}

.reserve-timeline__value {
  font-weight: 600;
  text-align: right;
}

/* Gallery */
.reserve-card__media-wrap {
  background: #000;
}

.reserve-gallery {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.reserve-gallery__thumb {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0;
  width: 3.75rem;
  background: transparent;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--reserve-transition);
}

.reserve-gallery__thumb img {
  display: block;
  width: 3.75rem;
  height: 3rem;
  object-fit: cover;
}

.reserve-gallery__thumb.is-active {
  border-color: var(--reserve-accent);
  box-shadow: 0 0 10px var(--reserve-accent-glow);
}

.reserve-gallery__thumb-label {
  width: 100%;
  padding: 0.15rem 0;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--reserve-text-muted);
  background: var(--reserve-bg-elevated);
}

/* Card action bar */
.reserve-card__action-bar {
  padding: 0.5rem 0.65rem 0.65rem;
  background: var(--reserve-bg-elevated);
  border-top: 1px solid var(--reserve-border);
}

.reserve-cta {
  width: 100%;
  min-height: var(--reserve-touch);
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--reserve-accent), #e0c989);
  border: none;
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px var(--reserve-accent-glow);
  transition: transform var(--reserve-transition), opacity var(--reserve-transition);
}

.reserve-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.reserve-cta:active:not(:disabled),
.reserve-cta.is-pressed {
  transform: scale(0.97);
}

.reserve-cta.is-shake {
  animation: reserve-shake 0.35s ease;
}

@keyframes reserve-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.reserve-cta--confirm{

margin:0;

width:auto;

min-width:180px;

height:44px;

padding:0 18px;

align-self:end;

}
@media (max-width: 639px) {
  .reserve-card__action-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
  }
}

/* Video dialog */
.reserve-video-dialog {

  position:fixed;

  inset:0;

  z-index:999999;

  display:none;

  align-items:center;

  justify-content:center;

  padding:24px;

  width:100%;

  max-width:100%;

  max-height:100vh;

  margin:0;

  border:0;

  background:
    rgba(0,0,0,.82);

  backdrop-filter:
    blur(6px);

}

.reserve-video-dialog[open]{

  display:flex;

}

.reserve-video-dialog__inner {

  position:relative;

  display:flex;
  flex-direction:column;

  width:min(440px,100%);

  max-height:92vh;

  overflow:hidden;

  background:#0b0b0b;

  border:1px solid
  var(--reserve-border-strong);

  border-radius:28px;

  box-shadow:
    0 20px 80px rgba(0,0,0,.7);

}
.reserve-video-dialog__head {

  position:absolute;

  top:12px;
  right:12px;

  left:auto;

  z-index:20;

  display:flex;

  justify-content:flex-end;

  padding:0;

  border:0;

  background:transparent;

}
.reserve-video-dialog__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.reserve-video-dialog__close {

  display:flex;
  align-items:center;
  justify-content:center;

  width:46px;
  height:46px;

  padding:0;

  border-radius:50%;

  border:1px solid
  rgba(255,255,255,.12);

  background:
    rgba(0,0,0,.72);

  backdrop-filter:blur(10px);

  color:#fff;

  font-size:28px;

  line-height:1;

  cursor:pointer;

  transition:.2s ease;

}

.reserve-video-dialog__close:hover{

  transform:scale(1.06);

  border-color:
    var(--reserve-border-strong);

}
.reserve-video-dialog__body {

  display:flex;

  flex-direction:column;

  flex:1;

  padding:56px 14px 14px;

  min-height:0;

}
.reserve-video-dialog__embed-wrap{

  position:relative;

  width:100%;

  aspect-ratio:9/16;

  max-height:78vh;

  background:#000;

  border-radius:18px;

  overflow:hidden;

}
.reserve-video-dialog__iframe {

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  border:0;

}


.reserve-video-dialog__external{

  position:absolute;

  left:14px;
  bottom:14px;

  z-index:15;

  padding:6px 10px;

  border-radius:999px;

  background:
    rgba(0,0,0,.6);

  backdrop-filter:blur(10px);

  font-size:11px;

}
.reserve-video-dialog__external:hover {
  text-decoration: underline;
}

/* Ringkasan Reserve FAB */
.reserve-fab {
  position: fixed;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--reserve-touch);
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--reserve-accent), #e0c989);
  border: 1px solid var(--reserve-border-strong);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 28px var(--reserve-accent-glow);
  transition: transform var(--reserve-transition), box-shadow var(--reserve-transition);
}

.reserve-fab:hover {
  box-shadow: 0 10px 36px rgba(201, 169, 98, 0.4);
}

.reserve-fab__count {
  color: #0a0a0a;
}

@media (max-width:699px){

.reserve-fab{

right:12px;
left:auto;

bottom:12px;

width:auto;
min-width:160px;

padding:0 18px;

}

}

@media (min-width: 700px) {
  .reserve-fab {
    right: 1.25rem;
    bottom: 1.25rem;
    left: auto;
    width: auto;
  }
}

/* Ringkasan Reserve drawer */
.reserve-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

.reserve-drawer-root.is-open {
  pointer-events: auto;
  visibility: visible;
}

.reserve-drawer-backdrop{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.72);

  backdrop-filter:blur(10px);

  opacity:0;

  transition:opacity .28s ease;
}
.reserve-drawer-root.is-open .reserve-drawer-backdrop {
  opacity: 1;
}

.reserve-drawer{

position:absolute;

left:50%;
top:50%;

transform:
translate(-50%,-50%)
scale(.96);

display:flex;
flex-direction:column;

width:min(95vw,520px);

height:min(88vh,900px);

background:var(--reserve-surface);

border:1px solid
var(--reserve-border-strong);

border-radius:24px;

overflow:hidden;

box-shadow:
0 20px 80px rgba(0,0,0,.7);

transition:
transform .28s ease,
opacity .28s ease;

opacity:0;

}
.reserve-drawer-root.is-open
.reserve-drawer{

opacity:1;

transform:
translate(-50%,-50%)
scale(1);

}
.reserve-drawer__content{

  display:flex;
  flex-direction:column;

  flex:1;

  min-height:0;

}
.reserve-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
   background:#111111;
   border-bottom:1px solid #8f7640;
  border-bottom: 1px solid var(--reserve-border);
  flex-shrink: 0;
}

.reserve-drawer__head h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reserve-drawer__close {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--reserve-text);
  background: transparent;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
}

.reserve-drawer__body {
  flex: 1;

  min-height:0;

  overflow-y:auto;

  overscroll-behavior:contain;

  padding:0.65rem 0.75rem;

  -webkit-overflow-scrolling:touch;
}
.reserve-drawer__empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--reserve-text-muted);
}

.reserve-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reserve-drawer-item {
  padding: 0.6rem 0.65rem;
  background: var(--reserve-bg-elevated);
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
}

.reserve-drawer-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.reserve-drawer-item__name {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reserve-drawer-item__unit-price {
  margin: 0.2rem 0 0;
  font-size: 0.5625rem;
  color: var(--reserve-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reserve-drawer-item__unit-price span {
  color: var(--reserve-accent);
  font-weight: 700;
}

.reserve-drawer-item__remove {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--reserve-text-muted);
  background: transparent;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.reserve-drawer-item__sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}



.reserve-drawer-size-line__controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.reserve-drawer-size-line__unit {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--reserve-text-muted);
}

.reserve-drawer-size-line__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reserve-drawer-item__total {
  margin: 0 0 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reserve-accent);
}

.reserve-drawer-item__total-label {
  color: var(--reserve-text-muted);
  margin-right: 0.35rem;
}

.reserve-drawer-item__payment-wrap {
  margin-bottom: 0.25rem;
}

.reserve-drawer-item__payment{

display:grid;

grid-template-columns:
repeat(3,minmax(0,1fr));

gap:6px;

}
.reserve-drawer-pay {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--reserve-border);
  border-radius: var(--reserve-radius-sm);
  cursor: pointer;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reserve-drawer-pay.is-active {
  border-color: var(--reserve-border-strong);
  background: var(--reserve-accent-dim);
}

.reserve-drawer-pay__input {
  accent-color: var(--reserve-accent);
}

.reserve-drawer-item__meta {
  margin: 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--reserve-border);
}

.reserve-drawer-item__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.12rem 0;
  font-size: 0.625rem;
}

.reserve-drawer-item__meta-row dt {
  margin: 0;
  color: var(--reserve-text-muted);
}

.reserve-drawer-item__meta-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.reserve-drawer-item__meta-row--discount dd {
  color: var(--reserve-green);
}

.reserve-drawer-item__meta-row--discount dd {
  color: var(--reserve-green);
}

.reserve-drawer-item__meta-row--highlight dd {
  color: var(--reserve-accent);
  font-weight: 700;
}

.reserve-drawer-item__meta-row--final dd {
  color: var(--reserve-accent);
}

.reserve-drawer__status {
  margin-bottom:8px;
   grid-column:1 / -1;
  padding: 0.45rem 0.5rem;
  font-size: 0.6875rem;
  border-radius: var(--reserve-radius-sm);
  border: 1px solid var(--reserve-border);
  background: var(--reserve-bg-elevated);
}

.reserve-drawer__status.is-error {
  color: #ffb4a2;
  border-color: rgba(255, 77, 42, 0.45);
}

.reserve-drawer__status.is-success {
  color: var(--reserve-green);
  border-color: rgba(94, 232, 154, 0.35);
}

.reserve-drawer__total-row--highlight dd {
  color: var(--reserve-accent);
  font-weight: 700;
}

.reserve-cta.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

.reserve-drawer__foot{

flex-shrink:0;

padding:12px 16px;

border-top:1px solid var(--reserve-border);

background:
linear-gradient(
180deg,
#0f0f0f 0%,
#141414 100%
);
border-top:1px solid rgba(216,185,104,.35);
display:grid;

grid-template-columns:1fr auto;

gap:10px;

align-items:end;

}
.reserve-drawer__totals{

margin:0;

min-width:0;

}
.reserve-drawer__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.15rem 0;
  font-size: 0.6875rem;
}

.reserve-drawer__total-row dt {
  margin: 0;
  color: var(--reserve-text-muted);
}

.reserve-drawer__total-row dd {
  margin: 0;
  font-weight: 600;
}

.reserve-drawer__total-row--discount dd {
  color: var(--reserve-green);
}

.reserve-drawer__total-row--final {
  padding-top: 0.25rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--reserve-border);
}

.reserve-drawer__total-row--final dd {
  font-size: 0.9375rem;
  color: var(--reserve-accent);
}

body.reserve-drawer-open {
  overflow: hidden;
}

/* Focus */
button:focus-visible,
label:focus-within,
.reserve-video-dialog__close:focus-visible,
.reserve-drawer__close:focus-visible,
.reserve-fab:focus-visible {
  outline: 2px solid var(--reserve-accent);
  outline-offset: 2px;
}

.reserve-price-retail{
  color:#4ade80;
  font-weight:700;
}

.reserve-price-arrow{
  opacity:.7;
  margin:0 4px;
}

.reserve-price-order{
  color:inherit;
  font-weight:700;
}

.reserve-price-discount{
  color:#f87171;
  font-weight:800;
  margin-left:4px;
}

.reserve-card__title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
}

.reserve-card__separator{
  opacity:.45;
  font-weight:400;
}

.reserve-card__subtitle-inline{
  opacity:.75;
  font-size:.9em;
  font-weight:400;
}

.reserve-partner-row__priority[data-priority-level="PRIORITY02"] {

  color:#7dd3fc;

  background:
    linear-gradient(
      135deg,
      rgba(125,211,252,.16),
      rgba(59,130,246,.08)
    );

  border:1px solid rgba(125,211,252,.35);

  box-shadow:
    0 0 10px rgba(125,211,252,.12);

}

.reserve-header{

  margin:0 0 10px;

  padding:10px 14px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  text-align:left;

  border-left:3px solid
    var(--reserve-accent);

  background:
    rgba(255,255,255,.02);

  border-radius:8px;

}

.reserve-header__title{

  margin:0 0 4px;

  font-size:13px;

  font-weight:800;

  letter-spacing:.08em;

  color:#fff;

}

.reserve-header__subtitle{

  margin:0;

  font-size:11px;

  line-height:1.45;

  color:var(--reserve-text-muted);

}

#reserve-toast{

  position:fixed;

  top:80px;

  right:16px;

  z-index:10;

  padding:12px 16px;

  background:#111;

  border:1px solid
  #00ff66;

  border-radius:10px;

  color:#00ff66;

  font-size:12px;

  opacity:0;

  transform:
    translateY(-10px);

  transition:.25s;
   pointer-events:none;

}
#reserve-toast.show{

  opacity:1;

  transform:
    translateY(0);

}

.reserve-drawer-item__head{
display:grid;
grid-template-columns:48px 1fr auto;
gap:10px;
align-items:flex-start;
}

.reserve-drawer-item__thumb{
width:48px;
height:48px;
border-radius:8px;
object-fit:cover;
}

.reserve-drawer-item__sizes{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
margin-top:8px;
}


.reserve-drawer-item__footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:8px;
font-weight:700;
}

.reserve-priority-badge{
display:inline-flex;
padding:2px 6px;
border-radius:6px;
font-size:10px;
font-weight:700;
background:#c9a962;
color:#111;
}

@media (orientation:landscape){

.reserve-drawer-item__sizes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.35rem;
  margin-bottom:0.45rem;
}

}
.reserve-drawer-size-line{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.2rem;

  padding:0.35rem;
  border:1px solid var(--reserve-border);
  border-radius:var(--reserve-radius-sm);
  background:var(--reserve-surface);
}

@media (orientation:landscape){

.reserve-drawer{

width:min(92vw,900px);

height:min(88vh,700px);

}

}

.reserve-drawer-size-line__unit{
  display:none;
}

@media (max-width:699px) and (orientation:portrait){

  .reserve-drawer-size-line{
    border:none;
    background:transparent;
    padding:4px 0;
    border-radius:0;
  }

}
@media (max-width:699px) and (orientation:portrait){

  .reserve-drawer-item__right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }

  .reserve-drawer-item__remove{
    order:-1;
    margin-bottom:8px;
  }

}

@media (min-width:700px){

  .reserve-drawer-item__right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }

  .reserve-drawer-item__remove{
    order:-1;
    margin-bottom:8px;
  }

}
@media (min-width:700px){

  .reserve-drawer-item__head{
    grid-template-columns:64px 1fr auto;
  }

  .reserve-drawer-item__thumb{
    width:64px;
    height:64px;
  }

}

.reserve-drawer-item__before-discount{

  margin-top:2px;

  font-size:10px;

  font-weight:700;

  color:#dc2626;

  text-transform:uppercase;

  letter-spacing:.04em;

}

@media (max-width:699px) and (orientation:portrait){

  .reserve-payment-group{

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:6px;

  }

}
@media (max-width:699px) and (orientation:portrait){

  .reserve-payment-option{

    min-height:60px;
    padding:8px 6px;

  }

}
@media (max-width:699px) and (orientation:portrait){

  .reserve-payment-option__text{

    font-size:11px;

  }

  .reserve-payment-option__hint{

    font-size:9px;

    line-height:1.15;

  }

}

/* ==========================================
   MOBILE LANDSCAPE FINAL
   ========================================== */

@media (max-width:900px) and (orientation:landscape){

  .reserve-drawer{

    width:min(96vw,950px);
    height:min(88vh,700px);

  }

  .reserve-drawer__content{

    display:grid;
    grid-template-columns:minmax(0,1fr) 240px;
    gap:12px;

    flex:1;
    min-height:0;

  }

  .reserve-drawer__body{

    overflow-y:auto;
    min-height:0;
    padding-right:8px;

  }

  .reserve-drawer__foot{

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:10px 12px;

    border-left:1px solid var(--reserve-border);
    border-top:none;

  }

  .reserve-drawer__total-row{

    font-size:11px;
    padding:2px 0;

  }

  .reserve-drawer__total-row--final dd{

    font-size:1.35rem;
    line-height:1;

  }

  .reserve-cta--confirm{

    width:100%;

    min-width:0;

    height:38px;

    padding:0 12px;

    font-size:11px;

    letter-spacing:.08em;

  }

  .reserve-drawer-item__retail,
  .reserve-drawer-item__reserve{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin:2px 0;

    white-space:nowrap;

    line-height:1.1;

  }

  .reserve-drawer-item__retail span,
  .reserve-drawer-item__reserve span{

    font-weight:700;

  }

}


.began-nav-left{

  display:grid;

  place-items:center;

}



.began-nav-eyebrow{

  display:block;

  margin-bottom:8px;

  color:#727272;

  font-size:11px;

  letter-spacing:.24em;

  text-transform:uppercase;

}

.began-nav-subtitle{

  margin-top:14px;

  color:#b0b0b0;

  line-height:1.5;

  font-size:13px;

}



.began-nav-link:hover{

  color:#d4af37;

}

.began-nav-link.active{

  color:#d4af37;

}




/* =====================================
   BEGAN GLOBAL NAV
===================================== */

#began-global-nav{

  position:sticky;
  top:0;
  z-index:100;

 margin-bottom:12px;
  padding:12px 24px;

  border:1.5px solid
    rgba(201,169,98,.15);

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(8,8,8,.98) 0%,
      rgba(12,12,12,.96) 100%
    );

  backdrop-filter:blur(20px);

}

.began-nav-top{

  display:grid;

  grid-template-columns:
    160px
    minmax(0,1fr)
    160px;

  gap:18px;

}


.began-nav-logo{

  
  max-width:100%;

  display:block;

  margin:0 auto;

  object-fit:contain;

}
.began-nav-brand{

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

}

.began-nav-eyebrow{

  margin-bottom:12px;

  font-size:11px;
  letter-spacing:.35em;

  color:#8b8b8b;

}

.began-nav-title{

  margin:0 0 14px;
  font-weight:900;
  letter-spacing:.08em;

  color:#d8b968;

}

.began-nav-subtitle{

  max-width:760px;

  margin:0 0 28px;

  font-size:14px;
  line-height:1.8;

  color:#d0d0d0;

}

.began-nav-center{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:12px;

  width:fit-content;

  margin-left:auto;

  margin-right:auto;

}
.began-nav-link{

  display:flex;

  align-items:center;
  gap:10px;

   min-width:120px;

   height:46px;

   padding:0 18px;

  font-size:13px;
  font-weight:700;

  color:#d8d8d8;

  border:none;

  border-radius:999px;

  background:
    rgba(255,255,255,.03);

  cursor:pointer;

  transition:.25s;

}

.began-nav-link:hover{

  transform:translateY(-2px);

  color:#d8b968;

  background:
    rgba(216,185,104,.08);

}

.began-nav-link.active{

  color:#d8b968;

  background:
    rgba(216,185,104,.12);

  box-shadow:
    inset 0 -2px 0 #d8b968,
    0 0 24px
    rgba(216,185,104,.12);

}

.began-partner-info{

  display:flex;
  flex-direction:column;

  justify-content:center;
  align-items:center;

  width:170px;
  height:170px;

  margin:auto;

  padding:20px;

  border:1px solid rgba(212,175,55,.15);
  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,.05),
      rgba(0,0,0,.4)
    );

}
.began-partner-label{

  display:block;

  text-align:center;

  font-size:11px;
  letter-spacing:4px;

  color:rgba(255,255,255,.55);

  margin-bottom:14px;

}
#began-partner-name{

  display:block;

  text-align:center;

  font-size:28px;
  font-weight:800;

  line-height:1;

  color:#d4af37;

  text-transform:uppercase;

}
/* =====================================
   TABLET
===================================== */

@media(max-width:991px){

  .began-nav-title{

    font-size:20px;

  }

  .began-partner-info{

    height:auto;

    padding:24px;

  }

}



/* =====================================
   COMPACT LANDSCAPE HEADER
===================================== */

@media (max-width:900px)
and (orientation:landscape){

  #began-global-nav{

    padding:10px 14px;

    border-radius:22px;

    margin-bottom:10px;
  }

  .began-nav-top{

    display:grid;

    grid-template-columns:
      90px
      minmax(0,1fr)
      90px;

    gap:12px;

    align-items:start;
  }

  .began-nav-logo{

    width:82px;
  }

  .began-nav-center{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:6px;

    margin:0;
  }

  .began-nav-link{

    min-width:72px;

    height:30px;

    padding:0 10px;

    font-size:9px;
  }

  #began-reserve-info-btn{

    width:100%;

    min-width:0;

    height:30px;

    padding:0 10px;

    margin-top:6px;

    font-size:10px;
  }

  #began-reserve-info-btn span{

    font-size:10px;
  }

  .began-partner-info{

    width:90px;

    height:90px;

    padding:8px;
  }

  .began-partner-label{

    font-size:8px;

    letter-spacing:2px;

    margin-bottom:6px;
  }

  #began-partner-name{

    font-size:14px;
  }

  .began-nav-eyebrow,
  .began-nav-title,
  .began-nav-subtitle{

    display:none;
  }

}
/* =====================================
   COMPACT DESKTOP / LANDSCAPE
===================================== */

#began-global-nav{

  overflow:visible;

}

.began-nav-brand{

  align-items:center;

  text-align:center;
}

.began-nav-eyebrow,
.began-nav-title{

  text-align:center;
}

.began-nav-subtitle{

  max-width:900px;

  margin-left:auto;
  margin-right:auto;

  margin-bottom:16px;

  line-height:1.55;
}


@media (max-width:767px) and (orientation:portrait){

  #began-global-nav{
    display:none;
  }

  #began-mobile-header{

    display:block;

    position:sticky;
    top:0;
    z-index:200;

    padding:16px;

    background:#050505;

    border-bottom:
      1px solid rgba(216,185,104,.12);

    backdrop-filter:blur(20px);
  }

  .began-mobile-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

}
   .began-mobile-user{

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  justify-content:center;

  gap:8px;

  min-height:48px;
      font-size:13px;

}
  .began-mobile-logo{

    width:110px;

    height:auto;

    object-fit:contain;
  }

 
 .began-mobile-notification{

    min-width:42px;

    width:42px;

    height:42px;

    padding:0;

    gap:0;

    flex:0 0 42px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

}

  .began-mobile-nav{

    display:flex;

    gap:10px;

    margin-top:10px;
  }

  .began-mobile-nav .began-nav-link{

    flex:1;

    min-width:0;

    justify-content:center;

    padding:8px 8px;

    font-size:12px;

}

.began-mobile-nav .began-mobile-notification{

    flex:0 0 42px;

}
   
  #began-reserve-info-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:8px;

    padding:8px 10px;

    border-radius:14px;
  }

}

@media(max-width:699px){

  #began-reserve-info-content{

    padding-bottom:90px;

  }

}

/* =====================================
   MOBILE RESERVE OVERLAY
===================================== */

  #began-reserve-overlay{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    align-items:flex-end;

    justify-content:center;

    padding:0;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

  }

  #began-reserve-overlay.is-open{

    display:flex;

    animation:overlayFade .25s ease;

  }

  .began-reserve-overlay-card{

    width:100%;

    max-height:82vh;

    overflow-y:auto;

    padding:28px 22px 110px;

    border-radius:28px 28px 0 0;

    background:
      linear-gradient(
        180deg,
        #111 0%,
        #060606 100%
      );

    border-top:1px solid
      rgba(216,185,104,.18);

    box-shadow:
      0 -20px 60px
      rgba(0,0,0,.55);

    animation:overlaySlide .28s ease;

  }

  .began-reserve-overlay-card h3{

    margin:0 0 14px;

    font-size:26px;

    font-weight:800;

    letter-spacing:.06em;

    color:#d8b968;

  }

  .began-reserve-overlay-card p{

    margin:0 0 22px;

    color:#d0d0d0;

    line-height:1.7;

    font-size:14px;

  }

  .began-reserve-step{

    padding:14px 0;

    border-bottom:
      1px solid
      rgba(255,255,255,.06);

  }

  .began-reserve-step:last-child{

    border-bottom:none;

  }

  .began-reserve-step strong{

    display:block;

    margin-bottom:6px;

    font-size:16px;

    color:#fff;

  }

  .began-reserve-step span{

    display:block;

    color:#bdbdbd;

    line-height:1.6;

    font-size:14px;

  }

  .began-reserve-close-btn{

    width:100%;

    height:54px;

    margin-top:26px;

    border:none;

    border-radius:999px;

    background:#d8b968;

    color:#111;

    font-size:15px;

    font-weight:700;

    letter-spacing:.06em;

    cursor:pointer;

  }

  .began-reserve-close-btn:active{

    transform:scale(.98);

  }


@keyframes overlayFade{

  from{

    opacity:0;

  }

  to{

    opacity:1;

  }

}

@keyframes overlaySlide{

  from{

    transform:translateY(100%);

    opacity:0;

  }

  to{

    transform:translateY(0);

    opacity:1;

  }

}
@media (max-width:767px) and (orientation:portrait){

  #began-reserve-info-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    width:100%;

    min-height:46px;

    padding:0 8px;

    background:
      linear-gradient(
        180deg,
        rgba(15,15,15,.96),
        rgba(5,5,5,.96)
      );

    border:1px solid rgba(216,185,104,.18);

    border-radius:18px;

    color:#ffffff;

    cursor:pointer;

  }

  #began-reserve-info-btn span{

    display:block;

    color:#ffffff;

    font-size:12px;

    line-height:1;

  }

  #began-reserve-info-btn span:first-child{

    flex:1;

    text-align:left;

    font-weight:600;

  }

  #began-reserve-info-btn span:last-child{

    flex-shrink:0;

    font-size:12px;

    color:#d8b968;

  }

}
/* =====================================
   RESERVE INFO BUTTON GLOBAL
===================================== */

#began-reserve-info-btn{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  min-height:46px;

  min-width:180px;

  padding:0 14px;

  background:
    linear-gradient(
      180deg,
      rgba(15,15,15,.96),
      rgba(5,5,5,.96)
    );

  border:1px solid rgba(216,185,104,.18);

  border-radius:18px;

  color:#ffffff;

  cursor:pointer;

  transition:.25s;

  flex:0 0 auto;

}

#began-reserve-info-btn:hover{

  border-color:rgba(216,185,104,.45);

  background:
    rgba(216,185,104,.08);

}

#began-reserve-info-btn span{

  display:block;

  color:#ffffff;

  font-size:12px;

  line-height:1;

}

#began-reserve-info-btn span:first-child{

  flex:1;

  text-align:left;

  font-weight:600;

}

#began-reserve-info-btn span:last-child{

  flex-shrink:0;

  color:#d8b968;

}

/* =====================================
   MOBILE HEADER DEFAULT
===================================== */

#began-mobile-header{
  display:none;
}
/* =====================================
   MOBILE PORTRAIT ONLY
===================================== */

@media (max-width:767px)
and (orientation:portrait){

  #began-mobile-header{
    display:block;
  }

  #began-global-nav{
    display:none;
  }

}

/* =====================================
   DESKTOP + TABLET + LANDSCAPE
===================================== */

@media (min-width:768px),
       (orientation:landscape){

  #began-mobile-header{
    display:none;
  }

}

/* =====================================
   NOTIFICATION BADGE
===================================== */

.began-nav-link,
.began-mobile-notification{

  position:relative;

}

#began-notification-badge{

  position:absolute;

  top:6px;
  right:10px;

  display:flex;

  align-items:center;
  justify-content:center;

  min-width:10px;
  width:10px;
  height:10px;

  padding:0;

  border-radius:50%;

  background:#ef4444;

  box-shadow:
    0 0 0 2px #050505;

}

#began-mobile-notification-badge{

  position:absolute;

  top:2px;
  right:2px;

  display:flex;

  align-items:center;
  justify-content:center;

  min-width:10px;
  width:10px;
  height:10px;

  padding:0;

  border-radius:50%;

  background:#ef4444;

  box-shadow:
    0 0 0 2px #050505;

}
/* =====================================
   HIDE BADGE WHEN NO UNREAD
===================================== */

#began-notification-badge[hidden],
#began-mobile-notification-badge[hidden]{

  display:none !important;

}

/* =====================================
   DRAWER FOOTER OPTIMIZATION
   MOBILE PORTRAIT ONLY
===================================== */

@media (max-width:699px)
and (orientation:portrait){

  .reserve-drawer__foot{

    grid-template-columns:
      minmax(0,1fr)
      120px;

    gap:12px;

    align-items:end;

    padding:10px 12px;

  }

  .reserve-drawer__totals{

    min-width:0;

  }

  .reserve-drawer__total-row{

    gap:8px;

    padding:2px 0;

    font-size:11px;

    align-items:flex-start;

  }

  .reserve-drawer__total-row dt{

    flex:1;

    min-width:0;

    line-height:1.3;

  }

  .reserve-drawer__total-row dd{

    flex-shrink:0;

    text-align:right;

    white-space:nowrap;

    font-size:12px;

  }

  .reserve-drawer__total-row--final{

    margin-top:6px;

    padding-top:8px;

  }

  .reserve-drawer__total-row--final dd{

    font-size:1.1rem;

  }

  .reserve-cta--confirm{

    width:120px;

    min-width:120px;

    height:84px;

    padding:10px;

    border-radius:16px;

    align-self:end;

    font-size:11px;

    line-height:1.35;

    text-align:center;

    white-space:normal;

  }

}

/* =====================================
   RESERVE SKELETON
===================================== */

.reserve-skeleton-card{

  pointer-events:none;

  overflow:hidden;

}

.reserve-skeleton-media{

  width:100%;

  aspect-ratio:4/5;

  background:#141414;

}

.reserve-skeleton-line{

  width:100%;

  height:14px;

  border-radius:8px;

  background:#141414;

  margin-bottom:10px;

}

.reserve-skeleton-analytics{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;

  margin:14px 0;

}

.reserve-skeleton-analytics > div{

  height:56px;

  border-radius:12px;

  background:#141414;

}

.shimmer{

  position:relative;

  overflow:hidden;

}

.shimmer::after{

  content:'';

  position:absolute;

  inset:0;

  transform:translateX(-100%);

  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(255,255,255,.08),

      transparent

    );

  animation:
    reserveShimmer 1.4s infinite;

}

@keyframes reserveShimmer{

  100%{

    transform:translateX(100%);

  }

}


@media (min-width:700px){

  .reserve-grid{

    grid-template-columns:repeat(2,1fr);
  }

}

/* =====================================================
   DESKTOP + TABLET LANDSCAPE
===================================================== */

@media (min-width:1200px){

  .reserve-grid{
    grid-template-columns:1fr;
    max-width:1400px;
    margin-inline:auto;
  }

  .reserve-card{
    padding:24px;
  }

  .reserve-card__desktop-layout{

    display:grid;

    grid-template-columns:
      minmax(540px,620px)
      minmax(340px,1fr)
      360px;

    gap:24px;

    align-items:start;
  }

  /* =========================
     MEDIA
  ========================= */

  .reserve-card__media-wrap{
    min-width:0;
  }

  .reserve-card__media{

    aspect-ratio:4/5;

    max-height:640px;

    overflow:hidden;

    border-radius:24px;
  }

  .reserve-card__thumb{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* =========================
     INFO
  ========================= */

  .reserve-card__desktop-info{

    display:flex;

    flex-direction:column;

    gap:18px;

    min-width:0;
  }

  .reserve-analytics{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;
  }

  .reserve-partners{

    max-height:240px;

    overflow:auto;
  }

  /* =========================
     CHECKOUT
  ========================= */

  .reserve-card__desktop-checkout{

    display:flex;

    flex-direction:column;

    gap:18px;

    min-width:0;
  }

  .reserve-card__action-bar{
    margin-top:auto;
  }

}
/* ======================================================
   PREMIUM MEDIA DESKTOP
====================================================== */

@media (min-width:992px){

  .reserve-card__media{
   
   height:700px;

    aspect-ratio:auto;

    border-radius:24px;

    overflow:hidden;

    background:#050505;
  }

  .reserve-card__thumb{

    width:100%;
    height:100%;
     object-position:center 20%;

    object-fit:cover;

     transition:transform .5s ease;
  }

  .reserve-card:hover .reserve-card__thumb{

    transform:scale(1.03);
  }

  .reserve-gallery{

    padding:14px;

    gap:10px;

    background:#080808;
  }

  .reserve-gallery__thumb{

    width:72px;

    height:72px;

    border-radius:12px;
  }

  .reserve-gallery__thumb img{

    width:72px;

    height:72px;

    object-fit:cover;
  }

}

/* =========================================
   MOBILE LANDSCAPE COMPACT HEADER
   568px - 991px landscape
========================================= */

@media (max-width:991px) and (orientation:landscape){

  #began-mobile-header{

    padding:12px 16px;

    gap:10px;
  }

  /* baris atas */
  .began-mobile-top{

    min-height:56px;

    margin-bottom:8px;

    align-items:center;
  }

  /* logo diperkecil */
  .began-mobile-top img{

    width:110px;

    max-width:110px;
  }

  /* welcome diperkecil */
  .began-mobile-user{

    font-size:13px;
  }

  /* nav lebih rapat */
  .began-mobile-nav{

    gap:8px;

    margin-bottom:8px;
  }

  .began-nav-link{

    min-height:44px;

    padding:0 14px;

    font-size:13px;
  }
 
.began-nav-eyebrow{
    display:none;
  }
   
.began-nav-title{
    display:none;
  }
   
.began-nav-subtitle{
    display:none;
  }
  /* tombol info tampil */
  #began-reserve-info-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:40px;

    padding:0 14px;

    margin:0;
  }
  .began-nav-center{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  width:100%;

  flex-wrap:nowrap;

  overflow-x:auto;

  scrollbar-width:none;

}

.began-nav-center::-webkit-scrollbar{

  display:none;

}   .began-nav-center .began-nav-link{

  flex:1 1 0;

  min-width:0;

  white-space:nowrap;

}

}
/* =====================================================
   MOBILE LANDSCAPE NAV COMPACT
===================================================== */

@media (min-width:700px) and (max-width:991px)
and (orientation:landscape){

  #began-reserve-info-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    margin-top:8px;

    padding:10px 14px;

    border-radius:14px;
  }

}
#began-reserve-info-btn-mobile{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:100%;

  height:40px;

  margin-top:10px;

  padding:0 14px;

  border:1px solid rgba(212,175,55,.35);

  border-radius:16px;

  background:rgba(12,12,12,.92);

  color:#f2f2f2;

  font-size:12px;

  font-weight:700;

  letter-spacing:.02em;

  cursor:pointer;

}

#began-reserve-info-btn-mobile span:last-child{

  color:#d4af37;

  font-size:12px;

  flex:0 0 auto;

}

@media (max-width:900px) and (orientation:landscape){

  .began-nav-top{

    grid-template-columns:
      80px
      minmax(0,1fr)
      80px;

    gap:8px;

    align-items:center;
  }

  .began-nav-center{

    display:grid;

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:6px;

    width:100%;
  }

  .began-nav-link,
  #began-reserve-info-btn{

    min-width:0;

    width:100%;

    height:28px;

    padding:0 6px;

    justify-content:center;

    font-size:12px;
  }

  .began-nav-link span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
  }

  .began-partner-info{

    width:80px;

    height:80px;

    padding:6px;
  }

  #began-partner-name{

    font-size:12px;
  }

  .began-nav-logo{

    width:72px;
  }

}

/* =====================================
   MINI DESKTOP LANDSCAPE
===================================== */

@media (max-width:991px)
and (orientation:landscape){

  .reserve-grid{
    grid-template-columns:1fr;
  }

  .reserve-card{
    padding:12px;
  }

  .reserve-card__desktop-layout{

    display:grid;

    grid-template-columns:
      30%
      32%
      38%;

    gap:12px;

    align-items:start;
  }

  /* =================================
     MEDIA COLUMN
  ================================= */

  .reserve-card__media-wrap{

    min-width:0;
  }

  .reserve-card__media{

    aspect-ratio:3/4;

    height:420px;

    max-height:70vh;

    overflow:hidden;

    border-radius:18px;
  }

  .reserve-card__thumb{

    height:100%;

    width:100%;

    object-fit:cover;
  }

  .reserve-gallery{

    margin-top:8px;

    gap:6px;
  }

  .reserve-gallery__thumb{

    width:52px;
    height:52px;
  }

  /* PRODUCT META TETAP DIBAWAH IMAGE */

  .reserve-card__product-meta{

    margin-top:10px;
  }

  /* =================================
     INFO COLUMN
  ================================= */

  .reserve-card__desktop-info{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-width:0;
  }

  .reserve-production-status,
  .reserve-analytics,
  .reserve-timeline,
  .reserve-partners{

    padding:10px;
  }

  .reserve-analytics{

    grid-template-columns:
      repeat(3,1fr);

    gap:6px;
  }

  .reserve-partners__list{

    display:grid;

    gap:6px;
  }

  /* =================================
     CHECKOUT COLUMN
  ================================= */

  .reserve-card__desktop-checkout{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-width:0;
  }

  .reserve-size-qty-list{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:8px;
  }

  .reserve-size-qty-row{

    min-height:62px;

    padding:8px;
  }

  /* TIDAK MISS CLICK */

  .reserve-qty__btn{

    width:44px;
    height:44px;
  }

  .reserve-payment-group{

    grid-template-columns:1fr;

    gap:8px;
  }

  .reserve-summary{

    padding:10px;
  }

  .reserve-card__action-bar{

    position:static;

    padding-top:10px;
  }

  .reserve-cta{

    min-height:54px;
  }

}

/* =====================================
   PRODUCT CARD BOUNDARY
===================================== */

.reserve-card{

  position:relative;

  border:1px solid rgba(201,169,98,.18);

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.01)
    );

  overflow:hidden;
}

/* subtle premium glow */

.reserve-card::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  pointer-events:none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(201,169,98,.05);

}

/* spacing antar card */

.reserve-grid{

  gap:28px;
}

/* =====================================
   LANDSCAPE COMPACT OPTIMIZATION
===================================== */

@media (max-width:900px)
and (orientation:landscape){

  /* SIZE SECTION */

  .reserve-size-qty-list{

    gap:4px;
  }

  .reserve-size-qty-row{

    padding:0;

    border:none;

    background:transparent;

    gap:6px;

    min-height:32px;
  }

  .reserve-size-qty-row__label{

    min-width:20px;

    font-size:12px;
  }

  /* HILANGKAN BOX LUAR */

  .reserve-qty--compact{

    border:none;

    background:transparent;
  }

  .reserve-qty{

    min-height:32px;

    border:1px solid rgba(255,255,255,.06);

    background:#0b0b0b;
  }

  .reserve-qty__btn{

    min-width:28px;

    min-height:32px;

    font-size:14px;
  }

  .reserve-qty__value{

    min-width:22px;

    font-size:12px;
  }

  /* PAYMENT */

  .reserve-payment-group{

    gap:4px;
  }

  .reserve-payment-option{

    min-height:42px;

    padding:6px 8px;

    gap:4px;
  }

  .reserve-payment-option__text{

    font-size:11px;

    line-height:1.1;
  }

  .reserve-payment-option__hint{

    font-size:9px;

    line-height:1.05;
  }

  .reserve-payment-option__input{

    margin-top:1px;
  }

}

/* floating button RINGKASAN RESERVE */
.reserve-fab__label{

  display:flex;

  align-items:center;

  gap:8px;
}

.reserve-fab__icon{

  width:18px;

  height:18px;

  stroke-width:2.25;
}

.reserve-success-modal{

  position:fixed;
  inset:0;

  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  background:rgba(0,0,0,.75);

  backdrop-filter:blur(12px);

}

.reserve-success-card{

  width:100%;
  max-width:520px;

  border-radius:28px;

  padding:32px;

  background:rgba(20,20,20,.96);

  border:1px solid
    rgba(37,211,102,.15);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:18px;

  text-align:center;

}

.reserve-success-logo{

  width:120px;
  height:auto;

}

.reserve-success-icon svg{

  width:84px;
  height:84px;

  color:#25d366;

  filter:
    drop-shadow(
      0 0 20px
      rgba(37,211,102,.5)
    );

}

.reserve-success-partner{

  display:inline-block;

  padding:8px 16px;

  border-radius:999px;

  background:
    rgba(37,211,102,.12);

  color:#25d366;

  font-size:12px;

  font-weight:700;

  letter-spacing:.15em;

}

.reserve-success-btn{

  width:100%;

  border:none;

  border-radius:16px;

  padding:14px;

  cursor:pointer;

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      #25d366,
      #1da851
    );

  color:#000;

}

@media
(orientation:landscape)
and
(max-height:500px){

  .reserve-success-card{

    max-width:720px;

    flex-direction:row;

    text-align:left;

  }

  .reserve-success-left{

    min-width:180px;

  }

}
body.reserve-success-open{
  overflow:hidden;
}