/* Frontend Styles for A5 School Stationery */

:root {
    --a5ss-accent: #e31c25;
    --a5ss-accent-rgb: 227, 28, 37;
    --a5ss-bg: #f8fafc;
    --a5ss-card-bg: #ffffff;
    --a5ss-text: #0f172a;
    --a5ss-text-muted: #64748b;
    --a5ss-border: #e2e8f0;
    --a5ss-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --a5ss-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --a5ss-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --a5ss-radius: 12px;
}

/* Base resets & styles inside container */
.a5ss-school-container,
.a5ss-search-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--a5ss-text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.a5ss-school-container *,
.a5ss-search-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   SCHOOL BRAND HEADER
   ========================================================================== */
.a5ss-school-header {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #ffffff;
    border: 2px solid var(--a5ss-border);
    border-radius: var(--a5ss-radius);
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: var(--a5ss-shadow);
}

.a5ss-school-logo {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: var(--a5ss-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #fff;
}

.a5ss-school-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.a5ss-school-info {
    flex-grow: 1;
}

.a5ss-school-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: #0f172a;
    line-height: 1.2;
}

.a5ss-school-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.a5ss-meta-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--a5ss-border);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    color: var(--a5ss-text-muted);
}

.a5ss-badge-icon {
    display: inline-flex;
    color: var(--a5ss-accent);
}

.a5ss-meta-badge a {
    color: var(--a5ss-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.a5ss-meta-badge a:hover {
    color: var(--a5ss-accent);
}

/* ==========================================================================
   HORIZONTAL TABBED GRADE SELECTION
   ========================================================================== */
.a5ss-grade-tabs-wrapper {
    margin-bottom: 25px;
}

.a5ss-tabs-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--a5ss-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
}

.a5ss-grade-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--a5ss-accent) transparent;
}

/* Hide scrollbars for Chrome/Safari/Opera */
.a5ss-grade-tabs::-webkit-scrollbar {
    height: 4px;
}
.a5ss-grade-tabs::-webkit-scrollbar-thumb {
    background-color: rgba(var(--a5ss-accent-rgb), 0.3);
    border-radius: 999px;
}

.a5ss-school-container button.a5ss-grade-tab-btn {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--a5ss-border, #cbd5e1) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    color: var(--a5ss-text-muted, #64748b) !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    text-transform: none !important;
    width: auto !important;
}

.a5ss-school-container button.a5ss-grade-tab-btn:hover {
    border-color: var(--a5ss-accent) !important;
    color: var(--a5ss-accent) !important;
    background: rgba(var(--a5ss-accent-rgb), 0.04) !important;
}

.a5ss-school-container button.a5ss-grade-tab-btn.active {
    background: var(--a5ss-accent) !important;
    border-color: var(--a5ss-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(var(--a5ss-accent-rgb), 0.25) !important;
}

/* ==========================================================================
   LAYOUT GRID (TABLE & SIDEBAR SUMMARY)
   ========================================================================== */
.a5ss-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
}

.a5ss-main-panel {
    background: #fff;
    border: 1px solid var(--a5ss-border);
    border-radius: var(--a5ss-radius);
    padding: 30px;
    box-shadow: var(--a5ss-shadow-sm);
}

.a5ss-panel-header {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.a5ss-school-container .a5ss-pack-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.a5ss-school-container .a5ss-pack-controls button.a5ss-ctrl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    width: auto !important;
}

.a5ss-school-container .a5ss-pack-controls button.a5ss-ctrl-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: var(--a5ss-accent, #0f172a) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transform: none !important;
}

.a5ss-school-container .a5ss-pack-controls button.a5ss-ctrl-btn svg {
    width: 13px !important;
    height: 13px !important;
    color: currentColor !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.a5ss-panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.a5ss-panel-desc {
    color: var(--a5ss-text-muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   STATIONERY LISTS TABLE
   ========================================================================== */
.a5ss-table-container {
    overflow-x: auto;
}

.a5ss-items-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.a5ss-items-table th {
    font-weight: 600;
    color: var(--a5ss-text-muted);
    border-bottom: 2px solid var(--a5ss-border);
    padding: 12px 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.a5ss-items-table td {
    padding: 18px 10px;
    border-bottom: 1px solid var(--a5ss-border);
    vertical-align: middle;
}

.a5ss-product-row {
    transition: background-color 0.2s ease;
}

.a5ss-product-row:hover {
    background-color: rgba(var(--a5ss-accent-rgb), 0.01);
}

/* Columns styling */
.col-check {
    text-align: center;
}

.a5ss-item-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--a5ss-accent);
    cursor: pointer;
}

.a5ss-item-checkbox[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.col-img img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--a5ss-border);
}

.col-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.a5ss-prod-name {
    font-weight: 600;
    color: var(--a5ss-text);
    font-size: 15px;
}

.a5ss-prod-sku {
    font-size: 11px;
    color: var(--a5ss-text-muted);
}

/* v2.4: the school's own wording for the row ("Presentation Folder - Geography (2 x)") */
.a5ss-prod-source {
    font-size: 12px;
    line-height: 1.4;
    color: var(--a5ss-text-muted);
    font-style: italic;
}

.a5ss-required-badge,
.a5ss-optional-badge {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

.a5ss-required-badge {
    background: rgba(var(--a5ss-accent-rgb), 0.1);
    color: var(--a5ss-accent);
}

.a5ss-optional-badge {
    background: #f1f5f9;
    color: #475569;
}

.col-price {
    font-size: 14px;
    font-weight: 500;
}

/* Quantity selector */
.a5ss-qty-spinner {
    display: flex;
    align-items: center;
    border: 1px solid var(--a5ss-border);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.a5ss-school-container button.a5ss-qty-btn {
    background: #f1f5f9 !important;
    border: none !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.a5ss-school-container button.a5ss-qty-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.a5ss-qty-input {
    width: 44px;
    height: 32px;
    border: none;
    border-left: 1px solid var(--a5ss-border);
    border-right: 1px solid var(--a5ss-border);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.a5ss-qty-input::-webkit-outer-spin-button,
.a5ss-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==========================================================================
   STICKY SUMMARY CARD
   ========================================================================== */
.a5ss-sidebar {
    position: sticky;
    top: 30px;
    z-index: 10;
}

.a5ss-summary-card {
    background: #fff;
    border: 1px solid rgba(var(--a5ss-accent-rgb), 0.15);
    border-radius: var(--a5ss-radius);
    overflow: hidden;
    box-shadow: var(--a5ss-shadow-lg);
}

.a5ss-summary-header {
    background: var(--a5ss-accent);
    color: #fff;
    padding: 20px 24px;
}

.a5ss-summary-header h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.a5ss-summary-body {
    padding: 24px;
}

.a5ss-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--a5ss-text-muted);
}

.a5ss-summary-row.total-row {
    border-top: 1px dashed var(--a5ss-border);
    padding-top: 16px;
    margin-bottom: 24px;
    color: var(--a5ss-text);
    font-size: 16px;
    font-weight: 700;
}

.a5ss-summary-row.total-row strong {
    font-size: 1.4rem;
    color: var(--a5ss-accent);
}

.a5ss-order-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--a5ss-accent) !important;
    border-color: var(--a5ss-accent) !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 20px !important;
    height: auto !important;
    border-radius: 8px !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--a5ss-accent-rgb), 0.3);
    transition: all 0.3s ease !important;
}

.a5ss-order-btn:hover {
    background: rgba(var(--a5ss-accent-rgb), 0.9) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--a5ss-accent-rgb), 0.4);
}

.a5ss-order-btn:active {
    transform: translateY(0);
}

