/**
 * Styles for the plugin's public shortcodes.
 *
 * Everything is driven by custom properties, so the look can be changed
 * from the theme without touching this file — override any of the
 * --rg-school-* values in a snippet or the page's CSS box. To use none of
 * this at all, pass style="none" on the shortcode.
 */

.rg-school-select {
    /* --- override these --- */
    --rg-school-accent: #c8102e;              /* graduation red */
    --rg-school-accent-hover: #a20d24;
    --rg-school-on-accent: #fff;
    --rg-school-shadow: 0 4px 14px rgba(200, 16, 46, .32);
    --rg-school-field-bg: #fff;
    --rg-school-field-color: #17171b;
    --rg-school-field-border: #c3c4c7;
    --rg-school-field-radius: 8px;
    --rg-school-button-radius: 999px;
    --rg-school-width: 480px;
    --rg-school-gap: 14px;

    display: flex;
    flex-direction: column;
    gap: var(--rg-school-gap);
    width: 100%;
    max-width: var(--rg-school-width);
    margin-left: auto;
    margin-right: auto;
}

.rg-school-select * { box-sizing: border-box; }

.rg-school-label {
    font-weight: 600;
    text-align: center;
}

.rg-school-input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;              /* 16px stops iOS zooming on focus */
    line-height: 1.3;
    color: var(--rg-school-field-color);
    background: var(--rg-school-field-bg);
    border: 1px solid var(--rg-school-field-border);
    border-radius: var(--rg-school-field-radius);
}

.rg-school-button {
    width: 100%;
    padding: 14px 28px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--rg-school-on-accent);
    background: var(--rg-school-accent);
    border: 0;
    border-radius: var(--rg-school-button-radius);
    box-shadow: var(--rg-school-shadow);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.rg-school-button:hover { background: var(--rg-school-accent-hover); transform: translateY(-1px); }

.rg-school-input:focus-visible,
.rg-school-button:focus-visible {
    outline: 2px solid var(--rg-school-accent);
    outline-offset: 2px;
}

/* layout="inline" — dropdown and button side by side (for a hero band). */
.rg-school-select.is-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: none;
}
.rg-school-select.is-inline .rg-school-label { width: 100%; }
.rg-school-select.is-inline .rg-school-input { width: auto; flex: 1 1 260px; max-width: 420px; }
.rg-school-select.is-inline .rg-school-button { width: auto; flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* [rg_store_header] — the store header bar on theme-built pages.     */
/* Mirrors the header rules in rgc-store.css; keep the two in step.   */
/* ------------------------------------------------------------------ */
.rgc-store-header { background: linear-gradient(105deg, #c8102e 0%, #9a0c22 58%, #17171b 125%); color: #fff; }
.rgc-store-header-inner {
    max-width: 1080px; margin: 0 auto; padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rgc-store-brand { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.rgc-store-logo { display: block; max-height: 48px; width: auto; }
.rgc-store-header-right { display: flex; align-items: center; gap: 14px; }
.rgc-school-badge { font-size: 13px; background: rgba(255,255,255,.14); padding: 4px 10px; border-radius: 12px; }
.rgc-change-school { color: #ffd6db; margin-left: 6px; font-size: 12px; }
.rgc-cart-link { color: #fff; text-decoration: none; font-size: 18px; }
.rgc-cart-count {
    background: var(--rgc-gold, #17171b); color: #fff; border-radius: 10px; padding: 0 7px;
    font-size: 12px; font-weight: 700; vertical-align: top;
}
@media (max-width: 600px) {
    .rgc-school-badge { display: none; }
}