/**
 * Retail Store Finder — Frontend Styles
 *
 * Layout: desktop = 360px sidebar (left) + flexible map (right)
 *         mobile  = full-width map (top, 350px) + full-width list (below)
 *
 * Uses CSS custom properties for easy theme overrides.
 * No external icon fonts required.
 *
 * @package RetailStoreFinder
 */

/* ─── Custom properties ────────────────────────────────────────────────────── */
.rsf-widget {
    --rsf-primary:        #2563eb;
    --rsf-primary-dark:   #1d4ed8;
    --rsf-danger:         #dc2626;
    --rsf-success:        #16a34a;
    --rsf-text:           #1f2937;
    --rsf-text-muted:     #6b7280;
    --rsf-border:         #e5e7eb;
    --rsf-bg:             #ffffff;
    --rsf-bg-hover:       #f0f4ff;
    --rsf-bg-active:      #dbeafe;
    --rsf-sidebar-width:  360px;
    --rsf-radius:         8px;
    --rsf-shadow:         0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
    --rsf-shadow-hover:   0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:   16px;
    color:       var(--rsf-text);
    box-sizing:  border-box;
    margin-bottom: 2rem;
}

.rsf-widget *,
.rsf-widget *::before,
.rsf-widget *::after {
    box-sizing: inherit;
}

/* ─── Controls bar ──────────────────────────────────────────────────────────── */
.rsf-controls {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            0.75rem;
    padding:        0.75rem;
    background:     var(--rsf-bg);
    border:         1px solid var(--rsf-border);
    border-radius:  var(--rsf-radius);
    margin-bottom:  0.75rem;
}

.rsf-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.5rem 1rem;
    font-size:       0.875rem;
    font-weight:     600;
    border:          none;
    border-radius:   var(--rsf-radius);
    cursor:          pointer;
    text-decoration: none;
    transition:      background 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space:     nowrap;
}

.rsf-btn:focus-visible {
    outline:        3px solid var(--rsf-primary);
    outline-offset: 2px;
}

.rsf-btn--primary {
    background: var(--rsf-primary);
    color:      #ffffff;
}

.rsf-btn--primary:hover:not(:disabled) {
    background:  var(--rsf-primary-dark);
    box-shadow:  var(--rsf-shadow-hover);
    transform:   translateY(-1px);
}

.rsf-btn--primary:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.rsf-btn--loading .rsf-btn__icon {
    animation: rsf-spin 0.8s linear infinite;
}

.rsf-btn--directions {
    display:      inline-block;
    margin-top:   0.75rem;
    padding:      0.5rem 1rem;
    background:   var(--rsf-primary);
    color:        #ffffff;
    border-radius: var(--rsf-radius);
    font-size:    0.875rem;
    font-weight:  600;
    text-decoration: none;
}

.rsf-btn--directions:hover {
    background: var(--rsf-primary-dark);
}

/* Filters */
.rsf-filters {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.5rem;
}

.rsf-filters__label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--rsf-text-muted);
}

.rsf-filter-pill {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    cursor:      pointer;
}

.rsf-filter-pill__input {
    margin: 0;
    cursor: pointer;
}

.rsf-filter-pill__text {
    font-size:   0.8125rem;
    color:       var(--rsf-text);
    user-select: none;
}

/* Store count */
.rsf-count {
    margin-left: auto;
    font-size:   0.8125rem;
    color:       var(--rsf-text-muted);
    white-space: nowrap;
}

.rsf-count__number {
    font-weight: 700;
    color:       var(--rsf-primary);
}

/* ─── Main layout ───────────────────────────────────────────────────────────── */
.rsf-layout {
    display:       flex;
    border:        1px solid var(--rsf-border);
    border-radius: var(--rsf-radius);
    overflow:      hidden;
    /* Prevent map from collapsing on iOS */
    min-height:    var(--rsf-map-height, 480px);
}

/* Map panel — right column on desktop, top on mobile */
.rsf-map-panel {
    flex:       1;
    position:   relative;
    min-height: var(--rsf-map-height, 480px);
}

.rsf-map {
    width:  100%;
    height: var(--rsf-map-height, 480px);
    /* Fix for iOS Safari 100vh bug — use dvh where supported */
    height: var(--rsf-map-height, 480px);
}

@supports (height: 100dvh) {
    .rsf-map {
        /* Use dvh only if --rsf-map-height is a viewport unit */
    }
}

