/* ==========================================================================
   TV Sales Branch Selector v1.3.0 — frontend styles
   ========================================================================== */

/* ------------------------------------------------------------------
   Dropdown widget
   ------------------------------------------------------------------ */

.tvbs-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

.tvbs-selector__icon {
    display: inline-flex;
    align-items: center;
    color: inherit;
    opacity: 0.85;
    flex-shrink: 0;
}

.tvbs-selector__icon svg { width: 18px; height: 18px; display: block; }

.tvbs-selector__label {
    font-size: 0.875em;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
}

.tvbs-selector__wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tvbs-selector__select {
    appearance: auto;
    padding: 7px 32px 7px 10px;
    font-size: 0.875em;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
    color: inherit;
    cursor: pointer;
    min-width: 170px;
    transition: border-color 0.2s, background 0.2s;
}

.tvbs-selector__select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.2);
}

.tvbs-selector__select:disabled { opacity: 0.55; cursor: wait; }

.widget .tvbs-selector__select,
.tvbs-selector--light .tvbs-selector__select {
    border-color: #ccc;
    background: #fff;
    color: #333;
}

.tvbs-selector__spinner {
    display: none;
    position: absolute;
    right: 8px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tvbs-spin 0.6s linear infinite;
    pointer-events: none;
}

.tvbs-selector__spinner.tvbs-spinner--active { display: inline-block; }

@keyframes tvbs-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
   Active-branch notice bar
   ------------------------------------------------------------------ */

.tvbs-branch-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: #1d4ed8;
    color: #fff;
    font-size: 0.875em;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.is-admin-bar-showing .tvbs-branch-bar { top: 32px; }
@media (max-width: 782px) { .is-admin-bar-showing .tvbs-branch-bar { top: 46px; } }

.tvbs-bar__icon  { font-size: 1em; flex-shrink: 0; }
.tvbs-bar__text  { flex: 1; }
.tvbs-bar__text strong { color: #fbbf24; }

.tvbs-bar__clear {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    color: #fff;
    font-size: 0.8em;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    font-family: inherit;
}

.tvbs-bar__clear:hover { background: rgba(255,255,255,0.3); }
body.tvbs-bar-visible  { padding-top: 38px; }

/* ------------------------------------------------------------------
   On-load popup overlay
   ------------------------------------------------------------------ */

.tvbs-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.tvbs-popup-overlay--visible { opacity: 1; }
body.tvbs-popup-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Popup card
   ------------------------------------------------------------------ */

.tvbs-popup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    outline: none;
    transform: translateY(24px);
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
}

.tvbs-popup-overlay--visible .tvbs-popup { transform: translateY(0); }

