/* ==========================================================================
   ORDER WHATSAPP ACCESS & DIGITAL PASS MODAL REDESIGN
   Compact ticket-pass style with live WhatsApp bubble preview
   ========================================================================== */

/* Work Orders Table Action Button */
.order-access-row-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  margin-right: 6px !important;
  border: 1px solid #86efac !important;
  border-radius: 6px !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.order-access-row-button:hover {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
  color: #14532d !important;
  transform: translateY(-1px) !important;
}

.order-access-detail-button {
  border-color: #25d366 !important;
  background: #25d366 !important;
  color: #ffffff !important;
}

/* Modal Overlay */
.order-access-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

/* Digital Pass Card Container */
.order-pass-card {
  width: min(490px, 95vw) !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  padding: 0 !important;
  border: none !important;
}

/* Top Pass Header - Obsidian Night-Drive Theme */
.order-pass-header {
  background: linear-gradient(145deg, #09121f 0%, #172439 100%) !important;
  padding: 14px 20px 12px 20px !important;
  color: #ffffff !important;
  position: relative !important;
}

.order-pass-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.order-pass-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
  font-family: var(--sans) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.order-pass-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px #10b981 !important;
}

.order-pass-close {
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
  color: #cbd5e1 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

.order-pass-close:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

/* Hero Section: Folio & PIN */
.order-pass-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.order-pass-folio-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.order-pass-label {
  font-family: var(--sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
}

.order-pass-folio-val {
  font-family: var(--mono) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.03em !important;
}

.order-pass-pin-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.order-pass-pin-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px dashed rgba(56, 189, 248, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.order-pass-pin-box:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #38bdf8 !important;
}

.order-pass-pin-digits {
  font-family: var(--mono) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: #ffffff !important;
}

.order-pass-pin-copy-tag {
  font-family: var(--sans) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

.order-pass-pin-copy-tag.copied {
  background: #10b981 !important;
  color: #ffffff !important;
}

/* Owner & Unit Info Pill */
.order-pass-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: #f1f5f9 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.order-pass-owner {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.order-pass-bullet {
  color: #64748b !important;
}

.order-pass-unit {
  color: #cbd5e1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Clean Ticket Divider */
.order-pass-ticket-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px 0 20px !important;
  background: #ffffff !important;
}

.order-pass-dashed-line {
  flex: 1 !important;
  border-bottom: 1.5px dashed #cbd5e1 !important;
}

.order-pass-ticket-tag {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Pass Body & Form */
.order-pass-body {
  padding: 10px 20px 16px 20px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* WhatsApp Message Live Preview Bubble */
.order-pass-preview-section {
  background: #efeae2 !important;
  border: 1px solid #ded6cc !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}

.order-pass-preview-header {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #075e54 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.order-pass-bubble {
  background: #d9fdd3 !important;
  border-radius: 7px 7px 1px 7px !important;
  padding: 8px 11px 4px 11px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.order-pass-bubble-text {
  margin: 0 !important;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  color: #111b21 !important;
  line-height: 1.4 !important;
}

.order-pass-bubble-text b {
  font-weight: 700 !important;
  color: #0c1317 !important;
}

.wa-unit-preview {
  color: #075e54 !important;
  font-weight: 700 !important;
}

.order-pass-bubble-time {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  font-family: var(--sans) !important;
  font-size: 9.5px !important;
  color: #667781 !important;
  margin-top: 3px !important;
}

.order-pass-bubble-checks {
  color: #53bdeb !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

/* Input Fields */
.order-pass-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.order-pass-vehicle-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.order-pass-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.order-pass-field span {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
}

.order-pass-field input {
  height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.order-pass-field input:focus {
  border-color: #25d366 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15) !important;
}

.order-pass-phone-input-wrap {
  display: flex !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.order-pass-phone-input-wrap:focus-within {
  border-color: #25d366 !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15) !important;
}

.order-pass-phone-flag {
  padding: 0 9px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.order-pass-phone-input-wrap input {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto !important;
  height: 36px !important;
  padding: 0 10px !important;
}

.order-pass-phone-hint {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

/* Error message */
.order-access-error {
  min-height: 16px !important;
  color: #dc2626 !important;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.order-access-error:empty {
  min-height: 0 !important;
}

/* Actions Footer */
.order-pass-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.order-pass-cancel-btn {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  border: 1px solid #cbd5e1 !important;
  background: transparent !important;
  color: #475569 !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.order-pass-cancel-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.order-pass-submit-btn {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  border: none !important;
  background: #25d366 !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.15s ease !important;
}

.order-pass-submit-btn:hover {
  background: #1eb855 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 14px rgba(37, 211, 102, 0.4) !important;
}

/* Mobile Responsiveness */
@media (max-width: 520px) {
  .order-pass-hero {
    grid-template-columns: 1fr !important;
  }
  .order-pass-vehicle-grid {
    grid-template-columns: 1fr !important;
  }
  .order-pass-actions {
    flex-direction: column-reverse !important;
  }
  .order-pass-cancel-btn,
  .order-pass-submit-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}