.a5ss-btn-icon {
    display: inline-flex;
}

/* Toast/Message box */
.a5ss-message-box {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    animation: fadeIn 0.3s ease;
}

.a5ss-message-box.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.a5ss-message-box.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PARENT SEARCH INTERFACE
   ========================================================================== */
.a5ss-search-hero {
    text-align: center;
    background: #f8fafc !important;
    color: #0f172a !important;
    border-radius: var(--a5ss-radius);
    padding: 60px 40px;
    margin-bottom: 45px;
    box-shadow: var(--a5ss-shadow-sm);
    border: 1px solid #e2e8f0 !important;
    position: relative;
    overflow: hidden;
}

.a5ss-search-hero::before {
    display: none !important;
}

.a5ss-search-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    letter-spacing: -0.02em;
    color: #0f172a !important;
}

.a5ss-search-subtitle {
    color: #475569 !important;
    max-width: 600px;
    margin: 0 auto 35px auto;
    font-size: 16px;
    line-height: 1.6;
}

#a5ss-school-search-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

#a5ss-school-search-container .a5ss-search-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
}

#a5ss-school-search-container .a5ss-search-input-wrapper {
    position: relative !important;
    flex-grow: 1 !important;
}

#a5ss-school-search-container input {
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    border-radius: 9999px !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    height: 50px !important;
}

#a5ss-school-search-container input::placeholder {
    color: #94a3b8 !important;
}

#a5ss-school-search-container input:focus {
    outline: none !important;
    border-color: #e31c25 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(227, 28, 37, 0.15) !important;
}

/* Spinner inside input */
#a5ss-school-search-container .a5ss-search-spinner {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 2px solid #e31c25 !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    box-sizing: border-box !important;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Grid for Search results */
.a5ss-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    min-height: 200px;
}

.a5ss-search-placeholder {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--a5ss-text-muted);
}

.a5ss-search-placeholder p {
    margin: 0;
    font-size: 15px;
}

/* School Card */
.a5ss-school-card {
    background: #fff;
    border: 1px solid var(--a5ss-border);
    border-radius: var(--a5ss-radius);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--a5ss-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.a5ss-school-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--a5ss-shadow-lg);
    border-color: var(--a5ss-accent) !important;
}

.a5ss-card-logo {
    width: 80px;
    height: 80px;
    background: #f8fafc;
    border-radius: 50%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--a5ss-border);
}

.a5ss-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.a5ss-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--a5ss-text);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.a5ss-card-address {
    font-size: 13px;
    color: var(--a5ss-text-muted);
    margin: 0 0 20px 0;
    line-height: 1.4;
    flex-grow: 1;
}

.a5ss-card-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--a5ss-accent) !important;
    color: #fff !important;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(227, 28, 37, 0.1);
}

.a5ss-card-btn:hover {
    background: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(227, 28, 37, 0.3) !important;
}

.a5ss-school-card:hover .a5ss-card-btn {
    background: #b91c1c !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 991px) {
    .a5ss-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .a5ss-sidebar {
        position: static;
        width: 100%;
    }

    /* Floating bottom checkout panel for mobile devices */
    .a5ss-summary-card {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 20px 20px 0 0;
        z-index: 9999;
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
        border: none;
        border-top: 1px solid rgba(var(--a5ss-accent-rgb), 0.2);
        max-width: 100%;
    }

    .a5ss-summary-header {
        display: none; /* Hide for floating mobile drawer */
    }

    .a5ss-summary-body {
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .a5ss-summary-row {
        margin: 0;
    }

    .a5ss-summary-row span {
        display: none; /* Hide labels to save space */
    }

    .a5ss-summary-row.total-row {
        border-top: none;
        padding-top: 0;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .a5ss-summary-row.total-row::before {
        content: 'Total Pack';
        font-size: 11px;
        color: var(--a5ss-text-muted);
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 2px;
    }

    #a5ss-selected-count {
        display: none;
    }

    .a5ss-order-btn {
        width: auto;
        flex-grow: 1;
        padding: 12px 24px !important;
    }

    .a5ss-message-box {
        position: fixed;
        bottom: 85px;
        left: 20px;
        right: 20px;
        z-index: 10000;
        margin: 0;
        box-shadow: var(--a5ss-shadow-lg);
    }

    /* Padding to bottom of page to avoid text cut off by bottom panel */
    .a5ss-school-container {
        padding-bottom: 120px;
    }
}

@media (max-width: 767px) {
    .a5ss-school-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .a5ss-school-logo {
        width: 80px;
        height: 80px;
    }

    .a5ss-school-meta-grid {
        justify-content: center;
    }

    .a5ss-school-title {
        font-size: 1.6rem;
    }

    .a5ss-main-panel {
        padding: 20px;
    }

    /* Responsive tables */
    .a5ss-items-table thead {
        display: none; /* Hide headers */
    }

    .a5ss-items-table, 
    .a5ss-items-table tbody, 
    .a5ss-items-table tr, 
    .a5ss-items-table td {
        display: block;
        width: 100%;
    }

    .a5ss-items-table tr {
        border-bottom: 1px solid var(--a5ss-border);
        padding: 15px 0;
        position: relative;
    }

    .a5ss-items-table td {
        border: none;
        padding: 6px 0;
        padding-left: 50%; /* Make space for label */
        text-align: right;
    }

    /* Add labels on mobile */
    .a5ss-items-table td::before {
        content: attr(data-title);
        position: absolute;
        left: 0;
        width: 45%;
        text-align: left;
        font-weight: 600;
        font-size: 13px;
        color: var(--a5ss-text-muted);
    }

    .a5ss-items-table td.col-check {
        position: absolute;
        top: 15px;
        left: 0;
        padding: 0;
        z-index: 1;
        width: auto;
    }

    .a5ss-items-table td.col-check::before {
        display: none;
    }

    .a5ss-items-table td.col-img {
        display: flex;
        justify-content: center;
        padding-left: 0;
        margin-bottom: 10px;
        background: #f8fafc;
        border-radius: 6px;
        padding: 10px;
    }

    .a5ss-items-table td.col-img::before {
        display: none;
    }

    .a5ss-items-table td.col-img img {
        width: 80px;
        height: 80px;
    }

    .a5ss-items-table td.col-title {
        text-align: left;
        padding-left: 0;
    }

    .a5ss-items-table td.col-title::before {
        display: none;
    }

    .col-qty {
        display: flex;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   SCHOOL REGISTRATION FORM INTERFACE
   ========================================================================== */
.a5ss-registration-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--a5ss-text);
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.a5ss-registration-hero {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--a5ss-radius);
    padding: 40px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: var(--a5ss-shadow-sm);
    position: relative;
    overflow: hidden;
}

.a5ss-registration-title {
    color: #0f172a !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.2rem;
    margin: 0 0 10px 0;
}

.a5ss-registration-subtitle {
    color: #475569 !important;
    font-size: 15px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.a5ss-registration-form-card {
    background: #ffffff;
    border: 1px solid var(--a5ss-border);
    padding: 40px;
    border-radius: var(--a5ss-radius);
    box-shadow: var(--a5ss-shadow-lg);
}

.a5ss-form-section {
    margin-bottom: 30px;
}

.a5ss-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(227, 28, 37, 0.1);
}

#a5ss-registration-form .a5ss-form-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

#a5ss-registration-form .a5ss-form-row:last-child {
    margin-bottom: 0 !important;
}

#a5ss-registration-form .a5ss-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
}

#a5ss-registration-form .a5ss-form-group.col-6 {
    width: calc(50% - 10px) !important;
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
}

