/*
 * V3CS Booking — Checkout Page Stylesheet
 *
 * Covers: GCash payment pending state, countdown ring, session summary,
 *         success/failure/expired/cancelled states, mock dev mode.
 *
 * Color system:
 *   --v3cs-co-accent   #007AFF  GCash blue
 *   --v3cs-co-gold     #C6A15B  V3CS gold
 *   --v3cs-co-success  #10B981  Green
 *   --v3cs-co-error    #EF4444  Red
 *
 * @package V3CS_Booking
 * @version 6.0.0
 */

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
  --v3cs-co-accent:   #007AFF;
  --v3cs-co-gold:     #C6A15B;
  --v3cs-co-success:  #10B981;
  --v3cs-co-error:    #EF4444;
  --v3cs-co-warning:  #F59E0B;
  --v3cs-co-expired:  #6B7280;
  --v3cs-co-bg:       #F9FAFB;
  --v3cs-co-card-bg:  #FFFFFF;
  --v3cs-co-radius:   12px;
  --v3cs-co-shadow:   0 4px 24px rgba(0,0,0,.08);
}

/* ==========================================================================
   CHECKOUT PAGE WRAPPER
   ========================================================================== */

#v3cs-checkout-page {
  max-width:      520px;
  margin-inline:  auto;
  padding:        var(--v3cs-space-8, 40px) var(--v3cs-space-5, 20px);
  font-family:    var(--v3cs-font-body, 'Montserrat', sans-serif);
}

.v3cs-co {
  background:    var(--v3cs-co-card-bg);
  border-radius: var(--v3cs-co-radius);
  box-shadow:    var(--v3cs-co-shadow);
  overflow:      hidden;
  padding:       var(--v3cs-space-8, 40px) var(--v3cs-space-7, 32px);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--v3cs-space-6, 24px);
  text-align:    center;
}

/* ==========================================================================
   GCASH BRANDING
   ========================================================================== */

.v3cs-co__brand {
  display:     flex;
  align-items: center;
  gap:         var(--v3cs-space-3, 12px);
}

/* GCash logo — blue pill wordmark */
.v3cs-co__gcash-logo {
  width:         80px;
  height:        30px;
  background:    var(--v3cs-co-accent);
  border-radius: 6px;
  position:      relative;
}

.v3cs-co__gcash-logo::after {
  content:        'GCash';
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content:center;
  color:          #fff;
  font-weight:    800;
  font-size:      12px;
  letter-spacing: .04em;
}

.v3cs-co__brand-name {
  font-size:    .9rem;
  font-weight:  600;
  color:        var(--v3cs-co-accent);
}

/* GCash button icon */
.v3cs-co__gcash-icon {
  display:        inline-block;
  width:          20px;
  height:         20px;
  background:     #fff;
  border-radius:  4px;
  margin-right:   var(--v3cs-space-2, 8px);
  vertical-align: middle;
  flex-shrink:    0;
}

/* ==========================================================================
   COUNTDOWN TIMER RING
   ========================================================================== */

.v3cs-co__timer {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--v3cs-space-3, 12px);
}

.v3cs-co__timer-circle {
  position:   relative;
  width:      120px;
  height:     120px;
}

.v3cs-co__timer-ring {
  width:        100%;
  height:       100%;
  transform:    rotate(-90deg);
}

.v3cs-co__timer-track {
  fill:         none;
  stroke:       #E5E7EB;
  stroke-width: 6;
}

.v3cs-co__timer-fill {
  fill:                none;
  stroke:              var(--v3cs-co-accent);
  stroke-width:        6;
  stroke-linecap:      round;
  stroke-dasharray:    283;
  stroke-dashoffset:   0;
  transition:          stroke-dashoffset 1s linear, stroke .3s;
}

.v3cs-co__timer-label {
  position:       absolute;
  inset:          0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            2px;
}

.v3cs-co__timer-label span {
  font-size:   1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.v3cs-co__timer-label small {
  font-size:  .55rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:      #9CA3AF;
}

.v3cs-co__timer-hint {
  font-size:    .8125rem;
  color:        #6B7280;
  margin:       0;
  max-width:    280px;
}

/* ==========================================================================
   BOOKING SUMMARY
   ========================================================================== */

.v3cs-co__summary {
  width:        100%;
  text-align:   left;
  background:   var(--v3cs-co-bg);
  border-radius: var(--v3cs-radius-md, 8px);
  padding:       var(--v3cs-space-5, 20px);
}

.v3cs-co__summary-title {
  font-size:   .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       #9CA3AF;
  margin:      0 0 var(--v3cs-space-3, 12px);
}

.v3cs-co__session {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--v3cs-space-2, 8px) 0;
  border-bottom:   1px solid #E5E7EB;
  gap:             var(--v3cs-space-3, 12px);
  font-size:       .875rem;
}

