/**
 * Solicitations — Public styles (v1.15.0)
 *
 * Frontend styling for the [yext_solicitations] shortcode: star rating
 * group, Gravity Forms feedback form, brand logos grid.
 *
 * ─── Philosophy ──────────────────────────────────────────────────────
 *
 * The stylesheet is INHERIT-FIRST: text colors, font, and backgrounds
 * default to whatever the host theme provides, so the component blends
 * with its surroundings out-of-the-box.
 *
 * Only the BRAND IDENTITY surfaces use the explicit primary color:
 *   - selected stars
 *   - submit button background
 *   - focus rings
 *
 * "Muted" text (subtitles, empty stars) is achieved with `opacity` on
 * the inherited color rather than a fixed gray, so it adapts to both
 * light and dark themes automatically.
 *
 * ─── Design Tokens ───────────────────────────────────────────────────
 *
 * Every visual choice is exposed as a CSS custom property at the
 * `.yext-solicitations` root, so theme integrators can override the
 * look with a SINGLE declaration without rewriting any rule:
 *
 *   .yext-solicitations {
 *       --yext-solicitations-color-primary: #ff5733;
 *       --yext-solicitations-color-border: rgba(255, 255, 255, 0.15);
 *       --yext-solicitations-radius: 14px;
 *   }
 *
 * Loaded only when the double-guard in `Yext_reviews_enqueue_scripts`
 * passes: enabled flag ON + `[yext_solicitations]` shortcode present.
 *
 * ─── Naming Convention ───────────────────────────────────────────────
 *
 * Structural classes:  BEM (`yext-solicitations__block-element`)
 * Runtime state:        `is-*` (`is-selected`, `is-hover`)
 * Tokens (overridable): `--yext-solicitations-*`
 */

.yext-solicitations {
    /* ── Brand identity (override to recolor the feature) ──── */
    --yext-solicitations-color-primary: #F2B04C;
    --yext-solicitations-color-primary-soft: rgba(242, 176, 76, 0.25);
    --yext-solicitations-color-button-text: #ffffff;

    /* ── Theme-aware tokens (inherit-first) ─────────────────
     *
     * These default to the host theme's values. Override only if your
     * theme is unusual (e.g. dark theme + dark text would need an
     * explicit color).
     */
    --yext-solicitations-color-text: inherit;
    --yext-solicitations-color-bg: transparent;
    --yext-solicitations-color-border: rgba(0, 0, 0, 0.12);

    /* Muted-ness as opacity rather than a fixed gray, so it adapts to
       both light and dark themes. */
    --yext-solicitations-muted-opacity: 0.7;
    --yext-solicitations-star-empty-opacity: 0.22;

    /* Functional colors (rarely overridden) */
    --yext-solicitations-color-error: #b32d2e;

    /* ── Shape ─────────────────────────────────────────────── */
    --yext-solicitations-radius: 10px;
    --yext-solicitations-radius-sm: 6px;

    /* ── Spacing ───────────────────────────────────────────── */
    --yext-solicitations-spacing: 1.5rem;
    --yext-solicitations-spacing-sm: 0.75rem;

    /* ── Effects ───────────────────────────────────────────── */
    --yext-solicitations-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --yext-solicitations-shadow-focus: 0 0 0 3px var(--yext-solicitations-color-primary-soft);
    --yext-solicitations-transition: 0.2s ease;

    /* ── Layout ────────────────────────────────────────────── */
    max-width: 720px;
    margin: 2rem auto;
    padding: var(--yext-solicitations-spacing);
    font-family: inherit;
    color: var(--yext-solicitations-color-text);
    text-align: center;
    box-sizing: border-box;
}

.yext-solicitations *,
.yext-solicitations *::before,
.yext-solicitations *::after {
    box-sizing: border-box;
}

/* ─── Intro (always visible) ─────────────────────────────────────── */

.yext-solicitations__intro {
    margin-bottom: var(--yext-solicitations-spacing);
}

.yext-solicitations__heading {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: inherit;
}

.yext-solicitations__subtitle {
    margin: 0 0 1.25rem;
    color: inherit;
    opacity: var(--yext-solicitations-muted-opacity);
    font-size: 1rem;
    line-height: 1.5;
}

/* ─── Stars ──────────────────────────────────────────────────────── */

.yext-solicitations__stars {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}

.yext-solicitations__star {
    background: transparent;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    color: currentColor;
    opacity: var(--yext-solicitations-star-empty-opacity);
    transition: color var(--yext-solicitations-transition),
                opacity var(--yext-solicitations-transition),
                transform 0.1s ease;
    line-height: 1;
    border-radius: var(--yext-solicitations-radius-sm);
}