#a5ss-registration-form .a5ss-form-group label {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    clear: both !important;
}

#a5ss-registration-form .a5ss-form-group input[type="text"],
#a5ss-registration-form .a5ss-form-group input[type="email"],
#a5ss-registration-form .a5ss-form-group input[type="tel"],
#a5ss-registration-form .a5ss-form-group textarea {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    font-family: inherit !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--a5ss-border) !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

#a5ss-registration-form .a5ss-form-group input[type="text"]:focus,
#a5ss-registration-form .a5ss-form-group input[type="email"]:focus,
#a5ss-registration-form .a5ss-form-group input[type="tel"]:focus,
#a5ss-registration-form .a5ss-form-group textarea:focus {
    outline: none !important;
    border-color: #e31c25 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(227, 28, 37, 0.12) !important;
}

#a5ss-registration-form .a5ss-form-group textarea {
    resize: vertical !important;
}

/* File Upload input custom styling */
.a5ss-file-upload-wrapper {
    border: 2px dashed var(--a5ss-border);
    padding: 16px;
    border-radius: 8px;
    background: #f8fafc;
    transition: all 0.2s ease;
    text-align: center;
}

.a5ss-file-upload-wrapper:hover {
    border-color: #e31c25;
    background: rgba(227, 28, 37, 0.01);
}

.a5ss-file-upload-wrapper input[type="file"] {
    font-size: 13px;
    color: var(--a5ss-text-muted);
    cursor: pointer;
    width: 100%;
}

.a5ss-file-upload-wrapper .description {
    margin: 8px 0 0 0;
    font-size: 11px;
    color: var(--a5ss-text-muted);
}

/* Color picker container description override */
.a5ss-color-picker-container .description {
    font-size: 13px;
    color: var(--a5ss-text-muted);
}

/* Accent Color selector */
.a5ss-form-group input[type="color"] {
    -webkit-appearance: none;
    border: 1px solid var(--a5ss-border);
    border-radius: 6px;
    width: 60px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.a5ss-form-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.a5ss-form-group input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}

/* Loading/spinner states for submit button */
.a5ss-order-btn.loading {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    position: relative;
}

.a5ss-order-btn.loading::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Message / Alerts */
#a5ss-reg-message {
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0;
    box-shadow: var(--a5ss-shadow-sm);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .a5ss-registration-form-card {
        padding: 24px;
    }
    
    .a5ss-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .a5ss-form-group.col-6 {
        width: 100%;
    }
    
    .a5ss-form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    #a5ss-reg-submit {
        width: 100%;
    }
}

/* Styling for registration form grade upload rows */
#a5ss-registration-form .a5ss-grade-upload-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    align-items: center !important;
    background: #f8fafc !important;
    padding: 15px !important;
    border: 1px solid var(--a5ss-border) !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

#a5ss-registration-form .a5ss-grade-upload-row select {
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--a5ss-border) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    font-size: 14px !important;
    background: #fff !important;
    height: auto !important;
}

#a5ss-registration-form .a5ss-grade-upload-row input[type="file"] {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#a5ss-registration-form .a5ss-remove-grade-row {
    background: transparent !important;
    border: none !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 5px !important;
    transition: color 0.2s ease !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

#a5ss-registration-form .a5ss-remove-grade-row:hover {
    color: #b91c1c !important;
}

@media (max-width: 767px) {
    #a5ss-registration-form .a5ss-grade-upload-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    #a5ss-registration-form .a5ss-grade-upload-row > div {
        max-width: 100% !important;
        width: 100% !important;
    }

    #a5ss-registration-form .a5ss-remove-grade-row {
        align-self: flex-end !important;
    }
}

/* ==========================================================================
   REGISTRATION WIZARD (multi-step)
   ========================================================================== */

/* Honeypot: keep it truly hidden but not display:none (bots skip display:none). */
.a5ss-hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Progress bar */
.a5ss-wizard-steps {
    list-style: none;
    counter-reset: none;
    display: flex;
    gap: 8px;
    margin: 0 0 24px 0;
    padding: 0;
    max-width: 800px;
}

.a5ss-wstep {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    font-size: 12px;
    color: var(--a5ss-text-muted);
    text-align: center;
}

.a5ss-wstep-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    background: #eef2f7;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
    z-index: 1;
}

.a5ss-wstep-label {
    font-weight: 600;
    line-height: 1.2;
}

/* Connector line between step bubbles */
.a5ss-wstep::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.a5ss-wstep:first-child::before { display: none; }

.a5ss-wstep.active .a5ss-wstep-num {
    background: #e31c25;
    background: var(--a5ss-accent);
    border-color: var(--a5ss-accent);
    color: #fff;
}

.a5ss-wstep.active .a5ss-wstep-label { color: var(--a5ss-text); }

.a5ss-wstep.done .a5ss-wstep-num {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.a5ss-wstep.done::before { background: #0f172a; }

/* Wizard panels */
.a5ss-wizard-panel { animation: a5ss-fade-in 0.25s ease; }

@keyframes a5ss-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.a5ss-section-desc {
    font-size: 14px;
    color: var(--a5ss-text-muted);
    margin: -8px 0 22px 0;
    line-height: 1.55;
}

.a5ss-optional-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 10px;
    vertical-align: middle;
    margin-left: 8px;
}

.a5ss-field-hint {
    font-size: 12px;
    color: var(--a5ss-text-muted);
    margin: 6px 0 0 0;
}

/* Grade checkbox chips */
.a5ss-grade-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.a5ss-grade-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--a5ss-border);
    border-radius: 999px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.a5ss-grade-chip input { accent-color: var(--a5ss-accent); margin: 0; }

.a5ss-grade-chip:hover { border-color: var(--a5ss-accent); }

.a5ss-grade-chip:has(input:checked) {
    background: rgba(var(--a5ss-accent-rgb), 0.08);
    border-color: var(--a5ss-accent);
    color: var(--a5ss-accent);
}

/* Grade upload rows (wizard) inner columns */
.a5ss-grade-lists-container { display: flex; flex-direction: column; gap: 12px; }

#a5ss-registration-form .a5ss-gur-grade { flex: 1 1 180px; max-width: 220px; }
#a5ss-registration-form .a5ss-gur-file { flex: 2 1 260px; }

#a5ss-registration-form .a5ss-gur-grade label,
#a5ss-registration-form .a5ss-gur-file label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--a5ss-text-muted) !important;
    margin-bottom: 5px !important;
}

