/* ================================================================== */
/*  Suite Talk - Review Module — Public Review Form Styles                   */
/*  Adapted from the standalone vehicle-company-review-form plugin     */
/*  with rrs- prefix to avoid conflicts.                               */
/* ================================================================== */

/* ── Custom properties (overridden by inline style from PHP) ── */
.rrs-form-shell {
    --rrs-font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rrs-font-color: #333333;
    --rrs-bg-color: #f2f2f2;
    --rrs-form-bg: #ffffff;
    --rrs-accent: #ec6224;
    --rrs-btn-color: #69B955;
    --rrs-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --rrs-nps-size: 40px;
    --rrs-nps-gap: 8px;
}

/* ── Shell ── */
.rrs-form-shell,
.rrs-form-shell h1,
.rrs-form-shell h2,
.rrs-form-shell h3,
.rrs-form-shell h4,
.rrs-form-shell input,
.rrs-form-shell select,
.rrs-form-shell textarea,
.rrs-form-shell button,
.rrs-form-shell label,
.rrs-form-shell small {
    font-family: var(--rrs-font-family);
    color: var(--rrs-font-color);
}

.rrs-form-shell {
    background-color: var(--rrs-bg-color);
    margin: 0;
    padding: 20px 0;
}

.rrs-form-title {
    text-align: center;
    margin-bottom: 0;
}

#rrsReviewForm {
    max-width: 650px;
    min-height: 420px;
    margin: 80px auto;
    padding: 40px;
    background: var(--rrs-form-bg);
    border-radius: 12px;
    box-shadow: var(--rrs-shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ── Steps ── */
.rrs-form-step {
    display: none;
}

.rrs-form-step.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
}

/* Vehicle-type step has less content — centre it vertically */
.rrs-form-step[data-step-id="vehicle-type"].active {
    justify-content: center;
}

.rrs-form-step.active h2,
.rrs-form-step.active p,
.rrs-form-step.active .rrs-form-nav,
.rrs-form-step.active .rrs-nps-layout,
.rrs-form-step.active label,
.rrs-form-step.active small,
.rrs-form-step.active input,
.rrs-form-step.active select,
.rrs-form-step.active textarea,
.rrs-form-step.active .rrs-other-company-wrap,
.rrs-form-step.active .rrs-autocomplete-wrap,
.rrs-form-step.active .rrs-vehicle-options,
.rrs-form-step.active > .rrs-btn {
    width: 100%;
    box-sizing: border-box;
}

.rrs-form-step.active .rrs-vehicle-options,
.rrs-form-step.active .rrs-form-nav,
.rrs-form-step.active > .rrs-btn {
    width: auto;
}

.rrs-step-desc {
    color: #666;
    font-size: 15px;
    margin-top: -4px;
    margin-bottom: 18px;
}

/* ── Vehicle type selector ── */
.rrs-vehicle-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.rrs-vehicle-card input {
    display: none;
}

.rrs-card-content {
    border: 2px solid #e2e2e2;
    border-radius: 10px;
    padding: 24px;
    cursor: pointer;
    width: 160px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    box-sizing: border-box;
}

.rrs-vehicle-card:hover .rrs-card-content {
    border-color: var(--rrs-accent);
}

.rrs-vehicle-card input:checked + .rrs-card-content {
    border-color: var(--rrs-accent);
    background: #f9dfd3;
    background: color-mix(in srgb, var(--rrs-accent) 15%, transparent);
}

.rrs-vehicle-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

/* ── Form inputs ── */
#rrsReviewForm label {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
    color: var(--rrs-font-color);
    margin-bottom: 0;
}

#rrsReviewForm input[type="text"],
#rrsReviewForm input[type="email"],
#rrsReviewForm textarea,
#rrsReviewForm select {
    background: #f5f5f5 !important;
    color: #333333 !important;
    border: 2px solid #e2e2e2;
    border-radius: 6px;
    font-family: var(--rrs-font-family);
    outline: none;
    box-shadow: none;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 18px;
    font-size: 15px;
    box-sizing: border-box;
}

#rrsReviewForm textarea {
    min-height: 120px;
    resize: vertical;
}

#rrsReviewForm ::placeholder {
    color: #9e9e9e;
}

#rrsReviewForm input:-webkit-autofill,
#rrsReviewForm input:-webkit-autofill:hover,
#rrsReviewForm input:-webkit-autofill:focus,
#rrsReviewForm input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important;
    -webkit-text-fill-color: #333333 !important;
    border-color: #e2e2e2 !important;
}

#rrsReviewForm input:focus,
#rrsReviewForm select:focus,
#rrsReviewForm textarea:focus {
    border-color: var(--rrs-accent) !important;
}

#rrsReviewForm select {
    appearance: none;
}

.rrs-field-note {
    display: block;
    text-align: left;
    font-size: 13px;
    color: #888;
    margin-top: 2px;
    margin-bottom: 4px;
    font-style: italic;
}

.rrs-other-company-wrap {
    margin-top: -10px;
    margin-bottom: 14px;
}

/* ── Custom autocomplete dropdown (replaces <datalist> for mobile compat) ── */
.rrs-autocomplete-wrap {
    position: relative;
    text-align: left;
}

.rrs-autocomplete-list {
    display: none;
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: 100%;
    margin: -14px 0 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 2px solid #e2e2e2;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.rrs-autocomplete-list.open {
    display: block;
}

.rrs-autocomplete-list li {
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    font-family: var(--rrs-font-family);
}