.tvbs-popup__close {
    position: absolute;
    top: 14px; right: 16px;
    background: none;
    border: none;
    font-size: 1.2em;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.tvbs-popup__close:hover { background: #f3f4f6; color: #111; }

.tvbs-popup__header {
    text-align: center;
    padding: 32px 32px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.tvbs-popup__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #eff6ff;
    color: #1d4ed8;
    margin-bottom: 14px;
}

.tvbs-popup__title {
    font-size: 1.4em;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px;
    line-height: 1.2;
}

.tvbs-popup__subtitle {
    font-size: 0.9em;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Two-step popup — step containers
   ------------------------------------------------------------------ */

.tvbs-popup__step { outline: none; }

/* Slide-in enter animation (added/removed by JS) */
@keyframes tvbs-step-enter {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tvbs-popup__step--enter {
    animation: tvbs-step-enter 0.28s cubic-bezier(0.16,1,0.3,1) both;
}

/* ------------------------------------------------------------------
   Step 1 — Province list
   ------------------------------------------------------------------ */

.tvbs-province-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    /* No horizontal padding — rows are full-width and handle their own */
}

.tvbs-province-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 24px;
    background: none;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92em;
    text-align: left;
    color: #111827;
    transition: background 0.12s;
}

.tvbs-province-row:last-child { border-bottom: none; }

.tvbs-province-row:hover { background: #f0f5ff; }

.tvbs-province-row:focus {
    outline: none;
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #1d4ed8;
}

.tvbs-province-row--current {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #1d4ed8;
}

.tvbs-province-row__dot {
    color: #1d4ed8;
    display: flex;
    flex-shrink: 0;
    opacity: 0.7;
}

.tvbs-province-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tvbs-province-row__name {
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tvbs-province-row__count {
    font-size: 0.78em;
    color: #6b7280;
    font-weight: 400;
}

.tvbs-province-row__active-badge {
    font-size: 0.72em;
    font-weight: 700;
    background: #1d4ed8;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tvbs-province-row__chevron {
    color: #9ca3af;
    font-size: 1.2em;
    font-weight: 300;
    flex-shrink: 0;
    margin-left: 4px;
}

/* ------------------------------------------------------------------
   Step 1 — Geolocation row
   ------------------------------------------------------------------ */

.tvbs-popup__geo-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

.tvbs-popup__geo-divider {
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

.tvbs-popup__geo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 0.85em;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tvbs-popup__geo-btn:hover { border-color: #1d4ed8; color: #1d4ed8; background: #eff6ff; }

.tvbs-popup__geo-btn--loading {
    opacity: 0.6;
    cursor: wait;
}

.tvbs-popup__geo-btn--loading svg {
    animation: tvbs-spin 0.8s linear infinite;
}

.tvbs-popup__geo-btn--done {
    border-color: #16a34a;
    color: #16a34a;
    background: #f0fdf4;
    cursor: default;
}

/* ------------------------------------------------------------------
   Step 2 — Navigation bar (back button + province label)
   ------------------------------------------------------------------ */

.tvbs-popup__step-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #f9fafb;
}

.tvbs-popup__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.82em;
    font-weight: 600;
    color: #1d4ed8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.tvbs-popup__back-btn:hover { background: #eff6ff; }
.tvbs-popup__back-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,0.2); }

.tvbs-popup__step-province {
    flex: 1;
    font-size: 0.92em;
    font-weight: 700;
    color: #111827;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   Step 2 — Branch cards (full-width list style)
   ------------------------------------------------------------------ */

.tvbs-popup__branches {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    /* overflow handled by parent .tvbs-popup scroll */
}

.tvbs-popup__branch {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    font-family: inherit;
    font-size: 0.9em;
    color: #111827;
    position: relative;
}

.tvbs-popup__branch:last-child { border-bottom: none; }

.tvbs-popup__branch:hover { background: #f0f5ff; }

.tvbs-popup__branch:focus {
    outline: none;
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #1d4ed8;
}

.tvbs-popup__branch--selected {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #1d4ed8;
}

.tvbs-popup__branch-pin {
    color: #1d4ed8;
    flex-shrink: 0;
    display: flex;
    align-self: flex-start;
    margin-top: 2px;
}

.tvbs-popup__branch-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tvbs-popup__branch-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.95em;
    line-height: 1.3;
}

.tvbs-popup__branch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    align-items: center;
}

.tvbs-popup__branch-address {
    font-size: 0.78em;
    color: #6b7280;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tvbs-popup__branch-count {
    font-size: 0.75em;
    color: #6b7280;
}

.tvbs-popup__branch-distance {
    font-size: 0.75em;
    color: #16a34a;
    font-weight: 600;
    display: none; /* shown by JS after geolocation */
}

.tvbs-popup__branch-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 2px;
}

.tvbs-popup__branch-phone {
    font-size: 0.75em;
    color: #374151;
    text-decoration: none;
}

.tvbs-popup__branch-phone:hover { color: #1d4ed8; text-decoration: underline; }

.tvbs-popup__branch-check {
    flex-shrink: 0;
    font-size: 1em;
    color: #1d4ed8;
    font-weight: 700;
    margin-left: 6px;
}

.tvbs-popup__branch-arrow {
    flex-shrink: 0;
    font-size: 1.1em;
    font-weight: 300;
    color: #9ca3af;
    margin-left: 6px;
}

/* ------------------------------------------------------------------
   Step 1 footer — "Browse all stores" link
   ------------------------------------------------------------------ */

.tvbs-popup__footer {
    padding: 16px 24px 24px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

.tvbs-popup__all-stores {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.82em;
    font-weight: 400;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tvbs-popup__all-stores:hover { color: #1d4ed8; background: #eff6ff; text-decoration: none; }

/* ------------------------------------------------------------------
   Product page availability panel
   ------------------------------------------------------------------ */

.tvbs-availability {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin: 20px 0;
    font-size: 0.9em;
}

.tvbs-availability__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    color: #111;
    text-align: left;
    transition: background 0.15s;
}

.tvbs-availability__toggle:hover { background: #f0f5ff; }

.tvbs-availability__toggle-icon { color: #1d4ed8; display: flex; }

.tvbs-availability__chevron {
    margin-left: auto;
    font-size: 0.75em;
    color: #9ca3af;
}

.tvbs-availability__body { overflow-x: auto; }

.tvbs-availability__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.tvbs-availability__table th {
    background: #f3f4f6;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    white-space: nowrap;
}

.tvbs-availability__table td {
    padding: 10px 12px;
    border-top: 1px solid #f0f0f0;
    vertical-align: middle;
}

.tvbs-av__row--selected td { background: #eff6ff; }

.tvbs-av__name a { font-weight: 600; color: #1d4ed8; text-decoration: none; }
.tvbs-av__name a:hover { text-decoration: underline; }

.tvbs-av__you {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 600;
    background: #1d4ed8;
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}

.tvbs-av__province { color: #6b7280; font-size: 0.875em; }
.tvbs-av__qty      { font-weight: 600; text-align: right; }

.tvbs-av__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
}

.tvbs-av__badge--in      { background: #d1fae5; color: #065f46; }
.tvbs-av__badge--low     { background: #fef3c7; color: #92400e; }
.tvbs-av__badge--out     { background: #fee2e2; color: #991b1b; }
.tvbs-av__badge--unknown { background: #f3f4f6; color: #6b7280; }

.tvbs-av__shop-btn {
    background: none;
    border: 1px solid #1d4ed8;
    color: #1d4ed8;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.8em;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.tvbs-av__shop-btn:hover { background: #1d4ed8; color: #fff; }

/* ------------------------------------------------------------------
   Store landing page
   ------------------------------------------------------------------ */

.tvbs-store-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }

.tvbs-store-hero {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    color: #fff;
    border-radius: 0 0 12px 12px;
    padding: 36px 40px;
    margin-bottom: 32px;
}

.tvbs-store-hero__inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tvbs-store-hero__icon {
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 72px; height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tvbs-store-hero__name { font-size: 2em; font-weight: 700; margin: 0 0 4px; }
.tvbs-store-hero__province { font-size: 0.95em; opacity: 0.8; }

.tvbs-store-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}

/* Info sidebar */
.tvbs-store-info { display: flex; flex-direction: column; gap: 16px; }

.tvbs-info-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px 20px;
}

.tvbs-info-card--count {
    background: #eff6ff;
    border-color: #bfdbfe;
    font-size: 0.9em;
    color: #1e3a8a;
    text-align: center;
}

.tvbs-info-card--count strong { font-size: 2em; display: block; color: #1d4ed8; }

.tvbs-info-card__heading {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tvbs-contact-list { margin: 0; padding: 0; list-style: none; }

.tvbs-contact-list li { padding: 5px 0; font-size: 0.9em; border-bottom: 1px solid #f0f0f0; }
.tvbs-contact-list li:last-child { border-bottom: none; }
.tvbs-contact-list a { color: #1d4ed8; text-decoration: none; }
.tvbs-contact-list a:hover { text-decoration: underline; }

.tvbs-contact-list__wa a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
}

.tvbs-hours-table { width: 100%; font-size: 0.88em; border-collapse: collapse; }
.tvbs-hours-table td { padding: 5px 0; }
.tvbs-hours-table td:first-child { color: #6b7280; width: 40%; }
.tvbs-hours-table td:last-child  { font-weight: 500; }
.tvbs-hours-table tr:not(:last-child) td { border-bottom: 1px solid #f0f0f0; }

/* Map */
.tvbs-store-map { border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.tvbs-store-map iframe { display: block; }

.tvbs-store-products__heading {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 16px;
}

.tvbs-store-products__heading span { color: #1d4ed8; }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 720px) {
    /* Popup card */
    .tvbs-popup        { border-radius: 10px 10px 0 0; max-height: 92vh; }
    .tvbs-popup-overlay { align-items: flex-end; padding: 0; }

    /* Step 1 header */
    .tvbs-popup__header { padding: 24px 20px 16px; }

    /* Province rows — slightly tighter on small screens */
    .tvbs-province-row  { padding: 12px 18px; }
    .tvbs-province-row__name { font-size: 0.97em; }

    /* Geo row */
    .tvbs-popup__geo-row { padding: 14px 18px; }

    /* Footer */
    .tvbs-popup__footer { padding: 14px 18px 20px; }

    /* Step-nav */
    .tvbs-popup__step-nav { padding: 10px 14px 10px 16px; }
    .tvbs-popup__step-province { font-size: 0.85em; }

    /* Branch cards */
    .tvbs-popup__branch { padding: 12px 16px; }

    /* Store landing page */
    .tvbs-store-body   { grid-template-columns: 1fr; }
    .tvbs-store-hero   { padding: 24px 20px; }
    .tvbs-store-hero__name { font-size: 1.5em; }

    /* Header dropdown */
    .tvbs-selector { flex-direction: column; align-items: flex-start; }
    .tvbs-selector__select { min-width: 100%; }

    /* Availability table — hide Province column */
    .tvbs-availability__table th:nth-child(2),
    .tvbs-availability__table td:nth-child(2) { display: none; }
}