/* pricing.css — TIP.App.Pricing.UI
   Public-facing phone pricing page styles.
   Scoped to elements rendered by this RCL; no MudBlazor overrides here.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --tips-dark:    #252527;
  --tips-dark2:   #2e2f31;
  --tips-header:  #38383c;
  --tips-orange:  #E07B2E;
  --tips-orange2: #c96920;
  --pg-bg:        #f4f5f7;
  --pg-surface:   #ffffff;
  --pg-border:    #e2e4e9;
  --pg-text:      #1a1a1a;
  --pg-muted:     #6b7280;
  --pg-faint:     #9ca3af;
}

html { scroll-behavior: smooth; }

/* ── Page layout ────────────────────────────────────────────────────────── */
.pricing-page-header {
  background:    var(--tips-dark);
  color:         #fff;
  padding:       36px 40px 28px;
  text-align:    center;
}
.pricing-page-header h1 {
  font-size:      2rem;
  font-weight:    800;
  letter-spacing: -0.03em;
  margin-bottom:  6px;
}
.pricing-page-header h1 .accent { color: var(--tips-orange); }
.pricing-page-header p {
  font-size:   0.9rem;
  color:       rgba(255,255,255,0.55);
  max-width:   500px;
  margin:      0 auto;
  line-height: 1.6;
}
.pricing-page-header p a {
  color:           var(--tips-orange);
  text-decoration: none;
  font-weight:     600;
}
.pricing-page-header p a:hover {
  color:           var(--tips-orange2);
  text-decoration: underline;
}

.pricing-content {
  max-width: 1120px;
  margin:    0 auto;
  padding:   32px 24px 72px;
}

/* ── Loading spinner ────────────────────────────────────────────────────── */
.pricing-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         80px 0;
}

/* ── Sticky nav wrapper ─────────────────────────────────────────────────── */
.pricing-sticky-nav {
  position:      sticky;
  top:           0;
  z-index:       100;
  background:    var(--tips-dark);
  border-bottom: 3px solid var(--tips-orange);
}

/* Manufacturer bar */
.pricing-mfr-bar {
  display:          flex;
  gap:              0;
  padding:          0 32px;
  align-items:      stretch;
  justify-content:  center;
  overflow-x:       auto;
  scrollbar-width:  none;
}
.pricing-mfr-bar::-webkit-scrollbar { display: none; }

.pricing-mfr-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         14px 22px;
  font-size:       0.82rem;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.55);
  cursor:          pointer;
  border:          none;
  background:      none;
  border-bottom:   3px solid transparent;
  margin-bottom:   -3px;
  transition:      color 0.15s, border-color 0.15s;
  white-space:     nowrap;
}
.pricing-mfr-btn:hover { color: rgba(255,255,255,0.85); }
.pricing-mfr-btn.active {
  color:              #fff;
  border-bottom-color: var(--tips-orange);
}
.pricing-mfr-count {
  background:   rgba(255,255,255,0.1);
  color:        rgba(255,255,255,0.55);
  border-radius: 999px;
  font-size:    0.65rem;
  padding:      2px 7px;
  font-weight:  600;
}
.pricing-mfr-btn.active .pricing-mfr-count {
  background: var(--tips-orange);
  color:      #fff;
}

/* Brand sub-bar (Yealink only) */
.pricing-brand-bar {
  display:          none;
  gap:              6px;
  padding:          8px 32px;
  background:       var(--tips-dark2);
  flex-wrap:        wrap;
  align-items:      center;
  justify-content:  center;
  border-top:       1px solid rgba(255,255,255,0.07);
}
.pricing-brand-bar.visible { display: flex; }

.pricing-brand-label {
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          rgba(255,255,255,0.3);
  margin-right:   6px;
  white-space:    nowrap;
}
.pricing-brand-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      4px 12px;
  border-radius: 999px;
  border:       1.5px solid rgba(255,255,255,0.15);
  background:   transparent;
  font-size:    0.74rem;
  font-weight:  600;
  cursor:       pointer;
  color:        rgba(255,255,255,0.55);
  transition:   all 0.15s;
  white-space:  nowrap;
}
.pricing-brand-btn:hover {
  border-color: rgba(255,255,255,0.4);
  color:        rgba(255,255,255,0.9);
}
.pricing-brand-btn.active {
  background:   var(--tips-orange);
  border-color: var(--tips-orange);
  color:        #fff;
}
.pricing-brand-btn .pricing-brand-count {
  font-size:  0.62rem;
  font-weight: 700;
  opacity:    0.75;
}

/* ── Manufacturer section ───────────────────────────────────────────────── */
.pricing-mfr-section          { display: none; }
.pricing-mfr-section.visible  { display: block; }