.yext-solicitations__star:focus-visible {
    outline: 2px solid var(--yext-solicitations-color-primary);
    outline-offset: 2px;
    opacity: 1;
}

.yext-solicitations__star:hover,
.yext-solicitations__star.is-hover {
    color: var(--yext-solicitations-color-primary);
    opacity: 0.65;
}

.yext-solicitations__star.is-selected {
    color: var(--yext-solicitations-color-primary);
    opacity: 1;
}

.yext-solicitations__star:active {
    transform: scale(0.92);
}

.yext-solicitations__star-icon {
    font-size: 2.75rem;
    display: inline-block;
    line-height: 1;
}

/* ─── Form section (hidden by default; revealed via JS) ──────────── */

.yext-solicitations__form-section {
    margin-top: var(--yext-solicitations-spacing);
    padding: var(--yext-solicitations-spacing);
    background: var(--yext-solicitations-color-bg);
    border: 1px solid var(--yext-solicitations-color-border);
    border-radius: var(--yext-solicitations-radius);
    text-align: left;
    animation: yext-solicitations-fade-in 0.25s ease-out;
}

.yext-solicitations__form-section[hidden],
.yext-solicitations__brands-section[hidden] {
    display: none;
}

/* ─── Gravity Forms base styling inside the form section ─────────
 *
 * Scoped to `.yext-solicitations__form-section` so we never touch
 * other Gravity Forms instances on the same site. Inherit-first:
 * fonts/colors take from the host theme; only the submit button and
 * focus states carry the brand identity.
 */

.yext-solicitations__form-section .gform_heading,
.yext-solicitations__form-section .gform_title {
    margin-top: 0;
    text-align: center;
    color: inherit;
}

.yext-solicitations__form-section .gform_title {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.yext-solicitations__form-section .gform_description {
    color: inherit;
    opacity: var(--yext-solicitations-muted-opacity);
    text-align: center;
    margin-bottom: var(--yext-solicitations-spacing);
    line-height: 1.5;
}

.yext-solicitations__form-section .gform_fields,
.yext-solicitations__form-section .gform_body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yext-solicitations__form-section .gfield {
    margin-bottom: 1rem;
}

.yext-solicitations__form-section .gfield_label,
.yext-solicitations__form-section .gfield > label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: inherit;
    font-size: 0.95rem;
}

.yext-solicitations__form-section .gfield_required {
    color: var(--yext-solicitations-color-error);
    margin-left: 0.2rem;
}

.yext-solicitations__form-section input[type="text"],
.yext-solicitations__form-section input[type="email"],
.yext-solicitations__form-section input[type="tel"],
.yext-solicitations__form-section input[type="url"],
.yext-solicitations__form-section input[type="number"],
.yext-solicitations__form-section textarea,
.yext-solicitations__form-section select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--yext-solicitations-color-border);
    border-radius: var(--yext-solicitations-radius-sm);
    background: var(--yext-solicitations-color-bg);
    font: inherit;
    color: inherit;
    transition: border-color var(--yext-solicitations-transition),
                box-shadow var(--yext-solicitations-transition);
    box-sizing: border-box;
}

.yext-solicitations__form-section input[type="text"]:focus,
.yext-solicitations__form-section input[type="email"]:focus,
.yext-solicitations__form-section input[type="tel"]:focus,
.yext-solicitations__form-section input[type="url"]:focus,
.yext-solicitations__form-section input[type="number"]:focus,
.yext-solicitations__form-section textarea:focus,
.yext-solicitations__form-section select:focus {
    outline: 0;
    border-color: var(--yext-solicitations-color-primary);
    box-shadow: var(--yext-solicitations-shadow-focus);
}

.yext-solicitations__form-section textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.yext-solicitations__form-section select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='currentColor' opacity='0.6' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.25rem;
}

/* Submit button — KEEPS explicit brand colors on purpose: this is the
   primary call-to-action and the main visual anchor of the form. */

.yext-solicitations__form-section .gform_footer {
    text-align: center;
    margin-top: var(--yext-solicitations-spacing);
    padding-top: 0;
}

.yext-solicitations__form-section .gform_button,
.yext-solicitations__form-section input[type="submit"] {
    background-color: var(--yext-solicitations-color-primary);
    color: var(--yext-solicitations-color-button-text);
    border: 0;
    border-radius: var(--yext-solicitations-radius-sm);
    padding: 0.8rem 2rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--yext-solicitations-transition),
                transform 0.1s ease,
                box-shadow var(--yext-solicitations-transition);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

.yext-solicitations__form-section .gform_button:hover,
.yext-solicitations__form-section input[type="submit"]:hover {
    filter: brightness(0.95);
    box-shadow: var(--yext-solicitations-shadow-soft);
}

