/* ==========================================================================
   Testimonials - home-page slider (.tm-*) and the admin editor (.tmadm-*).
   Logical properties only: the slider is direction-agnostic (RTL-safe).
   ========================================================================== */

/* ── Section ── */
.testimonials-section {
    background: #f8f5f7;
    padding: 48px 0 40px;
}
.testimonials-section .container { padding-block: 0; }
.testimonials-section h2 { margin-block-end: 0.25rem; }
.testimonials-section .section-subtitle { margin-block-end: 1.5rem; }

/* ── Slider ── */
.tm-slider { --tm-gap: 1rem; --tm-accent: #650640; position: relative; }

.tm-track {
    display: flex;
    gap: var(--tm-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding-block: 6px 10px;            /* room for the card shadow */
    border-radius: 16px;
}
.tm-track::-webkit-scrollbar { display: none; }
.tm-track:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 4px; }

.tm-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(101, 6, 64, 0.08);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(101, 6, 64, 0.06);
    text-align: start;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.tm-card:hover { box-shadow: 0 8px 24px rgba(101, 6, 64, 0.12); transform: translateY(-2px); }
@media (min-width: 640px)  { .tm-card { flex-basis: calc((100% - var(--tm-gap)) / 2); } }
@media (min-width: 1024px) { .tm-card { flex-basis: calc((100% - 2 * var(--tm-gap)) / 3); } }

.tm-quote { color: var(--tm-accent, #650640); opacity: 0.28; font-size: 1.1rem; }

.tm-text { margin: 0; flex: 1 1 auto; }
.tm-text p {
    margin: 0;
    color: #3b2b36;
    font-size: 0.95rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.tm-stars { display: flex; gap: 2px; color: #e0a100; font-size: 0.8rem; }
.tm-stars[hidden] { display: none; }
.tm-stars .is-off { color: #d9d2d7; }

.tm-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-block-start: 0.7rem;
    border-block-start: 1px solid rgba(101, 6, 64, 0.08);
}
.tm-avatar {
    flex: none;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(101, 6, 64, 0.1);
}
.tm-avatar-initial {
    display: grid;
    place-items: center;
    color: var(--tm-accent, #650640);
    font-weight: 700;
    font-size: 1.05rem;
}
.tm-who { display: flex; flex-direction: column; min-width: 0; }
.tm-name { color: var(--tm-accent, #650640); font-size: 0.95rem; line-height: 1.3; }
.tm-role { color: #7b7480; font-size: 0.82rem; line-height: 1.3; }

/* ── Controls ── */
.tm-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-block-start: 0.6rem;
}
.tm-controls[hidden] { display: none; }

.testimonials-section .tm-btn {                 /* beats the bare button{} rule in styles.css */
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(101, 6, 64, 0.2);
    border-radius: 50%;
    background: #fff;
    color: var(--tm-accent);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.testimonials-section .tm-btn:hover { background: var(--tm-accent); color: #fff; border-color: var(--tm-accent); }
.tm-btn:focus-visible, .tm-dot:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 2px; }
[dir="rtl"] .tm-btn i { transform: scaleX(-1); }

.tm-dots { display: flex; gap: 0.45rem; align-items: center; }
.testimonials-section .tm-dot {
    inline-size: 9px;
    block-size: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(101, 6, 64, 0.2);
    cursor: pointer;
    transition: background 0.2s, inline-size 0.2s;
}
.testimonials-section .tm-dot[aria-current="true"] { background: var(--tm-accent); inline-size: 22px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
    .tm-card, .tm-dot { transition: none; }
    .tm-card:hover { transform: none; }
}

/* ==========================================================================
   Admin editor (admin_testimonials.php)
   ========================================================================== */
.tmadm-page [hidden] { display: none !important; }

.tmadm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 980px) { .tmadm-grid { grid-template-columns: minmax(0, 1fr); } }

.tmadm-panel {
    background: #fff;
    border: 1px solid var(--admin-border, rgba(101, 6, 64, 0.12));
    border-radius: var(--admin-radius, 14px);
    padding: 1.1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(17, 12, 46, 0.05);
    min-width: 0;
}
.tmadm-panel h2 { margin: 0 0 0.9rem; font-size: 1.05rem; color: var(--admin-accent, #650640); }
.tmadm-editor { position: sticky; inset-block-start: 1rem; }
@media (max-width: 980px) { .tmadm-editor { position: static; } }

/* list */
.tmadm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tmadm-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--admin-border, rgba(101, 6, 64, 0.12));
    border-radius: 12px;
    background: #fff;
}
.tmadm-item.is-editing { border-color: var(--admin-accent, #650640); box-shadow: 0 0 0 3px var(--admin-accent-soft, rgba(101, 6, 64, 0.07)); }
.tmadm-item.is-off { opacity: 0.6; }
.tmadm-item .tm-avatar { inline-size: 40px; block-size: 40px; }
.tmadm-meta { min-width: 0; }
.tmadm-meta strong { display: block; font-size: 0.92rem; }
.tmadm-meta span { display: block; font-size: 0.8rem; color: var(--admin-subtle, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmadm-meta .tmadm-snippet { margin-block-start: 0.15rem; }
.tmadm-badge { display: inline-block; margin-inline-start: 0.4rem; padding: 0 0.4rem; border-radius: 6px; background: var(--admin-accent-soft, rgba(101, 6, 64, 0.07)); color: var(--admin-accent, #650640); font-size: 0.7rem; font-weight: 700; }
.tmadm-actions { display: flex; align-items: center; gap: 0.3rem; }
.tmadm-actions form { margin: 0; max-inline-size: none; display: inline-flex; }  /* beats the global form{} rule */
.tmadm-icon-btn {
    inline-size: 32px; block-size: 32px; padding: 0;
    display: inline-grid; place-items: center;
    border: 1px solid var(--admin-border, rgba(101, 6, 64, 0.12));
    border-radius: 8px; background: #fff; color: var(--admin-subtle, #6b7280);
    font-size: 0.78rem; cursor: pointer; text-decoration: none;
    transition: all 0.16s ease;
}
.tmadm-icon-btn:hover { border-color: var(--admin-accent, #650640); color: var(--admin-accent, #650640); background: var(--admin-accent-soft, rgba(101, 6, 64, 0.07)); }
.tmadm-icon-btn.is-danger:hover { border-color: var(--admin-danger, #b91c1c); color: var(--admin-danger, #b91c1c); background: rgba(185, 28, 28, 0.08); }
.tmadm-icon-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.tmadm-toggle { appearance: none; inline-size: 36px; block-size: 20px; margin: 0 0.2rem; border-radius: 10px; background: #cfc8cd; position: relative; cursor: pointer; transition: background 0.16s; }
.tmadm-toggle::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start 0.16s; }
.tmadm-toggle:checked { background: var(--admin-success, #15803d); }
.tmadm-toggle:checked::after { inset-inline-start: 18px; }
.tmadm-toggle:focus-visible { outline: 2px solid var(--admin-accent, #650640); outline-offset: 2px; }

.tmadm-empty { text-align: center; padding: 2rem 1rem; color: var(--admin-subtle, #6b7280); }
.tmadm-empty i { font-size: 1.8rem; color: var(--admin-accent, #650640); opacity: 0.35; display: block; margin-block-end: 0.6rem; }

/* form */
#tmadm-form { max-inline-size: none; margin: 0; }
.tmadm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 560px) { .tmadm-cols { grid-template-columns: 1fr; } }
.tmadm-field { display: flex; flex-direction: column; gap: 0.25rem; margin-block-end: 0.7rem; min-width: 0; }
.tmadm-field > label, .tmadm-label { font-size: 0.78rem; font-weight: 600; color: var(--admin-subtle, #6b7280); }
.tmadm-field input[type="text"], .tmadm-field textarea {
    width: 100%; box-sizing: border-box; padding: 0.5rem 0.65rem;
    border: 1px solid var(--admin-border, rgba(101, 6, 64, 0.12)); border-radius: 9px;
    font: inherit; font-size: 0.88rem; background: #fff; color: inherit;
}
.tmadm-field textarea { min-block-size: 96px; resize: vertical; }
.tmadm-field input:focus, .tmadm-field textarea:focus { outline: none; border-color: var(--admin-accent, #650640); box-shadow: 0 0 0 3px var(--admin-accent-soft, rgba(101, 6, 64, 0.07)); }
.tmadm-count { font-size: 0.72rem; color: var(--admin-subtle, #6b7280); text-align: end; }
.tmadm-ar { direction: rtl; text-align: start; }

.tmadm-rating { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tmadm-rating label { cursor: pointer; }
.tmadm-rating input { position: absolute; opacity: 0; pointer-events: none; }
.tmadm-rating span {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.65rem;
    border: 1px solid var(--admin-border, rgba(101, 6, 64, 0.12)); border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; color: var(--admin-subtle, #6b7280); transition: all 0.16s;
}
.tmadm-rating span i { color: #e0a100; font-size: 0.7rem; }
.tmadm-rating input:checked + span { background: var(--admin-accent, #650640); border-color: var(--admin-accent, #650640); color: #fff; }
.tmadm-rating input:focus-visible + span { outline: 2px solid var(--admin-accent, #650640); outline-offset: 2px; }

.tmadm-photo { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.tmadm-photo .tm-avatar { inline-size: 48px; block-size: 48px; }
.tmadm-photo input[type="file"] { font-size: 0.8rem; max-inline-size: 100%; }
.tmadm-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }

.tmadm-preview { margin-block: 0.4rem 1rem; padding: 1rem; border-radius: 12px; background: #f8f5f7; }
.tmadm-preview .tm-card { max-inline-size: 360px; margin-inline: auto; flex: none; }
.tmadm-preview .tm-card:hover { transform: none; }
.tmadm-preview-label { display: block; margin-block-start: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--admin-subtle, #6b7280); }
.tmadm-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.tmadm-note { margin-block: -0.3rem 0.8rem; }
.tmadm-langs { float: inline-end; display: inline-flex; gap: 0.3rem; }
.tmadm-langs .btn-ghost { padding: 0.15rem 0.6rem; }
.tmadm-langs .btn-ghost[aria-pressed="true"] { background: var(--admin-accent, #650640); border-color: var(--admin-accent, #650640); color: #fff; }