/* Sidebar — left column on desktop, below map on mobile */
.rsf-sidebar {
    width:        var(--rsf-sidebar-width);
    min-width:    var(--rsf-sidebar-width);
    max-height:   var(--rsf-map-height, 480px);
    overflow-y:   auto;
    background:   var(--rsf-bg);
    border-left:  1px solid var(--rsf-border);
    order:        -1; /* Sidebar on left side */
    /* Custom scrollbar — subtle but visible */
    scrollbar-width: thin;
    scrollbar-color: var(--rsf-border) transparent;
}

.rsf-sidebar::-webkit-scrollbar       { width: 6px; }
.rsf-sidebar::-webkit-scrollbar-track { background: transparent; }
.rsf-sidebar::-webkit-scrollbar-thumb { background: var(--rsf-border); border-radius: 3px; }

/* ─── Store cards ───────────────────────────────────────────────────────────── */
.rsf-store-list {
    list-style:  none;
    margin:      0;
    padding:     0.5rem;
}

.rsf-store-card {
    padding:       0.75rem;
    border-radius: var(--rsf-radius);
    border:        1px solid transparent;
    margin-bottom: 0.375rem;
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.rsf-store-card:hover {
    background:   var(--rsf-bg-hover);
    box-shadow:   var(--rsf-shadow);
}

.rsf-store-card--active {
    background:   var(--rsf-bg-active);
    border-color: var(--rsf-primary);
}

.rsf-store-card:focus-visible {
    outline:        2px solid var(--rsf-primary);
    outline-offset: -2px;
}

.rsf-store-card__header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   0.25rem;
    gap:             0.5rem;
}

.rsf-store-card__name {
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--rsf-text);
    line-height: 1.3;
}

.rsf-distance-badge {
    flex-shrink:   0;
    font-size:     0.75rem;
    font-weight:   600;
    padding:       0.125rem 0.5rem;
    border-radius: 999px;
    background:    #e5e7eb;
    color:         var(--rsf-text-muted);
    white-space:   nowrap;
}

.rsf-store-card__address {
    font-size:    0.8125rem;
    color:        var(--rsf-text-muted);
    font-style:   normal;
    line-height:  1.5;
    margin-bottom: 0.375rem;
}

.rsf-store-card__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.375rem;
}

/* Open/closed status badge */
.rsf-store-card__status {
    font-size:     0.75rem;
    font-weight:   700;
    padding:       0.125rem 0.5rem;
    border-radius: 999px;
}

.rsf-store-card__status--open {
    background: #dcfce7;
    color:      var(--rsf-success);
}

.rsf-store-card__status--closed {
    background: #fee2e2;
    color:      var(--rsf-danger);
}

/* Service tags */
.rsf-service-tag {
    font-size:     0.6875rem;
    padding:       0.1rem 0.4rem;
    border-radius: 999px;
    background:    #f3f4f6;
    color:         var(--rsf-text-muted);
    text-transform: capitalize;
}

/* ─── Loading skeleton ──────────────────────────────────────────────────────── */
.rsf-loading {
    padding: 0.5rem;
}

.rsf-skeleton {
    padding:       0.75rem;
    border-radius: var(--rsf-radius);
    border:        1px solid var(--rsf-border);
    margin-bottom: 0.375rem;
}

.rsf-skeleton__line {
    height:        12px;
    background:    #e5e7eb;
    border-radius: 4px;
    margin-bottom: 8px;
    position:      relative;
    overflow:      hidden;
}

.rsf-skeleton__line--title  { height: 15px; width: 70%; }
.rsf-skeleton__line--body   { height: 11px; }
.rsf-skeleton__line--short  { width: 50%; }

