/* ================================================================
   FibreTel Base Components
   Shared across all sites. References tokens.css.
   ================================================================ */

/* ================================================================
   CARDS
   ================================================================ */
.card-elevated {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
}
.card-filled {
  background: #F6F8FC;
  border-radius: 12px;
}
.card-outlined {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
}
.card-tonal {
  background: var(--md-sys-color-primary-container);
  border-radius: 16px;
  color: var(--md-sys-color-on-primary-container);
}
.card-tonal-internet {
  background: var(--ft-internet-c);
  border-radius: 16px;
  color: #003921;
}

/* Padding utilities */
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.mt-1 { margin-top: 4px; }

/* ================================================================
   CHIPS
   ================================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: .625rem; font-weight: 600;
  letter-spacing: .03em; white-space: nowrap;
}
.chip-success { background: var(--ft-internet-c); color: #005236; }
.chip-warn    { background: var(--ft-voice-c);    color: #4A3500; }
.chip-error   { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.chip-neutral { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.chip-primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.chip-family  { background: var(--ft-family-c); color: #0A3D1F; }
.chip-tv      { background: var(--ft-tv-c);     color: #7A1F20; }

/* ================================================================
   STATUS DOT
   ================================================================ */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.dot-ok      { background: var(--ft-internet); box-shadow: 0 0 0 3px var(--ft-internet-c); }
.dot-warn    { background: var(--ft-voice);    box-shadow: 0 0 0 3px var(--ft-voice-c); }
.dot-error   { background: var(--md-sys-color-error); box-shadow: 0 0 0 3px var(--md-sys-color-error-container); }
.dot-muted   { background: var(--md-sys-color-outline); }

/* ================================================================
   LAYOUT UTILITIES
   ================================================================ */
.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3    { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; }
.stack     { display: flex; flex-direction: column; gap: 12px; }
.row       { display: flex; align-items: center; gap: 8px; }
.row-sb    { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.px-section { padding-left: 20px; padding-right: 20px; }
.section   { padding: 0 20px 16px; }
.section-flat { padding: 0 20px; }
.gap-4     { gap: 16px; }
.mt-4      { margin-top: 16px; }
.mt-6      { margin-top: 24px; }
.mb-4      { margin-bottom: 16px; }
.no-shrink { flex-shrink: 0; }
.fw-600 { font-weight: 600; }
.text-center { text-align: center; }
.wrap-text { white-space: normal; }
.c-outline { color: var(--md-sys-color-outline); }

/* Hero card label (small uppercase) */
.hero-label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65; margin-bottom: 8px;
}

/* Form field label */
.label-field {
  font-size: .75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 6px;
  color: var(--md-sys-color-on-surface-variant);
}

/* List styling */
md-list.rounded { border-radius: 12px; overflow: hidden; }

/* Service list items */
.svc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  transition: background .1s;
}
.svc-item:hover { background: rgba(0,0,0,.03); }
.svc-icon { font-size: 24px; flex-shrink: 0; }

/* Form inputs (grey card style) */
.form-input {
  width: 100%; padding: 14px 16px;
  background: #F6F8FC; border: 1px solid transparent; border-radius: 12px;
  font: 400 .9375rem/1.4 Inter, sans-serif;
  color: var(--md-sys-color-on-surface);
  outline: none; transition: border-color .15s;
}
.form-input:focus { border-color: var(--form-accent, var(--md-sys-color-primary)); border-width: 2px; }
.form-input.error { border-color: var(--md-sys-color-error); }
.form-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .6; }

/* Modal form layout */
.modal-form { padding: 4px 24px 8px; display: flex; flex-direction: column; gap: 12px; }
.modal-form-row { display: flex; gap: 12px; }
.modal-form-field { flex: 1; min-width: 0; }
@media (max-width: 480px) { .modal-form-row { flex-direction: column; } }

/* Select input matching form-input */
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }

/* QR code container — side on desktop, centered on mobile */
.qr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 22px;
}
@media (max-width: 600px) {
  .qr-wrap { width: 100%; padding: 16px 0; }
}