.rrs-autocomplete-list li:hover,
.rrs-autocomplete-list li.highlighted {
    background: #f0f0f0;
}

.rrs-autocomplete-list li.hidden {
    display: none;
}

/* ── Company hint (unlisted company confirmation) ── */
.rrs-company-hint {
    margin-top: 8px;
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.4;
}
.rrs-company-hint .rrs-hint-icon {
    margin-right: 4px;
}
.rrs-company-hint strong {
    color: #78350f;
}

/* ── NPS scale ── */
.rrs-nps-subtitle {
    font-size: 14px;
    color: #888;
    margin: 0 0 4px 0;
    font-style: italic;
    display: none;
}

.rrs-nps-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.rrs-nps-scale {
    display: grid;
    grid-template-columns: repeat(10, var(--rrs-nps-size, 40px));
    gap: var(--rrs-nps-gap, 8px);
    width: max-content;
    margin: 0 auto;
}

/* Bullet-proof button sizing — overrides any theme padding/min-width */
#rrsReviewForm .rrs-nps-scale .rrs-nps-btn {
    width: var(--rrs-nps-size, 40px);
    height: var(--rrs-nps-size, 40px);
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rrs-form-bg, #ffffff) !important;
    border: 1px solid #ccc !important;
    color: var(--rrs-font-color, #333) !important;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    font-weight: 600;
    transition: 0.15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    text-indent: 0;
    letter-spacing: 0;
}

#rrsReviewForm .rrs-nps-scale .rrs-nps-btn:hover {
    background: var(--rrs-form-bg, #ffffff) !important;
    border-color: #aaa !important;
}

#rrsReviewForm .rrs-nps-scale .rrs-nps-btn.selected {
    background: var(--rrs-accent, #ec6224) !important;
    color: #ffffff !important;
    border-color: var(--rrs-accent, #ec6224) !important;
}

#rrsReviewForm .rrs-nps-scale .rrs-nps-btn.selected:hover {
    background: var(--rrs-accent, #ec6224) !important;
    color: #ffffff !important;
    border-color: var(--rrs-accent, #ec6224) !important;
}

/* Labels sit beneath the grid, aligned under 1 and 10 */
.rrs-nps-labels {
    display: flex;
    justify-content: space-between;
    width: calc((var(--rrs-nps-size, 40px) * 10) + (var(--rrs-nps-gap, 8px) * 9));
    margin: 6px auto 0 auto;
    font-size: 12px;
    color: #999;
}

/* ── Buttons ── */
.rrs-form-shell .rrs-btn {
    background: var(--rrs-btn-color) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--rrs-font-family);
    font-size: 15px;
    font-weight: 600;
    margin: 8px;
    transition: background 0.2s, filter 0.2s;
}

.rrs-form-shell .rrs-btn:hover {
    background: var(--rrs-btn-color) !important;
    filter: brightness(0.85);
    color: #ffffff !important;
}

.rrs-form-shell .rrs-btn-back {
    background: #e2e2e2 !important;
    color: #333 !important;
}

.rrs-form-shell .rrs-btn-back:hover {
    background: #ccc !important;
    color: #111 !important;
    filter: none;
}

.rrs-form-shell .rrs-btn-submit {
    background: var(--rrs-accent) !important;
}

.rrs-form-shell .rrs-btn-submit:hover {
    background: var(--rrs-accent) !important;
    filter: brightness(0.85);
}

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

.rrs-form-nav {
    margin-top: 10px;
}

/* ── Message box ── */
.rrs-form-message {
    margin-top: 12px;
    font-size: 14px;
    min-height: 20px;
}

.rrs-form-message:empty {
    display: none;
}

.rrs-msg-success {
    color: #0d7b45;
    font-weight: 600;
}

.rrs-msg-error {
    color: #bb3126;
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .rrs-form-shell {
        padding: 16px 0;
    }

    .rrs-form-title {
        font-size: 1.3em;
        padding: 0 16px;
    }

    #rrsReviewForm {
        margin: 30px 16px;
        padding: 24px;
        max-width: none;
        box-sizing: border-box;
    }

    #rrsReviewForm h2 {
        font-size: 1.2em;
        margin-bottom: 8px;
    }

    .rrs-step-desc {
        font-size: 13px;
    }

    .rrs-vehicle-options {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }

    .rrs-card-content {
        width: 120px;
        padding: 16px;
    }

    .rrs-vehicle-icon {
        font-size: 28px;
        margin-bottom: 6px;
    }

    #rrsReviewForm label {
        font-size: 14px;
    }

    #rrsReviewForm input[type="text"],
    #rrsReviewForm input[type="email"],
    #rrsReviewForm textarea,
    #rrsReviewForm select {
        font-size: 14px;
        padding: 10px;
        margin-bottom: 14px;
    }

    /* NPS — 5-column grid on mobile (2 rows of 5) */
    .rrs-nps-scale {
        grid-template-columns: repeat(5, var(--rrs-nps-size, 40px));
        justify-content: center;
    }

    .rrs-nps-labels {
        display: none;
    }

    .rrs-nps-subtitle {
        display: block;
    }

    .rrs-btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    .rrs-form-nav {
        text-align: center;
    }

    .rrs-field-note {
        font-size: 11px;
    }
}

/* ── Character counter ── */
.rrs-char-counter {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    text-align: right;
}
.rrs-char-counter small {
    color: #9ca3af;
}