/* ============================================================
   REVIEWS — All Reviews Page · Submit Form Page
   ============================================================ */

/* ── Reviews Page Header Bar ──────────────────────────────── */
.reviews-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}
.reviews-page-header p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Reviews Grid (all reviews page) ─────────────────────── */
.reviews-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* Re-use review card styles */
.review-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.review-card__quote {
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--space-sm);
    opacity: 0.55;
}
.review-card__text {
    font-size: var(--text-base);
    color: var(--text-body);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
    font-style: italic;
}
.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
}
.review-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--green-dark);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-card__avatar img  { width: 100%; height: 100%; object-fit: cover; }
.review-card__avatar span { color: var(--gold); font-weight: 700; font-size: var(--text-md); }
.review-card__author strong { display: block; font-size: var(--text-sm); color: var(--text-dark); font-weight: 700; }
.review-card__author span   { font-size: var(--text-xs); color: var(--text-muted); }

/* ── Submit Form Layout ───────────────────────────────────── */
.review-form-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-2xl);
    align-items: flex-start;
}

/* Reuse contact form styles for inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-group {
    margin-bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.form-group label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-dark);
}
.required { color: var(--gold-dark); }

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-dark);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    width: 100%;
    transition: var(--transition);
    outline: none;
    appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(27,92,40,0.1);
}
.form-group textarea { resize: vertical; min-height: 160px; }

.form-group--error input,
.form-group--error textarea { border-color: #EF9A9A; background: #FFFAFA; }
.form-error { font-size: var(--text-xs); color: #C62828; font-weight: 600; }

.form-alert--error {
    padding: var(--space-md);
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
    color: #C62828;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* ── File Upload ──────────────────────────────────────────── */
.file-upload-wrap { position: relative; }

.file-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    background: var(--off-white);
}
.file-upload-label:hover {
    border-color: var(--green-dark);
    background: var(--green-light);
}

.file-upload-icon { font-size: 1.75rem; }
.file-upload-text { font-size: var(--text-sm); font-weight: 600; color: var(--green-dark); }
.file-upload-hint { font-size: var(--text-xs); color: var(--text-muted); }

.file-upload-name {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 0.4rem;
    padding-left: 0.25rem;
}

/* ── Side Info Cards ──────────────────────────────────────── */
.review-form-info { display: flex; flex-direction: column; gap: var(--space-md); }

.review-info-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}
.review-info-card--green {
    background: var(--green-dark);
    border-color: var(--green-dark);
}
.review-info-card--green p { color: rgba(255,255,255,0.78); font-size: var(--text-sm); line-height: 1.75; }

.review-info-card h4 {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green-dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--gold);
}

/* Review steps */
.review-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    list-style: none;
}
.review-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}
.step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green-dark);
    color: var(--gold);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.review-steps strong { display: block; font-size: var(--text-sm); color: var(--text-dark); margin-bottom: 0.2rem; }
.review-steps p      { font-size: var(--text-xs); color: var(--text-muted); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .reviews-page-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .reviews-page-grid  { grid-template-columns: 1fr; }
    .review-form-layout { grid-template-columns: 1fr; }
    .form-row           { grid-template-columns: 1fr; }
}