/* ============================================================
   KapiReviews – Public Styles
   Kapibara Media | https://kapibara.media
   ============================================================ */

:root {
    --kapi-primary:       #2563eb;
    --kapi-primary-dark:  #1d4ed8;
    --kapi-star:          #f59e0b;
    --kapi-star-empty:    #d1d5db;
    --kapi-text:          #111827;
    --kapi-muted:         #6b7280;
    --kapi-border:        #e5e7eb;
    --kapi-bg:            #ffffff;
    --kapi-bg-subtle:     #f9fafb;
    --kapi-radius:        12px;
    --kapi-shadow:        0 2px 12px rgba(0,0,0,.08);
    --kapi-shadow-hover:  0 6px 24px rgba(0,0,0,.13);
    --kapi-transition:    .2s ease;
}

/* ─── Form ──────────────────────────────────────────────── */
.kapi-form-wrap {
    max-width: 640px;
    margin: 0 auto;
}
.kapi-form-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kapi-text);
    margin-bottom: .35rem;
}
.kapi-form-intro {
    color: var(--kapi-muted);
    margin-bottom: 1.5rem;
}
.kapi-form {
    background: var(--kapi-bg);
    border: 1px solid var(--kapi-border);
    border-radius: var(--kapi-radius);
    padding: 2rem;
    box-shadow: var(--kapi-shadow);
}
.kapi-form-row {
    margin-bottom: 1.25rem;
}
.kapi-form-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 520px) {
    .kapi-form-row--half { grid-template-columns: 1fr; }
    .kapi-form { padding: 1.25rem; }
}
.kapi-label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .4rem;
    color: var(--kapi-text);
}
.kapi-required { color: #ef4444; }
.kapi-input,
.kapi-textarea {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--kapi-border);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--kapi-text);
    background: var(--kapi-bg);
    transition: border-color var(--kapi-transition), box-shadow var(--kapi-transition);
    box-sizing: border-box;
}
.kapi-input:focus,
.kapi-textarea:focus {
    outline: none;
    border-color: var(--kapi-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.kapi-textarea { resize: vertical; min-height: 120px; }

/* ─── Star rating ───────────────────────────────────────── */
.kapi-star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.kapi-star-input { display: none; }
.kapi-star-label {
    font-size: 2rem;
    color: var(--kapi-star-empty);
    cursor: pointer;
    transition: color var(--kapi-transition), transform var(--kapi-transition);
    line-height: 1;
}
.kapi-star-rating:not(:has(input:checked)) .kapi-star-label:hover,
.kapi-star-rating:not(:has(input:checked)) .kapi-star-label:hover ~ .kapi-star-label {
    color: var(--kapi-star);
}
.kapi-star-input:checked ~ .kapi-star-label,
.kapi-star-input:checked + .kapi-star-label {
    color: var(--kapi-star);
}
.kapi-star-rating input:checked ~ label { color: var(--kapi-star); }
.kapi-star-label:hover { transform: scale(1.15); }

/* ─── Submit button ─────────────────────────────────────── */
.kapi-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--kapi-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--kapi-transition), transform var(--kapi-transition);
}
.kapi-submit-btn:hover { background: var(--kapi-primary-dark); transform: translateY(-1px); }
.kapi-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

@keyframes kapi-spin { to { transform: rotate(360deg); } }
.kapi-spin { animation: kapi-spin .8s linear infinite; }

/* ─── Messages ──────────────────────────────────────────── */
.kapi-form-messages {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 500;
}
.kapi-form-messages--success {
    background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;
}
.kapi-form-messages--error {
    background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}

