/* Clash Display Font - Uses theme fonts */
/* Font reference updated for WordPress theme structure */

/* Heading Font */
h1, h2, h3, h4, h5, h6,
.mobile-provider-name,
.provider-name,
.page-title,
.section-title,
.provider-card-name {
    font-family: 'Inter';
}

h2 {
    padding-bottom: 5px !important;
}

/* ===== Price Tool Specific Overrides ===== */
/* Force font-weight 500 for price tool headings (matches original Clash Display Medium) */
.price-tool-container h1,
.price-tool-container h2,
.price-tool-container h3,
.price-tool-container .page-title,
.price-tool-container .section-title,
.price-tool-container .provider-name,
.price-tool-container .provider-card-name,
.price-tool-container .mobile-provider-name,
.directory-page h1,
.directory-page h2,
.directory-page .page-title,
.directory-page .provider-card-name,
.leaderboard-page h1,
.leaderboard-page h2,
.leaderboard-page .page-title,
.calculator-page h1,
.calculator-page h2,
.calculator-page .page-title {
    font-weight: 500 !important;
}

/* Ensure price tool containers are not constrained by theme styles */
body.price-comparison-page .container,
body.price-comparison-page .price-tool-container,
.price-comparison-tool-wrapper .container,
.price-comparison-tool-wrapper .price-tool-container {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

:root {

    --primary: #004559;

    --primary-light: #a8ffc6;

    --gradient-1: #a0f0ff;

    --gradient-2: #e5b4ff;

    --success: #10b981;

    --warning: #f59e0b;

    --danger: #ef4444;

    --gray-50: #f9fafb;

    --gray-100: #f3f4f6;

    --gray-200: #e5e7eb;

    --gray-600: #4b5563;

    --gray-800: #1f2937;

    --gray-900: #111827;

    --sp: 4px;

}

/* ===== Tracker Navigation (shared across all price tools) ===== */
.tracker-nav { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.tracker-nav-content { max-width: 1400px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.tracker-nav-btn { display: inline-block; padding: 8px 16px; background: white; color: #004559; text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid #e5e7eb; transition: all 150ms ease; font-family: 'Inter', -apple-system, sans-serif; }
.tracker-nav-btn:hover { background: #f0f9ff; border-color: #004559; }
.tracker-nav-btn.active { background: #c8eb5b; color: black; border-color: #004559; }
.tracker-nav-switch { background: linear-gradient(135deg, #00a0d2 0%, #0087b5 100%); color: white; border: none; }
.tracker-nav-switch:hover { background: linear-gradient(135deg, #0087b5 0%, #006d93 100%); color: white; }
.tracker-nav-divider { color: #d1d5db; font-size: 18px; margin: 0 4px; }
@media (max-width: 768px) {
    .tracker-nav-content { gap: 6px; padding: 10px 15px; }
    .tracker-nav-btn { padding: 6px 10px; font-size: 11px; }
    .tracker-nav-divider { display: none; }
    .tracker-nav-switch { width: 100%; text-align: center; margin-top: 4px; }
}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    color: var(--gray-900);

    background: var(--gray-50);

    line-height: 1.5;

}



/* Sticky Header */

.sticky-header {

    position: sticky;

    top: 0;

    z-index: 101;

    background: linear-gradient(135deg, var(--primary), #003344);

    color: white;

    padding: calc(var(--sp) * 4);

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.header-content {

    max-width: 1600px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: calc(var(--sp) * 2);

}



.header-left {

    display: flex;

    align-items: center;

    gap: calc(var(--sp) * 3);

}



.logo {

    height: 40px;

    width: auto;

}



.header-content h1 {

    font-size: clamp(18px, 4vw, 28px);

    font-weight: 700;

}



.header-stats {

    display: flex;

    gap: calc(var(--sp) * 4);

    font-size: 13px;

}



/* Main Navigation */

.main-nav {

    position: sticky;

    top: 0;

    z-index: 100;

    background: white;

    border-bottom: 2px solid var(--gray-200);

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}



.nav-content {

    max-width: 1600px;

    margin: 0 auto;

    padding: calc(var(--sp) * 3) calc(var(--sp) * 4);

    display: flex;

    gap: calc(var(--sp) * 2);

    align-items: center;

    flex-wrap: wrap;

}



.nav-btn {

    padding: calc(var(--sp) * 2) calc(var(--sp) * 4);

    border: 2px solid var(--gray-200);

    background: white;

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    color: var(--gray-800);

    transition: all 150ms;

    display: inline-block;

}



.nav-btn:hover {

    border-color: var(--primary);

    background: var(--gray-50);

}



.nav-btn.active {

    background: var(--primary);

    color: white;

    border-color: var(--primary);

}



.nav-btn.nav-secondary {

    border-color: var(--primary);

    color: var(--primary);

}



.nav-divider {

    color: var(--gray-300);

    font-weight: 300;

}



/* Container */

.container {

    max-width: 1600px;

    margin: 0 auto;

    padding: calc(var(--sp) * 4);

    overflow-x: hidden;
    box-sizing: border-box;

}



@media (min-width: 1024px) {

    .container {

        overflow-x: visible;

    }

}



/* Filter Section */

.filter-section {

    margin-bottom: calc(var(--sp) * 4);

}



.filter-prompt {

    font-size: 16px;

    font-weight: 600;

    color: var(--primary);

    margin-bottom: calc(var(--sp) * 3);

    text-align: center;

}



/* Filter Bar */

.filter-bar {

    background: white;

    padding: calc(var(--sp) * 4);

    border-radius: calc(var(--sp) * 2);

    margin-bottom: calc(var(--sp) * 4);

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    align-items: center;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.filter-group {

    display: flex;

    align-items: center;

    gap: calc(var(--sp) * 2);

}



.filter-group label {

    font-weight: 600;

    font-size: 13px;

    white-space: nowrap;

}



.filter-select {

    padding: calc(var(--sp) * 2) calc(var(--sp) * 3);

    border: 2px solid var(--gray-200);

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

}



.filter-select:focus {

    outline: none;

    border-color: var(--primary);

}



.search-input {

    flex: 1;

    min-width: 200px;

    padding: calc(var(--sp) * 2) calc(var(--sp) * 3);

    border: 2px solid var(--gray-200);

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 13px;
    box-sizing: border-box;
    max-width: 100%;

}



.search-input:focus {

    outline: none;

    border-color: var(--primary);

}



/* Quick Actions */

.quick-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: calc(var(--sp) * 4);

    margin-bottom: calc(var(--sp) * 4);

    flex-wrap: wrap;

}



.action-buttons {

    display: flex;

    gap: calc(var(--sp) * 2);

}



.action-btn {

    padding: calc(var(--sp) * 2) calc(var(--sp) * 4);

    border: 2px solid #e5e7eb;

    background: white;

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all 150ms;

}



.action-btn:hover {

    border-color: var(--primary);

    background: var(--gray-50);

}



.action-btn.active {

    background: var(--primary);

    color: white;

    border-color: var(--primary);

}



.quick-legend {

    display: flex;

    gap: calc(var(--sp) * 4);

    align-items: center;

    flex-wrap: wrap;

}



.best-price-badge {

    background: var(--success);

    color: white;

    padding: calc(var(--sp) * 1) calc(var(--sp) * 2);

    border-radius: calc(var(--sp) * 1);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;

}



.top-price-badge {

    background: #3b82f6;

    color: white;

    padding: calc(var(--sp) * 1) calc(var(--sp) * 2);

    border-radius: calc(var(--sp) * 1);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;

}



/* Comparison Bar */

.comparison-bar {

    background: var(--warning);

    color: white;

    padding: calc(var(--sp) * 3);

    border-radius: calc(var(--sp) * 2);

    margin-bottom: calc(var(--sp) * 4);

}



.comparison-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: calc(var(--sp) * 3);

    flex-wrap: wrap;

}



.btn-primary, .btn-secondary {

    padding: calc(var(--sp) * 2) calc(var(--sp) * 4);

    border: none;

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}



.btn-primary {

    background: white;

    color: var(--warning);

}



.btn-primary:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.btn-secondary {

    background: transparent;

    color: white;

    border: 2px solid white;

}



/* Table Container */

.table-container {

    background: white;

    border-radius: calc(var(--sp) * 2);

    overflow-x: auto;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.price-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    font-size: 13px;

}



@media (min-width: 1024px) {

    .table-container {

        overflow-x: visible;

    }

    

    .price-table {

        width: 100%;

        max-width: 100%;

    }

}



.price-table thead {

    background: var(--primary);

    color: white;

    position: sticky;

    top: 72px;

    z-index: 10;

}



.price-table th {

    padding: calc(var(--sp) * 3);

    text-align: left;

    font-weight: 600;

    white-space: nowrap;

    border-bottom: 2px solid rgba(255,255,255,0.2);

}



.price-table th.dose-col {

    text-align: center;

}



.price-table th.sticky-col {

    position: sticky;

    left: 0;

    z-index: 11;

    background: var(--primary);

}



/* Column widths */

.compare-col { 

    width: 40px; 

    left: 0; 

}



.pharmacy-col { 

    min-width: 90px;

    max-width: 110px;

    left: 40px; 

}



.discount-col-header {

    min-width: 70px;

    max-width: 90px;

}



.discount-col {

    font-size: 10px;

    max-width: 90px;

}

.discount-badge-link {
    display: inline-block;
    padding: 5px 10px;
    background: #10b981;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    transition: background 0.2s;
}

.discount-badge-link:hover {
    background: #059669;
}

.mobile-discount-badge-link {
    display: block;
    margin: 0 12px 8px;
    padding: 8px 12px;
    font-size: 11px;
    text-align: center;
    border-radius: 6px;
}



.trust-col {

    width: 80px;

}



.reviews-col {

    width: 70px;

}



.gphc-col {

    width: 85px;

    font-size: 11px;

}



.dose-col {

    min-width: 95px;

    width: 110px;

}



.services-col {

    min-width: 90px;

    max-width: 110px;

}



.sort-btn {

    background: none;

    border: none;

    color: white;

    cursor: pointer;

    padding: 0;

    margin-left: calc(var(--sp) * 1);

    opacity: 0.7;

    font-size: 14px;

}



.sort-btn:hover { opacity: 1; }



.price-table tbody tr {

    border-bottom: 1px solid var(--gray-200);

    transition: background 150ms;

}



.price-table tbody tr:nth-child(even) {

    background: var(--gray-50);

}



.price-table tbody tr:hover {

    background: #e6f7ff;

}



.price-table td {

    padding: calc(var(--sp) * 3);

    vertical-align: middle;

}



.price-table td.price-cell {

    text-align: center;

}



.price-table td.sticky-col {

    position: sticky;

    background: inherit;

    z-index: 1;

}



.pharmacy-name {

    font-weight: 600;

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: calc(var(--sp) * 2);

    font-size: 13px;

    word-wrap: break-word;

    overflow-wrap: break-word;

}



.pharmacy-link {

    text-decoration: none;

    color: inherit;

}



.pharmacy-link:hover .pharmacy-name {

    text-decoration: underline;

}



.promo-badge {

    background: var(--danger);

    color: white;

    padding: calc(var(--sp) * 0.5) calc(var(--sp) * 1.5);

    border-radius: calc(var(--sp) * 1);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    line-height: 1.2;

}



.trustpilot-link {

    color: var(--gray-900);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: calc(var(--sp) * 1);

    font-weight: 600;

}



.trustpilot-link:hover { color: var(--warning); }



.gphc-link {

    color: var(--primary);

    text-decoration: none;

    font-family: monospace;

    font-size: 11px;

}



.gphc-link:hover { text-decoration: underline; }



.discount-col {

    font-size: 12px;

}



.price-cell {

    font-weight: 600;

    position: relative;

}



.price-value {

    font-weight: 600;

    color: var(--primary);

    font-size: 14px;

}



/* Best Price Label - Green */

.price-cell.best-price {

    position: relative;

    padding-top: 18px;

}



.best-price-label {

    position: absolute;

    top: 2px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--success);

    color: white;

    padding: 2px 4px;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.3px;

    text-transform: uppercase;

    border-radius: 2px;

    line-height: 1;

}



/* Top 5 Label - Blue */

.price-cell.top-five-price {

    position: relative;

    padding-top: 18px;

}



.top-five-label {

    position: absolute;

    top: 2px;

    left: 50%;

    transform: translateX(-50%);

    background: #3b82f6;

    color: white;

    padding: 2px 4px;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.3px;

    text-transform: uppercase;

    border-radius: 2px;

    line-height: 1;

}



.service-badges {

    display: flex;

    gap: calc(var(--sp) * 1);

    flex-wrap: wrap;

}



.service-badge {

    padding: calc(var(--sp) * 1) calc(var(--sp) * 2);

    border-radius: calc(var(--sp) * 1);

    font-size: 10px;

    font-weight: 700;

    background: var(--gray-200);

    color: var(--gray-800);

}



.service-badge.as { background: #dbeafe; color: #1e40af; }

.service-badge.sub { background: #fef3c7; color: #92400e; }

.service-badge.bundle { background: #e0e7ff; color: #4338ca; }

.service-badge.pm { background: #fce7f3; color: #9f1239; }

.service-badge.ref { background: #dcfce7; color: #166534; }



/* Pagination */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: calc(var(--sp) * 4);

    margin: calc(var(--sp) * 4) 0;

}



.load-more-controls {

    display: flex;

    gap: calc(var(--sp) * 3);

}



.page-btn {

    padding: calc(var(--sp) * 2) calc(var(--sp) * 4);

    border: 2px solid #e5e7eb;

    background: white;

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}



.page-btn:hover:not(:disabled) {

    border-color: var(--primary);

    background: var(--gray-50);

}



.page-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



/* Module Styles */

.module {

    background: white;

    border-radius: calc(var(--sp) * 3);

    padding: 0.7rem;

    margin-bottom: calc(var(--sp) * 6);

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.module h2 {

    font-size: 14px;

    font-weight: 700;

    color: #004559 !important;

    margin-bottom: 0;

}



/* Decision Helper */

.priority-buttons {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: calc(var(--sp) * 3);

    margin: calc(var(--sp) * 4) 0;

}



.priority-btn {

    padding: calc(var(--sp) * 4);

    border: 2px solid #e5e7eb;

    background: linear-gradient(135deg, white, var(--gray-50));

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 150ms;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}



.priority-btn:hover {

    border-color: var(--primary);

    background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}



.priority-btn:active {

    transform: translateY(0);

}



.recommendation-result {

    background: var(--gray-50);

    padding: 8px;

    border-radius: calc(var(--sp) * 2);

    border-left: none;

}



.leaderboard-item {

    background: white;

    padding: calc(var(--sp) * 3);

    border-radius: calc(var(--sp) * 2);

    border: 2px solid var(--gray-200);

    text-align: center;

    min-width: 180px;

}



.leaderboard-container {

    display: flex;

    gap: calc(var(--sp) * 3);

    flex-wrap: wrap;

    justify-content: center;

}



.leaderboard-rank {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: calc(var(--sp) * 2);

}



.leaderboard-info {

    margin-bottom: calc(var(--sp) * 2);

}



.leaderboard-name {

    font-weight: 600;

    color: var(--primary);

    margin-bottom: calc(var(--sp) * 1);

    font-size: 14px;

}



.leaderboard-value {

    font-size: 18px;

    font-weight: 700;

    color: var(--success);

}



/* Modal */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.7);

    z-index: 200;

    padding: calc(var(--sp) * 5);

    overflow-y: auto;

}



.modal.active { 

    display: flex; 

    align-items: flex-start; 

    justify-content: center;

    padding-top: calc(var(--sp) * 10);

}



.modal-content {

    background: white;

    border-radius: calc(var(--sp) * 4);

    padding: calc(var(--sp) * 8);

    max-width: 1200px;

    width: 100%;

    position: relative;

    margin-bottom: calc(var(--sp) * 10);

}



.modal-close {

    position: absolute;

    top: calc(var(--sp) * 3);

    right: calc(var(--sp) * 3);

    background: var(--gray-100);

    border: none;

    font-size: 28px;

    cursor: pointer;

    color: var(--gray-600);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

    z-index: 10;

}



.modal-close:hover {

    background: var(--gray-200);

    color: var(--gray-800);

}



.comparison-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: calc(var(--sp) * 4);

    margin-top: calc(var(--sp) * 6);

}



/* Compact View */

body.compact-view .price-table th,

body.compact-view .price-table td {

    padding: calc(var(--sp) * 2);

    font-size: 12px;

}



body.compact-view .pharmacy-name {

    font-size: 13px;

}



body.compact-view .promo-badge {

    font-size: 9px;

    padding: calc(var(--sp) * 0.5) calc(var(--sp) * 1.5);

}



/* Tooltips */

.tooltip {

    position: relative;

    display: inline-block;

    cursor: help;

    margin-left: calc(var(--sp) * 1);

    color: white;

    font-weight: 700;

    font-size: 12px;

    width: 16px;

    height: 16px;

    border: 2px solid currentColor;

    border-radius: 50%;

    text-align: center;

    line-height: 12px;

}



.tooltip-text {

    visibility: hidden;

    opacity: 0;

    width: 220px;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: var(--gray-900);

    text-align: left;

    border-radius: calc(var(--sp) * 2);

    padding: calc(var(--sp) * 3);

    position: absolute;

    z-index: 9999;

    bottom: 125%;

    left: 50%;

    margin-left: -110px;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.5;

    transition: opacity 200ms;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    border: 1px solid rgba(0, 0, 0, 0.1);

    word-wrap: break-word;

    overflow-wrap: break-word;

    white-space: normal;

}



.tooltip-text::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.98) transparent transparent transparent;

}



.tooltip:hover .tooltip-text {

    visibility: visible;

    opacity: 1;

}



/* Compare checkbox */

.compare-checkbox {

    width: 22px;

    height: 22px;

    cursor: pointer;

    accent-color: var(--primary);

}



/* Mobile Card View */

#mobile-card-view {

    display: none;

}



.mobile-pharmacy-card {

    background: white;

    border-radius: calc(var(--sp) * 3);

    padding: calc(var(--sp) * 4);

    margin-bottom: calc(var(--sp) * 3);

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

    border: 2px solid var(--gray-200);

}



.mobile-card-header {

    display: flex;

    justify-content: space-between;

    align-items: start;

    margin-bottom: calc(var(--sp) * 3);

    padding-bottom: calc(var(--sp) * 3);

    border-bottom: 2px solid var(--gray-100);

}



.mobile-provider-name {

    font-size: 18px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: calc(var(--sp) * 1);

}



.mobile-rating {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: calc(var(--sp) * 1);

    font-size: 13px;

}



.mobile-discount-badge {

    background: var(--danger);

    color: white;

    padding: calc(var(--sp) * 2);

    border-radius: calc(var(--sp) * 2);

    font-size: 11px;

    font-weight: 700;

    text-align: center;

    margin-bottom: calc(var(--sp) * 3);

}



.mobile-doses-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: calc(var(--sp) * 3);

    margin-bottom: calc(var(--sp) * 3);

}



.mobile-dose-item {

    background: var(--gray-50);

    padding: calc(var(--sp) * 3);

    border-radius: calc(var(--sp) * 2);

    text-align: center;

}



.mobile-dose-item.best {

    background: #f0fdf4;

    border: 2px solid var(--success);

}



.mobile-dose-item.top {

    background: #eff6ff;

    border: 2px solid #3b82f6;

}



.mobile-dose-label {

    font-size: 12px;

    font-weight: 600;

    color: var(--gray-600);

    margin-bottom: calc(var(--sp) * 1);

}



.mobile-dose-price {

    font-size: 18px;

    font-weight: 700;

    color: var(--primary);

}



.mobile-dose-badge {

    font-size: 9px;

    background: var(--success);

    color: white;

    padding: calc(var(--sp) * 1) calc(var(--sp) * 2);

    border-radius: calc(var(--sp) * 1);

    margin-top: calc(var(--sp) * 1);

    display: inline-block;

}



.mobile-dose-badge.top {

    background: #3b82f6;

}



.mobile-card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: calc(var(--sp) * 3);

    border-top: 1px solid var(--gray-200);

}



.mobile-services {

    display: flex;

    gap: calc(var(--sp) * 1);

    flex-wrap: wrap;

}



.mobile-view-btn {

    padding: calc(var(--sp) * 3) calc(var(--sp) * 5);

    background: var(--primary);

    color: white;

    border: none;

    border-radius: calc(var(--sp) * 2);

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    display: inline-block;

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .header-content { flex-direction: column; text-align: center; }

    .header-left { flex-direction: column; }

    .search-input { min-width: auto; }

    

    /* Nav - not sticky on mobile */

    .main-nav {

        position: relative;

        top: auto;

    }

    

    .nav-content {

        flex-direction: column;

        align-items: stretch;

        padding: calc(var(--sp) * 2);

        gap: calc(var(--sp) * 1);

    }

    

    .nav-btn {

        text-align: center;

        padding: calc(var(--sp) * 2) calc(var(--sp) * 3);

        font-size: 12px;

    }

    

    .nav-divider {

        display: none;

    }

    

    /* Filter accordion styles */

    .filter-toggle-btn {

        display: flex;

        width: 100%;

        padding: calc(var(--sp) * 3);

        background: var(--primary);

        color: white;

        border: none;

        border-radius: calc(var(--sp) * 2);

        font-family: inherit;

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;

        justify-content: space-between;

        align-items: center;

        margin-bottom: calc(var(--sp) * 2);

    }

    

    .filter-toggle-btn .toggle-icon {

        transition: transform 200ms;

    }

    

    .filter-toggle-btn.collapsed .toggle-icon {

        transform: rotate(-90deg);

    }

    

    .filter-bar {

        flex-direction: column;

        align-items: stretch;

        padding-top: 0px !important;
        padding-bottom: 13px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;

        transition: max-height 300ms ease, opacity 200ms ease, padding 200ms ease;

        overflow: hidden;

    }

    

    .filter-bar.collapsed {

        max-height: 0 !important;

        opacity: 0;

        padding-top: 0;

        padding-bottom: 0;

        margin: 0;

        border: none;

    }

    

    .filter-group { 

        justify-content: space-between;

        padding: calc(var(--sp) * 2) 0;

        border-bottom: 1px solid var(--gray-200);

    }

    

    .filter-group:last-of-type {

        border-bottom: none;

    }

    

    /* Hide elements on mobile */

    .column-visibility-wrapper {

        display: none !important;

    }

    

    .quick-actions { 

        flex-direction: column; 

        align-items: stretch;

    }

    

    .action-buttons { 

        justify-content: center;

        display: flex; /* Show action buttons on mobile */

    }

    

    /* Hide only the column visibility button, keep compare */

    #column-visibility-btn {

        display: none !important;

    }

    

    /* Mobile comparison bar */

    #comparison-bar {

        position: fixed;

        bottom: 0;

        left: 0;

        right: 0;

        z-index: 100;

        border-radius: 0;

        margin: 0;

        padding: calc(var(--sp) * 3);

    }

    

    .comparison-content {

        flex-direction: column;

        gap: calc(var(--sp) * 2);

        text-align: center;

    }

    

    .comparison-content span {

        font-size: 13px;

    }

    

    .comparison-content button {

        width: 100%;

    }

    

    /* Mobile modal styles */

    .modal {

        padding: calc(var(--sp) * 2);

    }

    

    .modal.active {

        padding-top: calc(var(--sp) * 2);

        align-items: flex-start;

    }

    

    .modal-content {

        padding: calc(var(--sp) * 4);

        padding-top: calc(var(--sp) * 12);

        border-radius: calc(var(--sp) * 3);

        max-height: none;

    }

    

    .modal-content h2 {

        font-size: 18px;

        margin-bottom: calc(var(--sp) * 3);

    }

    

    .modal-close {

        position: fixed;

        top: calc(var(--sp) * 4);

        right: calc(var(--sp) * 4);

        background: white;

        box-shadow: 0 2px 8px rgba(0,0,0,0.2);

        width: 36px;

        height: 36px;

        font-size: 24px;

    }

    

    .comparison-grid {

        grid-template-columns: 1fr;

        gap: calc(var(--sp) * 3);

        margin-top: calc(var(--sp) * 3);

    }

    

    .quick-legend { 

        justify-content: center;

        flex-wrap: wrap;

        gap: calc(var(--sp) * 2);

        font-size: 11px;

    }

    

    .table-container {

        display: none;

    }

    

    #mobile-card-view {

        display: block !important;

    }

    

    .price-table thead {

        top: 0;

    }

    

    /* Compact mobile cards */

    .mobile-pharmacy-card {

        padding: calc(var(--sp) * 3);

        margin-bottom: calc(var(--sp) * 2);

    }

    

    .mobile-card-header {

        margin-bottom: calc(var(--sp) * 2);

        padding-bottom: calc(var(--sp) * 2);

    }

    

    .mobile-provider-name {

        font-size: 15px;

        margin-bottom: 2px;

    }

    

    .mobile-card-header > div:first-child > div:last-child {

        font-size: 10px;

    }

    

    .mobile-rating {

        font-size: 12px;

    }

    

    .mobile-rating > div:last-child {

        font-size: 10px;

    }

    

    .mobile-discount-badge {

        padding: calc(var(--sp) * 1.5);

        margin-bottom: calc(var(--sp) * 2);

        font-size: 10px;

    }

    

    /* Compact dose grid - 3 columns */

    .mobile-doses-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: calc(var(--sp) * 1.5);

        margin-bottom: calc(var(--sp) * 2);

    }

    

    .mobile-dose-item {

        padding: calc(var(--sp) * 1.5);

    }

    

    .mobile-dose-label {

        font-size: 10px;

        margin-bottom: 2px;

    }

    

    .mobile-dose-price {

        font-size: 14px;

    }

    

    .mobile-dose-badge {

        font-size: 8px;

        padding: 2px 4px;

        margin-top: 2px;

    }

    

    .mobile-card-footer {

        padding-top: calc(var(--sp) * 2);

    }

    

    .mobile-services {

        gap: 4px;

    }

    

    .mobile-services .service-badge {

        font-size: 9px;

        padding: 2px 4px;

    }

    

    .mobile-view-btn {

        padding: calc(var(--sp) * 2) calc(var(--sp) * 4);

        font-size: 12px;

    }

    

    /* Pagination */

    .pagination {

        margin: calc(var(--sp) * 3) 0;

    }

    

    .load-more-controls {

        flex-direction: column;

        gap: calc(var(--sp) * 2);

        width: 100%;

    }

    

    .page-btn {

        width: 100%;

        padding: calc(var(--sp) * 3);

    }

}



/* Hide filter toggle on desktop only */

@media (min-width: 769px) {

    .filter-toggle-btn {

        display: none;

    }

}



@media (prefers-reduced-motion: reduce) {

    * { animation: none !important; transition: none !important; }

}



/* Column Visibility Dropdown */

.column-visibility-wrapper {

    position: relative;

    display: inline-block;

}



.column-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    background: white;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    padding: 12px;

    min-width: 200px;

    z-index: 1000;

    margin-top: 4px;

}



.column-dropdown label {

    display: block;

    padding: 8px 12px;

    cursor: pointer;

    font-size: 14px;

    color: #333;

    border-radius: 4px;

    transition: background-color 0.2s;

}



.column-dropdown label:hover {

    background-color: #f5f5f5;

}



.column-dropdown input[type="checkbox"] {

    margin-right: 8px;

    cursor: pointer;

}



/* Hidden column styles */

.price-table th.hidden-column,

.price-table td.hidden-column {

    display: none;

}
/* ============================================
   MOBILE: Hide Switch and Directory buttons,
   show mobile heading, tooltip, search outside filter
   ============================================ */

/* Mobile tracker heading - hidden on desktop */
.mobile-tracker-heading {
    display: none;
}

/* Mobile search outside filter - hidden on desktop */
.mobile-search-outside {
    display: none;
}

/* Hide cached data fallback notice from users */
.cached-data-notice {
    display: none !important;
}

/* Filter tooltip icon - hidden on desktop */
.filter-tooltip-icon {
    display: none;
}

/* Hide Switch to Wegovy/Mounjaro, Divider, and Pharmacy Directory on ALL screen sizes */
.tracker-nav-switch,
.tracker-nav-divider,
.tracker-nav-directory {
    display: none !important;
}

@media (max-width: 768px) {

    /* Show mobile heading - left aligned, compact, with padding */
    .mobile-tracker-heading {
        display: block;
        text-align: left;
        padding: 12px 16px 8px;
    }

    .mobile-tracker-heading h1 {
        font-family: "ClashDisplay-Variable", sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #004559;
        margin: 0 0 4px;
        padding-bottom: 0px !important;
    }

    /* Force no bottom padding on h1/largeH2 in tracker */
    h1, .largeH2 {
        padding-bottom: 0px !important;
    }

    .mobile-tracker-heading p {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        color: #6b7280;
        margin: 0;
    }

    /* Nav buttons: horizontal scroll, no wrap */
    .tracker-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tracker-nav-content {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 3px 15px;
    }

    .tracker-nav-btn {
        font-size: 0.7rem;
        padding: 6px 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Hide the page-subtitle paragraph (moved into tooltip) */
    .page-subtitle {
        display: none !important;
    }

    /* Show mobile search OUTSIDE the filter box (standalone only, not in compare row) */
    .mobile-search-outside:not(.mobile-search-compare-row .mobile-search-outside) {
        display: none !important;
    }

    /* Hide the search inside the filter bar on mobile */
    .search-desktop-only {
        display: none !important;
    }

    /* Filter tooltip icon */
    .filter-tooltip-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        font-size: 12px;
        font-weight: 700;
        font-style: italic;
        font-family: Georgia, serif;
        color: white;
        cursor: pointer;
        position: relative;
        margin-left: auto;
        margin-right: 8px;
        flex-shrink: 0;
    }
}

/* Nav button text: always show short labels */
.tracker-nav-btn .btn-long {
    display: none;
}

.tracker-nav-btn .btn-short {
    display: inline;
}

/* Provider card header as link */
a.provider-card-header {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Issue 5: On mobile, all buttons full-width. Directory on top, trackers as 2-col below */
@media (max-width: 768px) {
    .tracker-nav-content {
        flex-wrap: wrap;
    }
    .tracker-nav-directory-btn {
        width: 100%;
        text-align: center;
        order: -1;
    }
    .tracker-nav-btn:not(.tracker-nav-directory-btn) {
        flex: 1 1 0;
        text-align: center;
    }
}

a.provider-card-header:hover {
    opacity: 0.8;
}

/* ============================================
   FIX 4: Mobile Sort Dropdown
   ============================================ */
.mobile-sort-dropdown {
    display: none;
}

/* Mobile search + compare row - hidden on desktop */
.mobile-search-compare-row {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sort-dropdown {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: #f8f9fa;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    .mobile-sort-dropdown label {
        font-size: 13px;
        font-weight: 600;
        color: #004559;
        white-space: nowrap;
    }
    .mobile-sort-dropdown .filter-select {
        flex: 1;
        font-size: 13px;
    }

    /* Search + Compare on same row */
    .mobile-search-compare-row {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        align-items: stretch;
    }
    .mobile-search-compare-row .mobile-search-outside {
        display: block !important;
        flex: 1;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        font-size: 14px;
        font-family: "Inter", sans-serif;
        box-sizing: border-box !important;
    }
    .mobile-search-compare-row .mobile-search-outside:focus {
        outline: none;
        border-color: #004559;
        box-shadow: 0 0 0 2px rgba(0, 69, 89, 0.1);
    }
    .mobile-compare-btn {
        white-space: nowrap;
        padding: 10px 16px !important;
        font-size: 13px !important;
        flex-shrink: 0;
        border-radius: 10px;
    }

    /* Hide the desktop compare mode button on mobile */
    .quick-actions #compare-mode-btn {
        display: none !important;
    }
}

/* ============================================
   FIX 5: Mobile Legend Inside Filter Box
   ============================================ */
.mobile-legend-inside {
    display: none;
}

@media (max-width: 768px) {
    .mobile-legend-inside {
        display: block;
        border-top: 1px solid #e5e7eb;
        padding-top: 12px;
        margin-top: 8px;
        width: 100%;
    }
    .mobile-legend-title {
        font-size: 12px;
        font-weight: 600;
        color: #004559;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .mobile-legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
    }
    .mobile-legend-items .legend-item {
        font-size: 11px;
    }
    /* Hide the original quick-legend on mobile */
    .quick-legend {
        display: none !important;
    }
}