.rsf-skeleton__line::after {
    content:    '';
    position:   absolute;
    inset:      0 -100%;
    background: linear-gradient(90deg, transparent 0%, #f9fafb 50%, transparent 100%);
    animation:  rsf-shimmer 1.4s ease-in-out infinite;
}

/* ─── Empty state ───────────────────────────────────────────────────────────── */
.rsf-empty {
    padding:    1.5rem;
    text-align: center;
    color:      var(--rsf-text-muted);
    font-size:  0.875rem;
}

/* ─── Location error ────────────────────────────────────────────────────────── */
.rsf-location-error {
    position:      absolute;
    bottom:        1rem;
    left:          50%;
    transform:     translateX(-50%);
    z-index:       1000;
    background:    #fef2f2;
    border:        1px solid #fecaca;
    border-radius: var(--rsf-radius);
    padding:       0.5rem 1rem;
    max-width:     90%;
    font-size:     0.875rem;
    color:         var(--rsf-danger);
    box-shadow:    var(--rsf-shadow-hover);
}

.rsf-location-error__text {
    margin: 0;
}

/* ─── Detail drawer ─────────────────────────────────────────────────────────── */
.rsf-detail {
    border:        1px solid var(--rsf-border);
    border-top:    none;
    border-radius: 0 0 var(--rsf-radius) var(--rsf-radius);
    background:    var(--rsf-bg);
    padding:       1rem;
    position:      relative;
}

.rsf-detail__close {
    position:    absolute;
    top:         0.5rem;
    right:       0.75rem;
    background:  none;
    border:      none;
    font-size:   1.5rem;
    line-height: 1;
    color:       var(--rsf-text-muted);
    cursor:      pointer;
    padding:     0.25rem;
    border-radius: 4px;
}

.rsf-detail__close:hover {
    background: var(--rsf-border);
    color:      var(--rsf-text);
}

.rsf-detail__name {
    font-size:    1.125rem;
    font-weight:  700;
    margin:       0 2rem 0.5rem 0;
}

.rsf-detail__address {
    font-style:   normal;
    color:        var(--rsf-text-muted);
    margin-bottom: 0.5rem;
    line-height:  1.5;
}

.rsf-detail__services {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.375rem;
    margin:    0.5rem 0;
}

.rsf-detail__hours {
    margin-top: 0.75rem;
}

.rsf-detail__hours h4 {
    font-size:    0.875rem;
    font-weight:  700;
    margin:       0 0 0.375rem;
    color:        var(--rsf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rsf-hours-table {
    width:       100%;
    font-size:   0.8125rem;
    border-collapse: collapse;
}

.rsf-hours-table td {
    padding:      0.2rem 0;
    color:        var(--rsf-text);
}

.rsf-hours-table td:first-child {
    width:        45%;
    font-weight:  600;
}

/* ─── Leaflet popup overrides ───────────────────────────────────────────────── */
.rsf-popup .leaflet-popup-content-wrapper {
    border-radius: var(--rsf-radius);
    box-shadow:    var(--rsf-shadow-hover);
    padding:       0;
    overflow:      hidden;
}

.rsf-popup .leaflet-popup-content {
    margin: 0;
}

.rsf-popup-content {
    padding: 0.75rem;
    min-width: 200px;
}

.rsf-popup-content__name {
    display:      block;
    font-size:    0.9375rem;
    font-weight:  700;
    margin-bottom: 0.3rem;
    color:        var(--rsf-text);
}

.rsf-popup-content__address {
    font-style:    normal;
    font-size:     0.8125rem;
    color:         var(--rsf-text-muted);
    margin-bottom: 0.4rem;
    line-height:   1.4;
}

.rsf-popup-content__directions {
    display:       inline-block;
    margin-top:    0.25rem;
    font-size:     0.8125rem;
    font-weight:   600;
    color:         var(--rsf-primary);
    text-decoration: none;
}

.rsf-popup-content__directions:hover {
    text-decoration: underline;
}

/* ─── Custom map markers ────────────────────────────────────────────────────── */
.rsf-store-marker {
    background:  none !important;
    border:      none !important;
}

.rsf-store-marker--active svg path {
    fill:   var(--rsf-danger);
}

/* User "you are here" marker */
.rsf-user-marker {
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--rsf-primary);
    border:        3px solid #ffffff;
    box-shadow:    0 0 0 2px var(--rsf-primary);
}

.rsf-user-marker--pulse {
    animation: rsf-pulse 2s ease-out infinite;
}

/* ─── Widget heading ────────────────────────────────────────────────────────── */
.rsf-widget__title {
    font-size:    1.375rem;
    font-weight:  800;
    margin:       0 0 0.75rem;
    color:        var(--rsf-text);
}

/* ─── Animations ────────────────────────────────────────────────────────────── */
@keyframes rsf-shimmer {
    0%   { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

@keyframes rsf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes rsf-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ─── Responsive: mobile ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .rsf-layout {
        flex-direction: column;
        min-height:     unset;
    }

    .rsf-map-panel {
        order:      -1;  /* Map at top on mobile */
        min-height: 350px;
    }

    .rsf-map {
        height: 350px;
    }

    .rsf-sidebar {
        width:      100%;
        min-width:  unset;
        max-height: 50vh;
        border-left: none;
        border-top: 1px solid var(--rsf-border);
        order:      0;
    }

    .rsf-controls {
        gap: 0.5rem;
    }

    .rsf-filters {
        gap: 0.375rem;
    }

    .rsf-count {
        margin-left: 0;
    }
}

/* ─── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rsf-skeleton__line::after,
    .rsf-btn--loading .rsf-btn__icon,
    .rsf-user-marker--pulse {
        animation: none;
    }

    .rsf-btn--primary:hover:not(:disabled) {
        transform: none;
    }
}