.v3cs-co__session:last-child { border-bottom: none; }

.v3cs-co__session-date { font-weight: 600; }
.v3cs-co__session-time { color: #6B7280; }

.v3cs-co__total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     var(--v3cs-space-3, 12px);
  font-size:       .875rem;
  color:           #6B7280;
}

.v3cs-co__total strong { color: #111; }

.v3cs-co__total--amount {
  padding-top: var(--v3cs-space-3, 12px);
  border-top:  2px solid #E5E7EB;
  margin-top:  var(--v3cs-space-2, 8px);
}

.v3cs-co__total--amount strong {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--v3cs-co-accent);
}

.v3cs-co__total--paid .v3cs-co__total--amount strong {
  color: var(--v3cs-co-success);
}

/* ==========================================================================
   ACTION AREA
   ========================================================================== */

.v3cs-co__actions {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--v3cs-space-3, 12px);
  width:          100%;
}

.v3cs-co__pay-btn {
  width:           100%;
  justify-content: center;
  background:      var(--v3cs-co-accent);
  color:           #fff;
  border:          none;
  padding:         14px 24px;
  font-size:       1rem;
  font-weight:     700;
  border-radius:   8px;
  text-decoration: none;
  display:         flex;
  align-items:     center;
  transition:      background .15s, transform .1s;
  cursor:          pointer;
}

.v3cs-co__pay-btn:hover {
  background:  #0056D2;
  transform:   translateY(-1px);
  color:       #fff;
}

.v3cs-co__pay-hint {
  font-size:  .75rem;
  color:      #9CA3AF;
  margin:     0;
}

.v3cs-co__cancel-btn {
  font-size:  .8125rem;
  color:      #9CA3AF;
  border:     none;
  background: none;
  cursor:     pointer;
  text-decoration: underline;
  padding:    4px;
}

.v3cs-co__cancel-btn:hover { color: var(--v3cs-co-error); }

.v3cs-co__status-note {
  font-size:  .75rem;
  color:      #9CA3AF;
  margin:     0;
}

/* ==========================================================================
   SUCCESS STATE
   ========================================================================== */

.v3cs-co--success .v3cs-co__success-icon svg { stroke: var(--v3cs-co-success); }

.v3cs-co__success-title {
  font-family: var(--v3cs-font-heading, 'Cormorant Garamond', serif);
  font-size:   2rem;
  font-weight: 300;
  margin:      0;
}

.v3cs-co__success-msg {
  font-size:   .9375rem;
  color:       #6B7280;
  margin:      0;
  line-height: 1.6;
}

.v3cs-co__refs { width: 100%; text-align: left; }

.v3cs-co__refs h3 {
  font-size:   .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:       #9CA3AF;
  margin:      0 0 var(--v3cs-space-2, 8px);
}