.pricing-mfr-heading {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 20px;
}
.pricing-mfr-heading h2 {
  font-size:      1.35rem;
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--tips-dark);
}
.pricing-mfr-pill {
  background:     var(--tips-orange);
  color:          #fff;
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        3px 10px;
  border-radius:  999px;
}

/* ── Brand block ────────────────────────────────────────────────────────── */
.pricing-brand-block {
  border-radius: 10px;
  overflow:      hidden;
  box-shadow:    0 1px 6px rgba(0,0,0,0.08);
  margin-bottom: 28px;
  background:    var(--pg-surface);
  scroll-margin-top: 88px; /* offset for sticky nav */
}

.pricing-brand-header {
  background:     var(--tips-header);
  color:          #fff;
  padding:        14px 22px;
  font-size:      0.95rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}
.pricing-brand-header .accent { color: var(--tips-orange); }
.pricing-item-count {
  font-size:  0.7rem;
  font-weight: 500;
  color:      rgba(255,255,255,0.45);
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.pricing-table-wrap { overflow-x: auto; }

.pricing-table {
  width:           100%;
  border-collapse: collapse;
}

.pricing-table thead tr {
  background:    #f8f9fb;
  border-bottom: 2px solid var(--pg-border);
}
.pricing-table thead th {
  font-size:      0.67rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--pg-muted);
  padding:        10px 16px;
  text-align:     center;
  white-space:    nowrap;
}
.pricing-table thead th.col-product { text-align: left; width: 130px; }
.pricing-table thead th.col-desc    { text-align: left; }
.pricing-table thead th.col-contract {
  color: var(--tips-orange);
  position: relative;
}
.pricing-table thead th.col-contract::after {
  content:     'BEST VALUE';
  display:     block;
  font-size:   0.55rem;
  color:       var(--tips-orange);
  opacity:     0.75;
  letter-spacing: 0.08em;
  margin-top:  1px;
}

.pricing-table tbody tr {
  border-bottom: 1px solid #f0f1f4;
  transition:    background 0.1s;
}
.pricing-table tbody tr:last-child { border-bottom: none; }
.pricing-table tbody tr:hover { background: #fafbfc; }

.pricing-table td {
  padding:        18px 16px;
  vertical-align: middle;
  font-size:      0.88rem;
}

/* Product cell */
.td-product  { text-align: center; width: 130px; }

.pricing-img-wrap {
  width:         76px;
  height:        76px;
  margin:        0 auto 7px;
  border-radius: 8px;
  background:    #f3f4f6;
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
}
.pricing-img-wrap img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
}

.pricing-product-name {
  font-size:   0.78rem;
  font-weight: 800;
  color:       var(--tips-dark);
  display:     block;
  letter-spacing: 0.02em;
}

/* Description cell */
.td-desc         { color: #444; line-height: 1.55; }
.td-desc ul      { list-style: none; padding: 0; margin: 0; }
.td-desc ul li {
  font-size: 0.83rem;
  padding:   1px 0 1px 14px;
  position:  relative;
  color:     #555;
}
.td-desc ul li::before {
  content:       '';
  position:      absolute;
  left:          3px;
  top:           8px;
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--tips-orange);
}

/* Price cells */
.td-price {
  text-align:  center;
  white-space: nowrap;
  min-width:   96px;
}

.price-msrp {
  font-size:       0.82rem;
  font-weight:     500;
  color:           var(--pg-faint);
  text-decoration: line-through;
  display:         block;
}
.price-main {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--tips-dark);
  display:     block;
}
.price-contract {
  font-size:   1.05rem;
  font-weight: 800;
  color:       var(--tips-orange);
  display:     block;
}
.price-lease-val {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--tips-dark);
  display:     block;
}
.price-lease-unit {
  font-size:   0.65rem;
  font-weight: 500;
  color:       var(--pg-faint);
}
.price-null {
  font-size:  0.75rem;
  font-style: italic;
  color:      var(--pg-faint);
}

/* Contract column highlight */
.td-contract {
  background:  rgba(224, 123, 46, 0.04);
  border-left:  2px solid rgba(224,123,46,0.15);
  border-right: 2px solid rgba(224,123,46,0.15);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.pricing-footer {
  background: var(--tips-dark);
  padding:    22px 24px;
  text-align: center;
}
.pricing-footer-sync {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-size:   0.75rem;
  color:       rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}
.pricing-footer-sync strong {
  color:       rgba(255,255,255,0.7);
  font-weight: 600;
}
.pricing-sync-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #22c55e;
  flex-shrink:   0;
}