.yext-solicitations__form-section .gform_button:active,
.yext-solicitations__form-section input[type="submit"]:active {
    transform: translateY(1px);
}

.yext-solicitations__form-section .gform_button:focus-visible,
.yext-solicitations__form-section input[type="submit"]:focus-visible {
    outline: 2px solid var(--yext-solicitations-color-primary);
    outline-offset: 3px;
}

/* Validation + confirmation messages */

.yext-solicitations__form-section .validation_error,
.yext-solicitations__form-section .validation_message,
.yext-solicitations__form-section .gfield_error .gfield_label {
    color: var(--yext-solicitations-color-error);
}

.yext-solicitations__form-section .validation_error,
.yext-solicitations__form-section .validation_message {
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

.yext-solicitations__form-section .gfield_error input,
.yext-solicitations__form-section .gfield_error textarea,
.yext-solicitations__form-section .gfield_error select {
    border-color: var(--yext-solicitations-color-error);
}

.yext-solicitations__form-section .gform_confirmation_message {
    text-align: center;
    padding: var(--yext-solicitations-spacing);
    color: inherit;
    background: var(--yext-solicitations-color-bg);
    border-radius: var(--yext-solicitations-radius);
}

/* ─── Brands section ─────────────────────────────────────────────── */

.yext-solicitations__brands-section {
    margin-top: var(--yext-solicitations-spacing);
    animation: yext-solicitations-fade-in 0.25s ease-out;
}

.yext-solicitations__brands-heading {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: inherit;
}

.yext-solicitations__brands-subtitle {
    margin: 0 0 1.25rem;
    color: inherit;
    opacity: var(--yext-solicitations-muted-opacity);
}

/* Responsive grid: auto-fit + minmax(280px, 1fr) reflows from a 1-col
   stack on narrow screens to 2×N, 3×N, 4×N as the container grows.
   No media queries needed. */
.yext-solicitations__brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.yext-solicitations__brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--yext-solicitations-color-bg);
    border: 1px solid var(--yext-solicitations-color-border);
    border-radius: var(--yext-solicitations-radius);
    transition: transform var(--yext-solicitations-transition),
                box-shadow var(--yext-solicitations-transition),
                border-color var(--yext-solicitations-transition);
    text-decoration: none;
    color: inherit;
    min-height: 150px;
}

.yext-solicitations__brand-card:hover,
.yext-solicitations__brand-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--yext-solicitations-shadow-soft);
    border-color: var(--yext-solicitations-color-primary);
    outline: none;
}

.yext-solicitations__brand-image {
    max-width: 190px;
    max-height: 95px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.yext-solicitations__brands-empty {
    padding: 1rem;
    background: rgba(251, 146, 60, 0.08);
    border: 1px dashed rgba(251, 146, 60, 0.5);
    border-radius: var(--yext-solicitations-radius-sm);
    color: inherit;
    opacity: var(--yext-solicitations-muted-opacity);
    font-size: 0.9rem;
}

/* ─── Animation ──────────────────────────────────────────────────── */

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

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .yext-solicitations {
        padding: 1rem;
        margin: 1rem auto;
    }
    .yext-solicitations__heading {
        font-size: 1.4rem;
    }
    .yext-solicitations__star-icon {
        font-size: 2.25rem;
    }
    .yext-solicitations__form-section {
        padding: 1rem;
    }
    .yext-solicitations__form-section .gform_button,
    .yext-solicitations__form-section input[type="submit"] {
        width: 100%;
    }
}

/* ─── Page Template Container ────────────────────────────────────────────────
 *
 * Replicates the Tailwind `.container.mx-auto` pattern: full-width on mobile,
 * capped and centered at each of Tailwind's default breakpoints.
 *
 * Override the maximum cap without touching the breakpoints:
 *
 *   :root {
 *       --yext-solicitations-container-max-width: 1280px;
 *   }
 *
 * Override breakpoints AND cap entirely (theme stylesheet, higher specificity):
 *
 *   .yext-solicitations-template__container {
 *       max-width: 900px;
 *       padding-inline: 2rem;
 *   }
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
    --yext-solicitations-container-max-width: 1536px; /* Tailwind 2xl default */
}

.yext-solicitations-template__container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 640px) {
    .yext-solicitations-template__container { max-width: 640px; }
}

@media (min-width: 768px) {
    .yext-solicitations-template__container { max-width: 768px; }
}

@media (min-width: 1024px) {
    .yext-solicitations-template__container { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .yext-solicitations-template__container { max-width: 1280px; }
}

@media (min-width: 1536px) {
    .yext-solicitations-template__container {
        max-width: var(--yext-solicitations-container-max-width);
    }
}