.svc-pill {
  font-size: .5625rem; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

.svc-badge {
  position: absolute; top: 8px; right: 16px;
  font-size: .5625rem; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; white-space: nowrap;
}

.svc-addon {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 52px; cursor: pointer;
  background: #fff; transition: background .1s;
}
.svc-addon:hover { background: rgba(0,0,0,.02); }

/* Hero card */
.hero { border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.hero-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }


   LIST ROWS
   ================================================================ */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.list-row:first-child { padding-top: 0; }
.list-row:last-child  { border-bottom: none; padding-bottom: 0; }
.list-row-label { flex: 1; }
.list-row-value { font-weight: 600; white-space: nowrap; }

/* ================================================================
   AMOUNT
   ================================================================ */
.hero-amount {
  font-size: 3.5rem; font-weight: 300;
  letter-spacing: -2px; line-height: 1;
  color: var(--md-sys-color-on-primary-container);
}
.hero-amount-cents {
  font-size: 1.75rem; font-weight: 300;
  opacity: .65; letter-spacing: -.5px;
}
.amount-positive { color: var(--ft-internet); font-weight: 600; }

/* ================================================================
   TABS
   ================================================================ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ================================================================
   SECTION HEADER
   ================================================================ */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; margin-top: 24px;
}

.section-title {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

/* ================================================================
   PRODUCT ICON (services page)
   ================================================================ */
.product-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Hero card */
.hero { border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.hero-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

   ================================================================ */
.call-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 22px; font-weight: normal; font-style: normal;
  line-height: 1; display: inline-block;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.filter-chip {
  display: inline-flex; align-items: center; height: 32px;
  padding: 0 14px; border-radius: 8px; cursor: pointer;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: background .15s, color .15s;
}
.filter-chip:hover { background: var(--md-sys-color-surface-container-high); }
.filter-chip.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ================================================================

   ================================================================ */
.ticket-chevron {
  font-family: 'Material Symbols Outlined';
  font-size: 20px; color: var(--md-sys-color-outline);
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbol {
  font-family: 'Material Symbols Outlined';
  font-size: 48px; color: var(--ft-internet);
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.status-all-clear {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 40px 20px; text-align: center;
}
.status-icon-wrap {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--ft-internet-c);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.form-stack { display: flex; flex-direction: column; gap: 16px; }

/* ================================================================
   QR PLACEHOLDER
   ================================================================ */
.qr-placeholder {
  width: 140px; height: 140px;
  background: var(--md-sys-color-surface-container);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ================================================================
   DIALOGS
   ================================================================ */
md-dialog {
  --md-dialog-container-color: var(--md-sys-color-surface-container-lowest);
  --md-dialog-container-shape: 28px;
}


/* ================================================================
   PLAN MODAL (bottom sheet on mobile, centered on desktop)
   ================================================================ */
.plan-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.plan-backdrop.open { opacity: 1; pointer-events: all; }

.plan-sheet {
  position: fixed; z-index: 51;
  background: var(--md-sys-color-surface-container-lowest);
  overflow: hidden;
  /* Mobile: bottom sheet */
  bottom: 0; left: 0; right: 0;
  max-height: 85vh;
  border-radius: 24px 24px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2,0,0,1);
}
.plan-backdrop.open .plan-sheet { transform: translateY(0); }

/* Desktop: centered dialog */
@media (min-width: 600px) {
  .plan-sheet {
    bottom: auto; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.95);
    opacity: 0;
    width: min(90vw, 480px);
    max-height: 80vh;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    transition: transform .25s cubic-bezier(.2,0,0,1), opacity .2s;
  }
  .plan-backdrop.open .plan-sheet {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.plan-sheet-handle {
  width: 32px; height: 4px; border-radius: 2px;
  background: var(--md-sys-color-outline-variant);
  margin: 12px auto 4px;
}
@media (min-width: 600px) { .plan-sheet-handle { display: none; } }

.plan-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 8px;
}
.plan-sheet-title { font-size: 1.25rem; font-weight: 600; }

.pm-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left;
  transition: background .1s;
}
.pm-item:hover { background: var(--md-sys-color-surface-container-high); }

.pm-item-radio {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--md-sys-color-outline);
  transition: border-color .15s, box-shadow .15s;
}
.pm-item.selected .pm-item-radio {
  border-color: var(--pm-accent, var(--md-sys-color-primary));
  box-shadow: inset 0 0 0 5px var(--pm-accent, var(--md-sys-color-primary));
}

.pm-item-check {
  width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
  border: 2px solid var(--md-sys-color-outline);
  transition: border-color .15s, background .15s;
  position: relative;
}
.pm-item.selected .pm-item-check {
  border-color: var(--pm-accent, var(--md-sys-color-primary));
  background: var(--pm-accent, var(--md-sys-color-primary));
}
.pm-item.selected .pm-item-check::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pm-item-body { flex: 1; min-width: 0; }
.pm-item-name { font-size: .9375rem; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-item-pill {
  font-size: .625rem; font-weight: 700; letter-spacing: .03em;
  background: var(--pm-accent, var(--md-sys-color-primary)); color: #fff;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.pm-item-desc { font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }

.pm-item-end { text-align: right; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.pm-item-price { font-size: 1rem; font-weight: 600; }
.pm-item-badge {
  display: inline-block;
  font-size: .625rem; font-weight: 700; letter-spacing: .03em;
  background: var(--pm-accent, var(--md-sys-color-primary)); color: #fff;
  padding: 1px 8px; border-radius: 999px;
}

.pm-section-label {
  padding: 12px 20px 6px; font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.pm-card {
  background: #F6F8FC;
  border-radius: 12px;
  margin: 0 16px;
  overflow: hidden;
}

.plan-sheet-footer { padding: 12px 20px 20px; display: flex; gap: 12px; }

/* Modal action button — uses --pm-accent or --form-accent for color */
.modal-btn {
  --md-filled-button-container-color: var(--modal-accent, var(--md-sys-color-primary));
  --md-filled-button-label-text-color: #fff;
  --md-filled-button-disabled-container-color: #D0D4DC;
  --md-filled-button-disabled-label-text-color: #fff;
  --md-filled-button-disabled-container-opacity: 1;
  --md-filled-button-disabled-label-text-opacity: 1;
}

.pm-empty { padding: 32px 20px; text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: .875rem; }

/* ================================================================
   RESPONSIVE (shared)
   ================================================================ */
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr 1fr; }
  .grid-auto > :nth-child(odd):last-child { grid-column: 1 / -1; }
  .hide-sm { display: none !important; }
  .hide-desktop { display: block !important; }
  .hero-amount { font-size: 2.75rem; }
}
.hide-desktop { display: none !important; }
@media (max-width: 480px) {
  .grid-auto { grid-template-columns: 1fr; }
  .section, .section-flat { padding-left: 6px !important; padding-right: 6px !important; }
  [style*="padding:0 20px"] { padding-left: 6px !important; padding-right: 6px !important; }
  .p-5 { padding: 14px; }
  .p-4 { padding: 10px; }
  .card-elevated, .card-filled, .card-outlined { border-radius: 10px; }
  .card-tonal, .card-tonal-internet { border-radius: 12px; }
  .hero { padding: 16px; border-radius: 12px; }
  md-list-item [slot="end"].row { gap: 4px !important; }
  md-list-item [slot="end"] .chip { display: none !important; }
  md-list-item [slot="end"] .t-label-lg { font-size: .75rem !important; }
  md-list-item [slot="start"] { font-size: 20px !important; --md-icon-size: 20px; }
  md-list-item { --md-list-item-leading-space: 12px; --md-list-item-trailing-space: 12px; }
  md-list-item { --md-list-item-one-line-container-height: 48px; --md-list-item-two-line-container-height: 56px; --md-list-item-three-line-container-height: 72px; }
  md-dialog { --md-dialog-container-shape: 20px; }
}