/* ─── Review card (shared) ──────────────────────────────── */
.kapi-review-card {
    background: var(--kapi-bg);
    border: 1px solid var(--kapi-border);
    border-radius: var(--kapi-radius);
    padding: 1.5rem;
    box-shadow: var(--kapi-shadow);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    transition: box-shadow var(--kapi-transition), transform var(--kapi-transition);
}
.kapi-review-card:hover {
    box-shadow: var(--kapi-shadow-hover);
    transform: translateY(-2px);
}
.kapi-review-stars { display: flex; gap: 2px; align-items: center; }
.kapi-star { font-size: 1.15rem; color: var(--kapi-star-empty); }
.kapi-star--filled { color: var(--kapi-star); }
.kapi-rating-num { margin-left: .5rem; font-size: .8rem; color: var(--kapi-muted); font-weight: 600; }
.kapi-review-body {
    margin: 0; padding: 0;
    color: var(--kapi-text);
    font-size: .975rem;
    line-height: 1.65;
    /*display: -webkit-box;*/
    /*-webkit-line-clamp: 6;*/
    /*-webkit-box-orient: vertical;*/
    overflow: hidden;
    border: none;
}
.kapi-review-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--kapi-border);
}
.kapi-review-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--kapi-primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.kapi-review-name { display: block; font-size: .9rem; color: var(--kapi-text); }
.kapi-review-date { display: block; font-size: .78rem; color: var(--kapi-muted); }

/* ─── Single review ─────────────────────────────────────── */
.kapi-review-card--single { max-width: 640px; }
.kapi-review-card--single .kapi-review-body { -webkit-line-clamp: unset; }

/* ─── Carousel ──────────────────────────────────────────── */
.kapi-carousel-wrap { position: relative; margin-bottom: 2rem; }
.kapi-carousel { position: relative; }
.kapi-carousel-track {
    display: flex;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    gap: 1.25rem;
    overflow: hidden;
}
.kapi-carousel-slide {
    flex: 0 0 calc(33.333% - .84rem);
    min-width: 0;
}
@media (max-width: 900px) {
    .kapi-carousel-slide { flex: 0 0 calc(50% - .625rem); }
}
@media (max-width: 560px) {
    .kapi-carousel-slide { flex: 0 0 100%; }
}
.kapi-carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--kapi-bg); border: 1.5px solid var(--kapi-border);
    border-radius: 50%; width: 42px; height: 42px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.1rem; color: var(--kapi-text);
    box-shadow: var(--kapi-shadow);
    transition: background var(--kapi-transition), box-shadow var(--kapi-transition);
    z-index: 2;
}
.kapi-carousel-btn:hover { background: var(--kapi-primary); color: #fff; border-color: var(--kapi-primary); }
.kapi-carousel-btn--prev { left: -20px; }
.kapi-carousel-btn--next { right: -20px; }
.kapi-carousel-dots {
    display: flex; justify-content: center; gap: .5rem; margin-top: 1rem;
}
.kapi-carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--kapi-border); border: none; cursor: pointer;
    transition: background var(--kapi-transition), transform var(--kapi-transition);
}
.kapi-carousel-dot--active {
    background: var(--kapi-primary); transform: scale(1.3);
}

/* ─── Grid (all reviews) ─────────────────────────────────── */
.kapi-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* ─── Pagination ────────────────────────────────────────── */
.kapi-pagination {
    display: flex; flex-wrap: wrap; gap: .4rem;
    justify-content: center; margin-top: 2rem;
}
.kapi-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 .6rem;
    border: 1.5px solid var(--kapi-border); border-radius: 8px;
    color: var(--kapi-text); text-decoration: none; font-weight: 600; font-size: .875rem;
    transition: all var(--kapi-transition);
}
.kapi-page-btn:hover { border-color: var(--kapi-primary); color: var(--kapi-primary); }
.kapi-page-btn.kapi-page--active { background: var(--kapi-primary); border-color: var(--kapi-primary); color: #fff; }

/* ─── Standalone ────────────────────────────────────────── */
.kapi-standalone-body { background: var(--kapi-bg-subtle); display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.kapi-standalone-wrap { width: 100%; max-width: 680px; }
.kapi-standalone-header { text-align: center; margin-bottom: 2rem; }
.kapi-standalone-header img { max-height: 60px; }

.kapi-no-reviews { color: var(--kapi-muted); }