.v3cs-co__ref-card {
  background:    var(--v3cs-color-black, #111);
  border-radius: 6px;
  padding:       var(--v3cs-space-4, 16px) var(--v3cs-space-5, 20px);
  margin-bottom: var(--v3cs-space-2, 8px);
}

.v3cs-co__ref-code {
  font-family:    monospace;
  font-size:      1.25rem;
  font-weight:    700;
  letter-spacing: .1em;
  color:          var(--v3cs-co-gold, #C6A15B);
}

.v3cs-co__sessions-table {
  width:     100%;
  text-align:left;
}

.v3cs-co__sessions-table table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .8125rem;
}

.v3cs-co__sessions-table th,
.v3cs-co__sessions-table td {
  padding:       8px 10px;
  border-bottom: 1px solid #E5E7EB;
  text-align:    left;
}

.v3cs-co__sessions-table th {
  font-size:      .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          #9CA3AF;
}

.v3cs-co__total--paid {
  background:    rgba(16,185,129,.07);
  border:        1px solid rgba(16,185,129,.25);
  border-radius: 6px;
  padding:       var(--v3cs-space-4, 16px);
  width:         100%;
  flex-direction: column;
  align-items:   flex-start;
  gap:           4px;
}

.v3cs-co__total--paid strong {
  font-size:   1.5rem;
  color:       var(--v3cs-co-success);
}

.v3cs-co__channel-badge {
  font-size:  .75rem;
  color:      var(--v3cs-co-accent);
  font-weight: 600;
}

.v3cs-co__next-steps {
  width:     100%;
  text-align:left;
  background: #F9FAFB;
  border-radius: 8px;
  padding:   var(--v3cs-space-5, 20px);
}

.v3cs-co__next-steps h3 {
  margin:     0 0 var(--v3cs-space-3, 12px);
  font-size:  .875rem;
  font-weight: 700;
}

.v3cs-co__next-steps ol {
  margin:     0;
  padding-left: var(--v3cs-space-5, 20px);
  font-size:  .8125rem;
  color:      #6B7280;
  line-height: 2;
}

/* ==========================================================================
   FAILURE / EXPIRED / CANCELLED STATES
   ========================================================================== */

.v3cs-co--failed h1    { color: var(--v3cs-co-error);   }
.v3cs-co--expired h1   { color: var(--v3cs-co-expired); }
.v3cs-co--cancelled h1 { color: #374151; }

.v3cs-co__failed-icon svg   { stroke: var(--v3cs-co-error);   }
.v3cs-co__expired-icon      { font-size: 3rem; }

/* ==========================================================================
   MOCK / TEST MODE
   ========================================================================== */

.v3cs-co__mock-banner {
  width:         100%;
  background:    #FEF9C3;
  border:        1px solid #FDE68A;
  border-radius: 6px;
  padding:       var(--v3cs-space-3, 12px) var(--v3cs-space-4, 16px);
  font-size:     .8125rem;
  color:         #92400E;
}

.v3cs-co__mock-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--v3cs-space-3, 12px);
  width:          100%;
}

/* ==========================================================================
   STATUS BADGES (for admin payment list)
   ========================================================================== */

.v3cs-payment-status {
  display:       inline-block;
  padding:       2px 10px;
  border-radius: 999px;
  font-size:     11px;
  font-weight:   600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.v3cs-payment-status--pending  { background:#FEF9C3; color:#854D0E; }
.v3cs-payment-status--paid     { background:#DCFCE7; color:#166534; }
.v3cs-payment-status--failed   { background:#FEE2E2; color:#991B1B; }
.v3cs-payment-status--refunded { background:#DBEAFE; color:#1E40AF; }
.v3cs-payment-status--expired  { background:#F3F4F6; color:#6B7280; }

/* Reservation status */
.v3cs-reservation-status--holding  { background:#FEF9C3; color:#854D0E; }
.v3cs-reservation-status--paid     { background:#DCFCE7; color:#166534; }
.v3cs-reservation-status--failed   { background:#FEE2E2; color:#991B1B; }
.v3cs-reservation-status--expired  { background:#F3F4F6; color:#6B7280; }
.v3cs-reservation-status--cancelled{ background:#F3F4F6; color:#6B7280; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 540px) {
  #v3cs-checkout-page { padding: var(--v3cs-space-4, 16px); }
  .v3cs-co            { padding: var(--v3cs-space-5, 20px); }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .v3cs-co__timer-fill { transition: none; }
}

/* ==========================================================================
   PHASE 9 — CHECKOUT LUXURY REFINEMENTS
   ========================================================================== */

/* Timer ring — smoother arc */
.v3cs-co__timer-fill {
  transition: stroke-dashoffset 1s linear,
              stroke 400ms cubic-bezier(0.25,0.46,0.45,0.94);
}

/* GCash button — brand blue accent retained, premium hover */
.v3cs-co__pay-btn {
  letter-spacing: 0.08em;
  transition:
    background-color 260ms cubic-bezier(0.25,0.46,0.45,0.94),
    transform        200ms ease,
    box-shadow       260ms cubic-bezier(0.25,0.46,0.45,0.94);
}

.v3cs-co__pay-btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,122,255,0.28);
}

/* Success icon — animated stroke */
.v3cs-co--success .v3cs-co__success-icon svg {
  animation: v3cs-checkmark 600ms cubic-bezier(0.25,0.46,0.45,0.94) both;
}

@keyframes v3cs-checkmark {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}

/* Booking reference card — premium look */
.v3cs-co__ref-card {
  animation: v3cs-ref-appear 500ms cubic-bezier(0.25,0.46,0.45,0.94) 200ms both;
}

@keyframes v3cs-ref-appear {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Checkout container — breathing room */
#v3cs-checkout-page {
  padding-block: clamp(40px, 6vw, 80px);
}