/* ── Back-to-top button ─────────────────────────────────────────────────── */
.pricing-back-to-top {
  position:        fixed;
  bottom:          32px;
  right:           32px;
  z-index:         200;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--tips-orange);
  color:           #fff;
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 14px rgba(224,123,46,0.45);
  opacity:         0;
  transform:       translateY(12px);
  transition:      opacity 0.25s, transform 0.25s;
  pointer-events:  none;
}
.pricing-back-to-top.visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}
.pricing-back-to-top:hover {
  background:  var(--tips-orange2);
  box-shadow:  0 6px 18px rgba(224,123,46,0.55);
}
.pricing-back-to-top svg {
  width:              18px;
  height:             18px;
  stroke:             #fff;
  stroke-width:       2.5;
  fill:               none;
  stroke-linecap:     round;
  stroke-linejoin:    round;
}

/* ── Password gate ──────────────────────────────────────────────────────── */

/* Full-viewport dark overlay — matches the pricing page header colour */
.pg-overlay {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-height:       100vh;
  background:       var(--tips-dark);
  padding:          32px 16px;
}

/* Centered card */
.pg-card {
  background:    #ffffff;
  border-radius: 14px;
  padding:       36px 40px 32px;
  width:         100%;
  max-width:     400px;
  box-shadow:    0 24px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2);
  text-align:    center;
}

/* Logo */
.pg-logo-wrap {
  margin-bottom: 24px;
}
.pg-logo {
  max-width:  160px;
  max-height: 50px;
  width:      auto;
  height:     auto;
  object-fit: contain;
  display:    block;
  margin:     0 auto;
}

/* Divider */
.pg-divider {
  height:        3px;
  background:    linear-gradient(90deg, transparent, var(--tips-orange), transparent);
  border-radius: 999px;
  margin:        0 0 24px;
}

/* Heading */
.pg-heading {
  margin-bottom: 22px;
}
.pg-heading h2 {
  font-size:      1.25rem;
  font-weight:    800;
  color:          var(--tips-dark);
  margin:         0 0 6px;
  letter-spacing: -0.02em;
}
.pg-heading p {
  font-size:   0.83rem;
  color:       var(--pg-muted);
  line-height: 1.55;
  margin:      0;
}

/* Field */
.pg-field {
  margin-bottom: 14px;
}

/* Error banner */
.pg-error {
  display:       flex;
  align-items:   center;
  gap:           7px;
  font-size:     0.79rem;
  font-weight:   600;
  color:         #b91c1c;
  background:    #fef2f2;
  border:        1px solid #fecaca;
  border-radius: 7px;
  padding:       8px 11px;
  margin-bottom: 12px;
  text-align:    left;
}

/* Submit button — native button, no MudBlazor override needed */
.pg-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         11px 0;
  background:      var(--tips-orange);
  color:           #fff;
  font-family:     inherit;
  font-size:       0.9rem;
  font-weight:     700;
  letter-spacing:  0.03em;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  box-shadow:      0 3px 10px rgba(224,123,46,0.4);
  transition:      background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.pg-btn:hover:not(:disabled) {
  background:  var(--tips-orange2);
  box-shadow:  0 5px 16px rgba(224,123,46,0.5);
  transform:   translateY(-1px);
}
.pg-btn:active:not(:disabled) {
  transform:  translateY(0);
  box-shadow: 0 2px 6px rgba(224,123,46,0.3);
}
.pg-btn:disabled {
  opacity:    0.45;
  cursor:     not-allowed;
  box-shadow: none;
  transform:  none;
}

.pg-spinner {
  color: #fff !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pricing-page-header { padding: 28px 20px 20px; }
  .pricing-page-header h1 { font-size: 1.5rem; }
  .pricing-mfr-bar  { padding: 0 16px; }
  .pricing-brand-bar { padding: 8px 16px; }
  .pricing-content   { padding: 20px 12px 60px; }
  .pricing-back-to-top { bottom: 20px; right: 20px; }
}

/* ── Admin Page — Sync Log Panel ─────────────────────────────────────────── */
.pa-admin-log {
  background:    #1e1e1e;
  border-radius: 6px;
  min-height:    80px;
  max-height:    320px;
  overflow-y:    auto;
  padding:       12px 16px;
  font-family:   'Consolas', 'Courier New', monospace;
  font-size:     0.78rem;
  line-height:   1.6;
}

.pa-log-empty {
  display: block;
  text-align: center;
  padding: 12px 0;
  color: #6b7280;
}

.pa-log-line {
  display: flex;
  gap: 10px;
  padding: 1px 0;
  color: #d4d4d4;
  white-space: pre-wrap;
  word-break: break-word;
}

.pa-log-time   { color: #6b7280; flex-shrink: 0; }
.pa-log-status { color: #9cdcfe; flex-shrink: 0; min-width: 90px; }
.pa-log-msg    { color: #d4d4d4; }

.pa-log-line.pa-log-error    .pa-log-msg { color: #f48771; }
.pa-log-line.pa-log-complete .pa-log-msg { color: #4ec9b0; }
.pa-log-line.pa-log-warning  .pa-log-msg { color: #dcdcaa; }