.a5ss-gur-status { font-size: 12px; margin-top: 6px; font-weight: 600; min-height: 16px; }
.a5ss-gur-status.uploading { color: #b45309; }
.a5ss-gur-status.success { color: #15803d; }
.a5ss-gur-status.error { color: #dc2626; }

.a5ss-add-row-btn {
    background: #0f172a !important;
    color: #fff !important;
    border: 1px solid #0f172a !important;
    padding: 9px 18px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    height: auto !important;
    width: auto !important;
}

.a5ss-add-row-btn:hover { background: #1e293b !important; }

/* Wizard action bars */
.a5ss-wizard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--a5ss-border);
}

.a5ss-wizard-actions .a5ss-order-btn { width: auto; margin-left: auto; padding: 12px 28px !important; }
.a5ss-wizard-actions .a5ss-wback { margin-right: auto; }

/* Step 1 has no Back/Skip, so center its single action button. */
.a5ss-wizard-panel[data-step="1"] .a5ss-wizard-actions { justify-content: center; }
.a5ss-wizard-panel[data-step="1"] .a5ss-wizard-actions .a5ss-order-btn { margin-left: 0; margin-right: 0; }

.a5ss-wizard-actions .button:not(.a5ss-order-btn) {
    background: #fff;
    border: 1px solid var(--a5ss-border);
    color: #334155;
    border-radius: 8px;
    padding: 11px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    height: auto;
}

.a5ss-wizard-actions .button:not(.a5ss-order-btn):hover { border-color: #94a3b8; background: #f8fafc; }

.a5ss-wizard-actions .a5ss-step-msg { flex: 1 1 100%; margin: 0 0 6px 0; }

.a5ss-login-hint { font-size: 13px; color: var(--a5ss-text-muted); margin: 16px 0 0 0; text-align: center; }
.a5ss-login-hint a { color: var(--a5ss-accent); font-weight: 600; text-decoration: none; }

/* Done panel */
.a5ss-wizard-done { text-align: center; padding: 20px 0; }
.a5ss-done-icon { color: #15803d; margin-bottom: 6px; }
.a5ss-done-msg { font-size: 15px; color: #475569; line-height: 1.6; max-width: 520px; margin: 0 auto; }

.a5ss-color-inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 767px) {
    .a5ss-wstep-label { display: none; }
    .a5ss-wizard-actions .a5ss-order-btn,
    .a5ss-wizard-actions .button { width: 100%; margin: 0; }
    .a5ss-wizard-actions { flex-direction: column-reverse; }
    #a5ss-registration-form .a5ss-gur-grade,
    #a5ss-registration-form .a5ss-gur-file { max-width: 100%; }
}

/* ==========================================================================
   SCHOOL DASHBOARD + LOGIN
   ========================================================================== */
.a5ss-dashboard-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--a5ss-text);
    max-width: 820px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.a5ss-dashboard-wrapper * { box-sizing: border-box; }

.a5ss-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.a5ss-dashboard-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    margin: 0 0 8px 0;
    color: #0f172a;
}

.a5ss-status-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.a5ss-status-publish { background: #dcfce7; color: #15803d; }
.a5ss-status-pending { background: #fef9c3; color: #a16207; }
.a5ss-status-draft { background: #f1f5f9; color: #64748b; }

.a5ss-logout-link { font-size: 13px; font-weight: 600; color: #64748b; text-decoration: none; }
.a5ss-logout-link:hover { color: var(--a5ss-accent); }

.a5ss-dashboard-card {
    background: #fff;
    border: 1px solid var(--a5ss-border);
    border-radius: var(--a5ss-radius);
    box-shadow: var(--a5ss-shadow-sm);
    padding: 28px;
    margin-bottom: 22px;
}

.a5ss-dashboard-card .a5ss-section-title { font-size: 1.2rem; margin-bottom: 6px; }
.a5ss-dashboard-card .a5ss-section-desc { margin: 8px 0 20px 0; }

.a5ss-dashboard-form .a5ss-form-row,
.a5ss-dashboard-upload .a5ss-form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.a5ss-dashboard-wrapper .a5ss-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    width: 100%;
}

.a5ss-dashboard-wrapper .a5ss-form-group.col-6 { flex: 1 1 calc(50% - 10px); min-width: 220px; }

.a5ss-dashboard-wrapper .a5ss-form-group label { font-size: 14px; font-weight: 600; color: #334155; }

.a5ss-dashboard-wrapper .a5ss-form-group input[type="text"],
.a5ss-dashboard-wrapper .a5ss-form-group input[type="email"],
.a5ss-dashboard-wrapper .a5ss-form-group input[type="tel"],
.a5ss-dashboard-wrapper .a5ss-form-group input[type="password"],
.a5ss-dashboard-wrapper .a5ss-form-group select,
.a5ss-dashboard-wrapper .a5ss-form-group textarea,
.a5ss-login-form input[type="text"],
.a5ss-login-form input[type="password"] {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--a5ss-border);
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.2s ease;
}

.a5ss-dashboard-wrapper .a5ss-form-group input:focus,
.a5ss-dashboard-wrapper .a5ss-form-group select:focus,
.a5ss-dashboard-wrapper .a5ss-form-group textarea:focus,
.a5ss-login-form input:focus {
    outline: none;
    border-color: var(--a5ss-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--a5ss-accent-rgb), 0.12);
}

.a5ss-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.a5ss-form-actions .a5ss-order-btn { width: auto; margin-left: auto; padding: 11px 24px !important; }
.a5ss-form-actions .a5ss-message-box,
.a5ss-form-actions .a5ss-upload-status { margin: 0; }

/* Branding block */
.a5ss-branding-grid { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }

.a5ss-logo-preview {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    border: 1px solid var(--a5ss-border);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.a5ss-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.a5ss-branding-controls { flex: 1 1 320px; display: flex; flex-direction: column; gap: 22px; }
.a5ss-branding-controls label { font-size: 14px; font-weight: 600; color: #334155; display: block; margin-bottom: 8px; }
.a5ss-branding-controls input[type="file"] { font-size: 13px; }

.a5ss-upload-status { font-size: 13px; font-weight: 600; min-height: 16px; }
.a5ss-upload-status.uploading { color: #b45309; }
.a5ss-upload-status.success { color: #15803d; }
.a5ss-upload-status.error { color: #dc2626; }

/* Existing lists */
.a5ss-dash-list-existing { list-style: none; margin: 0 0 22px 0; padding: 0; }
.a5ss-dash-list-existing li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--a5ss-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: #f8fafc;
    font-size: 14px;
}
.a5ss-dash-list-existing li a { color: var(--a5ss-accent); text-decoration: none; font-weight: 600; }
.a5ss-list-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #eef2f7;
    padding: 2px 10px;
    border-radius: 999px;
}

.a5ss-dash-add-list {
    border-top: 1px dashed var(--a5ss-border);
    padding-top: 20px;
}

/* Login card */
.a5ss-login-wrapper { max-width: 440px; }
.a5ss-login-card {
    background: #fff;
    border: 1px solid var(--a5ss-border);
    border-radius: var(--a5ss-radius);
    box-shadow: var(--a5ss-shadow);
    padding: 36px;
}
.a5ss-login-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.7rem; margin: 0 0 6px 0; color: #0f172a; }
.a5ss-login-subtitle { font-size: 14px; color: var(--a5ss-text-muted); margin: 0 0 24px 0; line-height: 1.5; }
.a5ss-login-form .a5ss-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.a5ss-login-form .a5ss-form-group label { font-size: 14px; font-weight: 600; color: #334155; }
.a5ss-login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 13px; }
.a5ss-remember { display: inline-flex; align-items: center; gap: 6px; color: #475569; }
.a5ss-forgot-link { color: var(--a5ss-accent); text-decoration: none; font-weight: 600; }
.a5ss-login-form .a5ss-order-btn { width: 100%; }
.a5ss-login-form .a5ss-message-box { margin-bottom: 16px; }

@media (max-width: 767px) {
    .a5ss-branding-grid { flex-direction: column; }
    .a5ss-dashboard-wrapper .a5ss-form-group.col-6 { flex: 1 1 100%; }
    .a5ss-dashboard-card { padding: 20px; }
}

/* ==========================================================================
   "SUGGEST YOUR SCHOOL" (parent-submitted missing school)
   ========================================================================== */
.a5ss-suggest-school {
    margin-top: 30px;
    background: #fff;
    border: 1px solid var(--a5ss-border);
    border-radius: var(--a5ss-radius);
    box-shadow: var(--a5ss-shadow-sm);
    padding: 30px;
}

.a5ss-suggest-prompt { text-align: center; }

.a5ss-suggest-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 0 8px 0;
    color: #0f172a;
}

.a5ss-suggest-desc {
    font-size: 14px;
    color: var(--a5ss-text-muted);
    max-width: 560px;
    margin: 0 auto 18px auto;
    line-height: 1.55;
}

#a5ss-suggest-toggle.active { opacity: 0.75; }

.a5ss-suggest-form {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--a5ss-border);
    text-align: left;
}

.a5ss-suggest-form .a5ss-form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.a5ss-suggest-form .a5ss-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; width: 100%; }
.a5ss-suggest-form .a5ss-form-group.col-6 { flex: 1 1 calc(50% - 10px); min-width: 220px; }
.a5ss-suggest-form label { font-size: 14px; font-weight: 600; color: #334155; }

.a5ss-suggest-form input[type="text"],
.a5ss-suggest-form input[type="email"],
.a5ss-suggest-form select,
.a5ss-suggest-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--a5ss-border);
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.2s ease;
}

.a5ss-suggest-form input:focus,
.a5ss-suggest-form select:focus,
.a5ss-suggest-form textarea:focus {
    outline: none;
    border-color: var(--a5ss-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--a5ss-accent-rgb), 0.12);
}

.a5ss-suggest-form input[type="file"] { font-size: 13px; }
.a5ss-suggest-form .a5ss-field-hint { font-size: 12px; color: var(--a5ss-text-muted); margin: 4px 0 0 0; }

.a5ss-suggest-form .a5ss-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.a5ss-suggest-form .a5ss-form-actions .a5ss-order-btn { width: auto; margin-left: auto; }
.a5ss-suggest-form .a5ss-message-box { margin: 0; }

@media (max-width: 767px) {
    .a5ss-suggest-form .a5ss-form-group.col-6 { flex: 1 1 100%; }
    .a5ss-suggest-form .a5ss-form-actions .a5ss-order-btn { width: 100%; margin: 0; }
}

/* ==========================================================================
   v2 — swap control, not-stocked note, upload form, homepage banner
   ========================================================================== */
.a5ss-school-container .a5ss-swap { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:#475569; }
.a5ss-school-container .a5ss-swap-label { font-weight:600; white-space:nowrap; }
.a5ss-school-container select.a5ss-swap-select { font-size:12px; padding:4px 8px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#0f172a; max-width:100%; }
.a5ss-not-stocked { margin:12px 0 0; padding:10px 14px; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; font-size:13px; color:#78350f; line-height:1.5; }
.a5ss-not-stocked strong { display:block; margin-bottom:2px; }

.a5ss-banner { background:#fff5f5; border-bottom:1px solid #fecaca; font-family:'Inter',system-ui,sans-serif; }
.a5ss-banner-inner { max-width:1290px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.a5ss-banner-title { font-family:'Outfit',system-ui,sans-serif; font-weight:800; font-size:19px; color:#0f172a; margin:0 0 2px; line-height:1.2; }
.a5ss-banner-sub { margin:0 0 8px; color:#475569; font-size:13.5px; }
.a5ss-banner-actions { display:flex; gap:8px; flex-wrap:wrap; }
.a5ss-banner-btn { display:inline-block; padding:8px 14px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none !important; border:1.5px solid #de1f26; color:#de1f26 !important; background:#fff; line-height:1.2; }
.a5ss-banner-btn-primary { background:#de1f26 !important; color:#fff !important; }
.a5ss-banner-btn:hover { filter:brightness(.95); }
.a5ss-banner-logos { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.a5ss-banner-logo img { width:56px; height:56px; object-fit:contain; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:4px; display:block; }
@media (max-width:640px){ .a5ss-banner-inner { padding:12px 14px; } .a5ss-banner-logos { display:none; } }

.a5ss-back-link { display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; font-size:14px; font-weight:600; color:#475569 !important; text-decoration:none !important; }
.a5ss-back-link:hover { color:var(--a5ss-accent,#e31c25) !important; }

/* v2: theme heading colour must not override the white title on the accent summary header */
.a5ss-school-container .a5ss-summary-header h3 { color: #ffffff !important; }

/* ==========================================================================
   v2.1 — "Upload your stationery list" form (.a5q)
   Self-contained on purpose: every other form rule in this file is scoped to
   #a5ss-registration-form / .a5ss-dashboard-wrapper / .a5ss-login-form, so this
   form inherited nothing and the theme's defaults took over. These rules own
   the whole layout and carry enough weight to beat the active theme.
   ========================================================================== */
.a5q {
  --a5q-red:#de1f26; --a5q-ink:#0f172a; --a5q-mut:#64748b;
  --a5q-line:#dfe3e8; --a5q-soft:#f8fafc;
  max-width:860px; margin:0 auto; box-sizing:border-box;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--a5q-ink);
}
.a5q *, .a5q *::before, .a5q *::after { box-sizing:border-box; }

/* --- heading --- */
.a5q .a5q-head { text-align:center; margin:0 0 22px; }
.a5q .a5q-title { font-family:'Outfit',system-ui,sans-serif; font-weight:800;
  font-size:clamp(22px,4.4vw,31px); line-height:1.15; letter-spacing:-.01em; margin:0 0 9px; color:var(--a5q-ink); }
.a5q .a5q-intro { margin:0 auto; max-width:62ch; font-size:15px; line-height:1.55; color:var(--a5q-mut); }

/* --- card --- */
.a5q .a5q-card { background:#fff; border:1px solid var(--a5q-line); border-radius:14px;
  padding:clamp(18px,3.4vw,30px);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 34px -22px rgba(15,23,42,.3); }
.a5q .a5q-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* --- sections --- */
.a5q .a5q-sec { margin:0 0 26px; }
.a5q .a5q-legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'Outfit',system-ui,sans-serif; font-size:16px; font-weight:700; color:var(--a5q-ink);
  margin:0 0 15px; padding:0 0 11px; border-bottom:1px solid var(--a5q-line); }
.a5q .a5q-legend small { font-weight:500; font-size:13px; color:var(--a5q-mut); }
.a5q .a5q-step { flex:none; width:24px; height:24px; border-radius:50%; background:var(--a5q-red); color:#fff;
  font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* --- field grid: 1 col phone, 2 col tablet, 3 col desktop --- */
.a5q .a5q-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:600px){
  .a5q .a5q-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .a5q .a5q-wide { grid-column:1 / -1; }
}
@media (min-width:880px){
  .a5q .a5q-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* On a three-column grid a full-width school name leaves Phone stranded alone on
     its own line. Two columns keeps it the widest field and fills both rows. */
  .a5q .a5q-wide { grid-column:span 2; }
  .a5q .a5q-grow { grid-column:span 2; }
}

.a5q .a5q-field { display:flex !important; flex-direction:column !important; gap:6px !important;
  width:auto !important; min-width:0; margin:0 !important; padding:0 !important; float:none !important; }
.a5q .a5q-field > label { display:block !important; float:none !important; width:auto !important;
  margin:0 !important; padding:0 !important; font-size:13.5px !important; font-weight:600 !important;
  line-height:1.3 !important; color:#334155 !important; text-transform:none !important; letter-spacing:0 !important; }
.a5q .a5q-field > label em { font-style:normal; color:var(--a5q-red); }

/* --- inputs --- */
.a5q input[type=text], .a5q input[type=email], .a5q input[type=tel], .a5q select {
  display:block !important; width:100% !important; max-width:100% !important; height:auto !important;
  min-height:0 !important; margin:0 !important; float:none !important;
  padding:11px 13px !important; font-family:inherit !important; font-size:15px !important; line-height:1.3 !important;
  color:var(--a5q-ink) !important; background-color:#fff !important;
  border:1px solid var(--a5q-line) !important; border-radius:9px !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none; }
.a5q select {
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; padding-right:36px !important; }
.a5q input:focus, .a5q select:focus { outline:none !important;
  border-color:var(--a5q-red) !important; box-shadow:0 0 0 3px rgba(222,31,38,.13) !important; }
.a5q input::placeholder { color:#94a3b8; opacity:1; }

/* --- file inputs --- */
.a5q input[type=file] { display:block !important; width:100% !important; max-width:100% !important; margin:0 !important;
  padding:8px !important; font-family:inherit !important; font-size:13.5px !important; color:var(--a5q-mut) !important;
  background:#fff !important; border:1px dashed #c9d2dc !important; border-radius:9px !important; cursor:pointer; }
.a5q input[type=file]::file-selector-button { margin-right:10px; padding:8px 14px; font:inherit; font-size:13px;
  font-weight:600; color:#fff; background:var(--a5q-ink); border:0; border-radius:7px; cursor:pointer; }
.a5q input[type=file]::-webkit-file-upload-button { margin-right:10px; padding:8px 14px; font:inherit; font-size:13px;
  font-weight:600; color:#fff; background:var(--a5q-ink); border:0; border-radius:7px; cursor:pointer; }
.a5q input[type=file]:hover { border-color:#9aa6b4 !important; }
.a5q input[type=file]:focus { outline:none !important; border-color:var(--a5q-red) !important; box-shadow:0 0 0 3px rgba(222,31,38,.13) !important; }

/* --- grade rows ---
   The delete control gets its own grid track on every row (hidden, not removed,
   on the first) so each row's fields line up with the row above it. On a phone
   the grade select and the delete button share line 1 and the file input spans
   the full width underneath; from 600px up the three sit side by side. */
.a5q .a5q-rows { display:flex; flex-direction:column; gap:12px; }
.a5q .a5q-row { display:grid !important; grid-template-columns:minmax(0,1fr) 44px; gap:14px 12px;
  align-items:start; margin:0 !important; padding:14px; background:var(--a5q-soft);
  border:1px solid var(--a5q-line); border-radius:11px; }
.a5q .a5q-row > .a5q-rf-grade { grid-column:1; grid-row:1; }
.a5q .a5q-row > .a5q-remove   { grid-column:2; grid-row:1; }
.a5q .a5q-row > .a5q-rf-file  { grid-column:1 / -1; grid-row:2; }
@media (min-width:600px){
  .a5q .a5q-row { grid-template-columns:minmax(118px,168px) minmax(0,1fr) 44px; }
  .a5q .a5q-row > .a5q-rf-file { grid-column:2; grid-row:1; }
  .a5q .a5q-row > .a5q-remove  { grid-column:3; grid-row:1; }
}
.a5q .a5q-rf { display:flex !important; flex-direction:column !important; gap:6px !important;
  min-width:0; margin:0 !important; padding:0 !important; float:none !important; max-width:100% !important; }
.a5q .a5q-rf > label { display:block !important; float:none !important; width:auto !important; margin:0 !important;
  font-size:12.5px !important; font-weight:600 !important; color:#475569 !important; }
.a5q .a5q-rf > label small { font-weight:500; color:var(--a5q-mut); }
/* 25px = the label line (19px) plus the field gap (6px), so the button's top edge
   lines up with the top of the select and the file box rather than the label. */
.a5q .a5q-remove { display:inline-flex; align-items:center; justify-content:center; align-self:start;
  width:44px; height:44px; margin-top:25px; padding:0; font-size:21px; line-height:1; font-family:inherit;
  color:var(--a5q-mut); background:#fff; border:1px solid var(--a5q-line); border-radius:9px; cursor:pointer; }
.a5q .a5q-remove:hover { color:#fff; background:var(--a5q-red); border-color:var(--a5q-red); }
.a5q .a5q-rows .a5q-row:first-child .a5q-remove { visibility:hidden; pointer-events:none; }
.a5q .a5q-status { font-size:12.5px; font-weight:600; color:var(--a5q-mut); word-break:break-word; }
.a5q .a5q-status:empty { display:none; }
.a5q .a5q-status.error { color:#dc2626; }
.a5q .a5q-status.success { color:#15803d; }

.a5q .a5q-add { display:inline-flex; align-items:center; gap:7px; margin:13px 0 0; padding:9px 16px;
  font-family:inherit; font-size:14px; font-weight:600; line-height:1; color:var(--a5q-ink);
  background:#fff; border:1.5px solid var(--a5q-ink); border-radius:9px; cursor:pointer; }
.a5q .a5q-add:hover { color:#fff; background:var(--a5q-ink); }
.a5q .a5q-hint { margin:11px 0 0; font-size:12.5px; line-height:1.5; color:var(--a5q-mut); }

/* --- consent --- */
.a5q .a5q-consent { display:flex !important; align-items:flex-start; gap:11px;
  margin:0 0 20px !important; padding:13px 15px; background:var(--a5q-soft);
  border:1px solid var(--a5q-line); border-radius:10px; cursor:pointer;
  font-size:13.5px !important; font-weight:400 !important; line-height:1.5 !important; color:#475569 !important; }
.a5q .a5q-consent input[type=checkbox] { flex:none; width:17px !important; height:17px !important;
  margin:2px 0 0 !important; accent-color:var(--a5q-red); }

/* --- actions --- */
.a5q .a5q-actions { display:flex; flex-direction:column; gap:12px; }
@media (min-width:600px){
  .a5q .a5q-actions { flex-direction:row; align-items:center; }
  .a5q .a5q-actions .a5q-msg, .a5q .a5q-actions .a5q-prog { flex:1 1 auto; }
}
.a5q .a5q-submit { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:14px 30px; font-family:'Outfit',system-ui,sans-serif; font-size:16px; font-weight:700; line-height:1;
  color:#fff !important; background:var(--a5q-red) !important; border:0 !important; border-radius:10px; cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(222,31,38,.8); transition:filter .12s ease, transform .12s ease; }
.a5q .a5q-submit:hover { filter:brightness(.94); }
.a5q .a5q-submit:active { transform:translateY(1px); }
.a5q .a5q-submit[disabled], .a5q .a5q-submit.loading { opacity:.6; cursor:progress; }
/* Declared after the base rule on purpose: a full-bleed button across an 860px card
   is what made this look clumsy, but it must stay full width on a phone. */
@media (min-width:600px){ .a5q .a5q-actions .a5q-submit { width:auto; margin-left:auto; } }
.a5q .a5q-msg { margin:0 !important; padding:11px 14px; border-radius:9px; font-size:13.5px; line-height:1.45; }
.a5q .a5q-prog { height:7px; background:#e8ecf1; border-radius:4px; overflow:hidden; }
.a5q .a5q-prog .a5ss-quick-bar { display:block; height:100%; width:0; background:var(--a5q-red); border-radius:4px; transition:width .2s ease; }

/* --- thank-you --- */
.a5q .a5q-done { text-align:center; padding:38px 24px; background:#fff;
  border:1px solid var(--a5q-line); border-radius:14px; }
.a5q .a5q-done-icon { color:#16a34a; margin-bottom:10px; line-height:0; }
.a5q .a5q-done-title { font-family:'Outfit',system-ui,sans-serif; font-size:21px; font-weight:700; margin:0 0 9px; }
.a5q .a5q-done-msg { margin:0 auto; max-width:58ch; font-size:15px; line-height:1.55; color:#475569; }

@media (max-width:480px){
  .a5q .a5q-card { border-radius:12px; }
  .a5q .a5q-submit { font-size:15px; padding:13px 22px; }
  .a5q .a5q-legend { font-size:15px; }
}

/* --- per-grade note + the standing accuracy disclaimer under each list --- */
.a5ss-school-container .a5ss-list-note {
  margin:14px 0 0; padding:11px 14px; font-size:13.5px; line-height:1.55;
  color:#7a4a06; background:#fff8ec; border:1px solid #f3dcae; border-radius:9px;
}
.a5ss-school-container .a5ss-list-disclaimer {
  margin:12px 0 0; padding:11px 14px; font-size:12.5px; line-height:1.6;
  color:#5b6674; background:#f6f8fa; border:1px solid #e2e8f0; border-radius:9px;
}
.a5ss-school-container .a5ss-list-disclaimer a { color:#de1f26; text-decoration:underline; }

/* ==========================================================================
   v2.2 — [a5_school_hub] "School Stationery Lists" hub (.a5hub)
   Sits inside .a5q so it inherits the upload form's fonts, colours and box
   sizing. The school cards are the same .a5ss-school-card markup and rules as
   /find-your-school/; only the grid gets a phone-safe minimum column.
   ========================================================================== */
/* The Elementor container on the hub page has no side padding on a phone (measured: 0-375px),
   so the hub carries its own gutter. */
.a5q.a5hub { max-width:1100px; padding:0 clamp(14px,3vw,24px); }
.a5hub .a5q-head { margin-bottom:26px; }

/* --- three steps: stacked on a phone, three across from 720px --- */
.a5hub .a5hub-steps { list-style:none !important; margin:0 0 24px !important; padding:0 !important;
  display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:720px){ .a5hub .a5hub-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.a5hub .a5hub-step { display:flex; gap:13px; align-items:flex-start; min-width:0; margin:0 !important; padding:16px 18px;
  list-style:none !important; background:#fff; border:1px solid var(--a5q-line); border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 34px -22px rgba(15,23,42,.3); }
.a5hub .a5hub-step::before, .a5hub .a5hub-step::marker { content:none; display:none; }
.a5hub .a5hub-step .a5q-step { width:30px; height:30px; font-size:14px; margin-top:1px; }
.a5hub .a5hub-step-body { min-width:0; }
.a5hub .a5hub-step-title { font-family:'Outfit',system-ui,sans-serif; font-size:17px; font-weight:700; line-height:1.25;
  margin:0 0 4px !important; padding:0; color:var(--a5q-ink); }
.a5hub .a5hub-step p { margin:0 !important; font-size:14px; line-height:1.5; color:var(--a5q-mut); }

/* --- the two calls to action: side by side, wrapping to one per line on a narrow phone --- */
.a5hub .a5hub-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 40px; }
.a5hub .a5hub-btn { display:inline-flex; align-items:center; justify-content:center; flex:1 1 220px; max-width:100%;
  min-height:50px; padding:13px 26px; font-family:'Outfit',system-ui,sans-serif; font-size:16px; font-weight:700;
  line-height:1.15; text-align:center; text-decoration:none !important; border-radius:10px;
  border:1.5px solid var(--a5q-red); color:var(--a5q-red) !important; background:#fff !important;
  transition:filter .12s ease, transform .12s ease; }
.a5hub .a5hub-btn-primary { color:#fff !important; background:var(--a5q-red) !important;
  box-shadow:0 8px 18px -10px rgba(222,31,38,.8); }
.a5hub .a5hub-btn:hover { filter:brightness(.94); }
.a5hub .a5hub-btn:active { transform:translateY(1px); }
@media (min-width:600px){ .a5hub .a5hub-btn { flex:0 1 auto; min-width:250px; } }

/* --- live schools --- */
.a5hub .a5hub-h2 { font-family:'Outfit',system-ui,sans-serif; font-weight:800; font-size:clamp(20px,3.8vw,26px);
  line-height:1.2; text-align:center; margin:0 0 18px !important; color:var(--a5q-ink); }
.a5hub .a5hub-grid { margin:0 0 30px; min-height:0;
  grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr)); }
.a5hub .a5hub-grid .a5ss-school-card { min-width:0; }
.a5hub .a5hub-grid .a5ss-card-title { margin-top:0; }
.a5hub .a5hub-empty { grid-column:1 / -1; text-align:center; margin:0; padding:30px 10px; color:var(--a5q-mut); }

.a5hub .a5hub-foot { text-align:center; margin:0 !important; font-size:15px; line-height:1.5; color:var(--a5q-mut); }
.a5hub .a5hub-foot a { color:var(--a5q-red) !important; font-weight:600; text-decoration:underline; overflow-wrap:anywhere; }

/* ==========================================================================
   v2.3 — [a5_principals_note] note to principals on /principals/ (.a5pn)
   Same visual language as the hub: sits inside .a5q for fonts, colours and
   box sizing. Like the hub page, the Elementor container on /principals/ has
   no side padding on a phone, so the note carries its own gutter.
   ========================================================================== */
.a5q.a5pn { max-width:760px; margin:0 auto; padding:26px clamp(14px,3vw,24px) 30px; text-align:center; }
.a5pn .a5q-head { margin:0 0 16px; }
.a5pn .a5pn-title { margin:0; }
.a5pn .a5pn-body { max-width:60ch; margin:0 auto 24px; }
.a5pn .a5pn-body p { margin:0 0 10px !important; font-size:16px; line-height:1.55; color:var(--a5q-ink); }
.a5pn .a5pn-body p:last-child { margin-bottom:0 !important; }

/* --- the red button, with the quieter link underneath it --- */
.a5pn .a5pn-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin:0 0 26px; }
.a5pn .a5pn-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:420px;
  min-height:52px; padding:14px 26px; font-family:'Outfit',system-ui,sans-serif; font-size:17px; font-weight:700;
  line-height:1.15; text-align:center; text-decoration:none !important; border-radius:10px;
  border:1.5px solid var(--a5q-red); color:#fff !important; background:var(--a5q-red) !important;
  box-shadow:0 8px 18px -10px rgba(222,31,38,.8); overflow-wrap:anywhere; }
.a5pn .a5pn-btn:hover { filter:brightness(.94); }
.a5pn .a5pn-btn:active { transform:translateY(1px); }
@media (min-width:600px){ .a5pn .a5pn-btn { width:auto; min-width:300px; } }
.a5pn .a5pn-link { font-size:15px; font-weight:600; color:var(--a5q-mut) !important; text-decoration:underline;
  text-underline-offset:3px; }
.a5pn .a5pn-link:hover { color:var(--a5q-red) !important; }

.a5pn .a5pn-foot { text-align:center; margin:0 !important; font-size:15px; line-height:1.5; color:var(--a5q-mut); }
.a5pn .a5pn-foot a { color:var(--a5q-red) !important; font-weight:600; text-decoration:underline; overflow-wrap:anywhere; }

/* ==========================================================================
   v2.7 — quote button, school supplies tab, finder, parent-supplied flag
   ========================================================================== */

/* The school's own list sits after the grades, set apart (Part B). */
.a5ss-school-container .a5ss-grade-tabs .a5ss-tabs-divider { flex:none; width:1px; align-self:stretch; margin:0 4px; background:var(--a5ss-border); }
.a5ss-school-container .a5ss-grade-tabs .a5ss-tabs-forschool { flex:none; align-self:center; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a5ss-text-muted); white-space:nowrap; }
.a5ss-school-container button.a5ss-grade-tab-btn.a5ss-tab-supplies { border-style:dashed !important; }

/* A grade a parent added, until the school confirms it (Part E3). */
.a5ss-parent-flag { margin:8px 0 0; padding:7px 11px; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:6px; color:#5b21b6; font-size:13px; line-height:1.4; }

/* ==========================================================================
   v2.8 — the A5 equivalent, and who uploaded the grade
   ========================================================================== */

/* A row where the school named a brand and A5 is selling its own (Part A item 5). */
.a5ss-swap-note {
    align-self: flex-start;
    font-size: 11.5px;
    line-height: 1.4;
    color: #5b6674;
    background: #f6f8fa;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 3px 8px;
}

/* Who sent this grade (Part C item 2): quiet on the tab, quiet under the title. */
.a5ss-school-container button.a5ss-grade-tab-btn.a5ss-tab-parent { line-height: 1.15 !important; padding-top: 5px !important; padding-bottom: 5px !important; }
.a5ss-school-container .a5ss-tab-parent-badge { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--a5ss-text-muted); }
.a5ss-school-container button.a5ss-grade-tab-btn.a5ss-tab-parent.active .a5ss-tab-parent-badge { color: inherit; opacity: .8; }
.a5ss-parent-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--a5ss-text-muted); }

/* The invitation to the next parent at the same school (Part C item 2). */
.a5ss-school-container .a5ss-grade-invite {
    margin: 12px 0 0;
    padding: 11px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #334155;
    background: #f5faff;
    border: 1px solid #d8e7f5;
    border-radius: 9px;
}
.a5ss-school-container .a5ss-grade-invite a { color: #de1f26; font-weight: 600; text-decoration: underline; }

/* A school-supplies line whose count could mean boxes or units (Part B). */
.a5ss-qty-confirm { align-self:flex-start; font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* The two buttons in the Pack Summary: cart first on a grade list, quote first on
   the school's own list (Part A + B). */
.a5ss-school-container .a5ss-summary-actions { display:flex; flex-direction:column; gap:10px; }
.a5ss-school-container .a5ss-summary-actions .a5ss-order-btn { margin:0 !important; }
.a5ss-school-container .a5ss-summary-actions .a5ss-quote-btn {
    background:#ffffff !important;
    color:var(--a5ss-accent) !important;
    border:2px solid var(--a5ss-accent) !important;
    box-shadow:none !important;
}
.a5ss-school-container .a5ss-summary-actions .a5ss-quote-btn:hover { background:rgba(var(--a5ss-accent-rgb), 0.06) !important; }
.a5ss-school-container .a5ss-summary-actions.a5ss-quote-first .a5ss-quote-btn {
    order:-1;
    background:var(--a5ss-accent) !important;
    color:#ffffff !important;
}
.a5ss-school-container .a5ss-summary-actions.a5ss-quote-first #a5ss-bulk-add-btn {
    background:#ffffff !important;
    color:var(--a5ss-accent) !important;
    border:2px solid var(--a5ss-accent) !important;
    box-shadow:none !important;
}
.a5ss-school-container .a5ss-summary-actions .a5ss-quote-note { order:9; margin:2px 0 0; font-size:12px; line-height:1.45; color:var(--a5ss-text-muted); }

/* Grade chips on the finder cards, "School supplies" as its own (Part B). */
.a5ss-card-grades { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin:0 0 16px; }
.a5ss-card-chip { display:inline-block; padding:3px 9px; border-radius:999px; background:#f1f5f9; border:1px solid var(--a5ss-border); font-size:11.5px; font-weight:600; color:#334155 !important; text-decoration:none !important; line-height:1.3; }
.a5ss-card-chip:hover { border-color:var(--a5ss-accent); color:var(--a5ss-accent) !important; }
.a5ss-card-chip-supplies { background:#fff7f7; border-style:dashed; }

/* The school finder on the upload form (Part E1). */
.a5q .a5q-finder-wrap { position:relative; }
.a5q .a5q-finder { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:4px; max-height:320px; overflow:auto;
  background:#fff; border:1px solid var(--a5q-line); border-radius:10px; box-shadow:0 12px 30px -12px rgba(15,23,42,.35); }
.a5q .a5q-finder[hidden] { display:none !important; }
.a5q .a5q-finder-item { display:block; width:100%; text-align:left; padding:10px 14px; background:#fff; border:0; border-bottom:1px solid var(--a5q-line); cursor:pointer; font:inherit; color:var(--a5q-ink); }
.a5q .a5q-finder-item:last-child { border-bottom:0; }
.a5q .a5q-finder-item:hover, .a5q .a5q-finder-item:focus { background:var(--a5q-soft); outline:none; }
.a5q .a5q-finder-name { display:block; font-weight:700; font-size:14.5px; }
.a5q .a5q-finder-addr { display:block; font-size:12.5px; color:var(--a5q-mut); margin-top:1px; }
.a5q .a5q-finder-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.a5q .a5q-finder-none { font-size:12px; color:var(--a5q-mut); }
.a5q .a5q-chip { display:inline-block; padding:2px 8px; border-radius:999px; background:#f1f5f9; border:1px solid var(--a5q-line); font-size:11.5px; font-weight:600; color:#334155; }
.a5q input.a5q-locked { background:#f8fafc !important; color:#334155 !important; }
.a5q .a5q-picked { margin:6px 0 0; padding:9px 12px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:13px; line-height:1.45; color:#166534; }
.a5q .a5q-picked[hidden] { display:none !important; }
.a5q .a5q-picked-change { margin-left:6px; padding:0; background:none; border:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--a5q-red); text-decoration:underline; cursor:pointer; }
.a5q .a5q-finder-hint { margin-top:4px; }
.a5q .a5q-row-existing input[type=file] { display:none !important; }
.a5q .a5q-existing { padding:11px 13px; background:#f0fdf4; border:1px solid #86efac; border-radius:9px; font-size:13.5px; line-height:1.5; color:#166534; }
.a5q .a5q-existing[hidden] { display:none !important; }
.a5q .a5q-existing p { margin:0 !important; }
.a5q .a5q-existing .a5q-existing-actions { margin-top:6px !important; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.a5q .a5q-existing-open { font-weight:700; color:#15803d !important; text-decoration:underline; }
.a5q .a5q-existing-insist { padding:0; background:none; border:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--a5q-mut); text-decoration:underline; cursor:pointer; }
.a5q .a5q-existing-insist:hover { color:var(--a5q-red); }

/* v2.8.4 (2026-09-13) - school page layout. Grid children could not shrink below their
   content, so on a phone the grade tabs stretched the panel to ~586px and every price sat
   off-screen, and on desktop the Pack Summary sidebar was pushed past the right edge. The
   pack total also shrank to 36px and broke R617.30 across three lines. */
.a5ss-school-container .a5ss-layout-grid > * { min-width: 0; }
.a5ss-school-container .a5ss-summary-row.total-row { flex: 0 0 auto; }
.a5ss-school-container .a5ss-summary-row.total-row strong { white-space: nowrap; }

/* v2.8.5 (2026-09-13) - desktop regression from v2.8.4. Once the main column could shrink, the
   table kept the width of its longest "Swap for" select (up to 482px), so at 1280-1920px the
   Quantity and Total columns scrolled out of the table box. The select now fills its cell
   instead of sizing the column, and the label wraps. Between 992px and 1199px the two-column
   layout left the table only ~425px, so the Pack Summary now stacks under the list there. */
.a5ss-school-container .a5ss-swap { flex-wrap: wrap; min-width: 0; }
.a5ss-school-container select.a5ss-swap-select { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 160px; box-sizing: border-box; text-overflow: ellipsis; }
@media (min-width: 992px) and (max-width: 1199px) {
    .a5ss-school-container .a5ss-layout-grid { grid-template-columns: 1fr; }
    .a5ss-school-container .a5ss-sidebar { position: static; }
}