/* CheapOTP typography and restrained glass surfaces. Loaded after theme.css. */
:root {
  --font-ui: "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", Arial, sans-serif;
  --type-h1: clamp(2rem, 2.5vw, 2.5rem);
  --type-h2: clamp(1.5rem, 2vw, 1.875rem);
  --type-h3: 1.25rem;
  --type-body: 0.9375rem;
  --type-table: 0.875rem;
  --type-caption: 0.8125rem;
  --text-primary: #172033;
  --text-secondary: #526176;
  --glass-surface: rgba(255,255,255,.7);
  --glass-sheen: radial-gradient(ellipse at 10% 0%, rgba(255,255,255,.26), transparent 52%), linear-gradient(145deg, rgba(255,255,255,.1), transparent 58%);
  --glass-edge: rgba(255,255,255,.88);
  --glass-line: rgba(255,255,255,.7);
  --glass-shadow: 0 8px 32px rgba(23,32,51,.12), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 20px 10px rgba(255,255,255,.16);
}
html[data-theme="dark"] {
  --text-primary: #edf3fc;
  --text-secondary: #bac9db;
  --glass-surface: rgba(130,178,234,.105);
  --glass-sheen: radial-gradient(ellipse at 8% 0%, rgba(196,223,255,.075), transparent 50%), linear-gradient(145deg, rgba(255,255,255,.025), transparent 60%);
  --glass-edge: rgba(210,229,255,.3);
  --glass-line: rgba(195,220,250,.23);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(227,240,255,.24), inset 0 -1px 0 rgba(199,223,255,.06), inset 0 0 20px 10px rgba(206,229,255,.025);
}
html { font-synthesis: none; text-rendering: optimizeLegibility; }
body, .rental-page { font-family: var(--font-ui); font-size: var(--type-body); line-height: 1.6; letter-spacing: 0; color: var(--text-primary); }
:is(h1,h2,h3,h4,.brand,.stats strong) { font-family: var(--font-display); text-wrap: balance; }
h1, .page-heading h1 { font-size: var(--type-h1); font-weight: 800; line-height: 1.18; letter-spacing: -.035em; }
h2, .card h2 { font-size: var(--type-h2); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
h3 { font-size: var(--type-h3); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
p, li, dd, dt { line-height: 1.6; }
small, .eyebrow, .field-caption, .filter-label { font-size: var(--type-caption); line-height: 1.45; }
small { color: var(--text-secondary); }
.eyebrow, .field-caption, .rental-card-kicker { letter-spacing: .055em; }
button, .button, input, select, textarea { font-family: var(--font-ui); font-size: .875rem; line-height: 1.4; letter-spacing: 0; }
button, .button { font-weight: 600; }
input, select, textarea { font-weight: 400; }
table { font-family: var(--font-ui); font-size: var(--type-table); line-height: 1.5; font-variant-numeric: tabular-nums; }
th, td { padding: 11px 12px; vertical-align: middle; }
th { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 700; letter-spacing: .015em; }
td { color: var(--text-primary); font-weight: 500; }
td small { font-size: var(--type-caption); }
.stats strong, .rental-metrics strong, .rental-service-price, .store-service-card strong, .guest-service-price strong, .copy-field strong, .header-balance strong { font-variant-numeric: tabular-nums; }

/* The supplied glass recipe, sized by content so dashboard cards stay responsive. */
.glass-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glass-sheen), var(--glass-surface);
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  backdrop-filter: blur(5px) saturate(115%);
  color: var(--text-primary);
}
.glass-card::before, .glass-card::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.glass-card::before { inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-edge), transparent); }
.glass-card::after { inset: 0 auto 0 0; width: 1px; background: linear-gradient(180deg, var(--glass-edge), transparent 65%, var(--glass-edge)); }
.glass-card > * { position: relative; z-index: 1; }
html[data-theme="dark"] .glass-card { background: var(--glass-sheen), var(--glass-surface); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
/* Legacy theme selectors target cards by page type and otherwise hide the glass surface. */
html[data-theme="dark"] body .glass-card.glass-card {
  background: var(--glass-sheen), var(--glass-surface);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
}
html[data-theme="dark"] body .rental-order-card.waiting { border-inline-start: 4px solid #79aaff; }
html[data-theme="dark"] body .rental-order-card.received { border-inline-start: 4px solid var(--success); }
html[data-theme="dark"] body .rental-order-card.cancelled { border-inline-start: 4px solid var(--danger); }

/* Dense catalog and order data need a readable floor, especially on phones. */
.rental-sidebar-heading .eyebrow { font-size: .75rem; }
.rental-sidebar-heading h1 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; }
.rental-filters .filter-label { font-size: .75rem; line-height: 1.45; }
.rental-filters .catalog-count, .rental-selection, .rental-orders-heading span, .rental-card-actions, .rental-metrics span { font-size: .8125rem; line-height: 1.45; }
.rental-service-name { font-size: .875rem; font-weight: 600; }
.rental-service-price { font-size: .8125rem; font-weight: 600; }
.rental-card-kicker, .field-caption { font-size: .75rem; line-height: 1.4; }
.copy-button, .store-preview-top, .store-preview-row small, .store-preview-row strong, .store-card-country, .store-card-link, .guest-service-price span { font-size: .8125rem; line-height: 1.4; }
.rental-main-top h2 { letter-spacing: -.03em; }
.store-hero-copy h1 { letter-spacing: -.04em; }
.store-preview h2, .guest-catalog-intro h2, .rental-main-top h2, .store-section-head h2 { font-family: var(--font-display); }
.store-guide-grid p, .guest-info-grid p, .compact-empty p { font-size: .875rem; line-height: 1.55; }
html[data-theme="dark"] :is(.rental-sidebar .filter-label,.rental-card-kicker,.field-caption,.rental-metrics span,.rental-orders-heading span,.rental-card-actions,.store-preview-top,.store-preview-row small,.guest-catalog-intro p,.guest-service-detail p,.store-guide-grid p,.guest-info-grid p) { color: var(--text-secondary); }
@media (max-width: 720px) {
  table { font-size: .8125rem; }
  th, td { padding: 10px 11px; }
  .rental-metrics span { font-size: .75rem; line-height: 1.4; }
  .rental-service-name { font-size: .875rem; }
  .rental-service-price { font-size: .8125rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .glass-card { background: #19273c; }
  html:not([data-theme="dark"]) .glass-card { background: #fff; }
}