/* ================================================================
   HPS Testimonials — Frontend Styles v1.1.0
   ================================================================ */

/* ── CSS Custom Property Defaults ─────────────────────────────── */
:root {
    /* Accent */
    --hps-accent:               #f59e0b;
    --hps-accent-hover:         #d97706;

    /* Form container */
    --hps-form-max-width:       680px;
    --hps-form-bg:              #ffffff;
    --hps-form-padding:         28px 32px;
    --hps-form-radius:          16px;
    --hps-field-gap:            20px;

    /* Labels */
    --hps-label-color:          #6b7280;

    /* Hints */
    --hps-hint-color:           #9ca3af;
    --hps-required-color:       #ef4444;

    /* Inputs */
    --hps-input-bg:             #ffffff;
    --hps-input-color:          #111827;
    --hps-input-border-color:   #d1d5db;
    --hps-input-border-width:   1px;
    --hps-input-radius:         8px;
    --hps-input-padding:        10px 12px;

    /* Stars (form) */
    --hps-star-size:            28px;
    --hps-star-filled:          var(--hps-accent, #f59e0b);
    --hps-star-empty:           #d1d5db;
    --hps-star-gap:             4px;

    /* Button */
    --hps-btn-bg:               var(--hps-accent, #f59e0b);
    --hps-btn-color:            #ffffff;
    --hps-btn-hover-bg:         var(--hps-accent-hover, #d97706);
    --hps-btn-radius:           8px;
    --hps-btn-padding:          14px 24px;

    /* Messages */
    --hps-success-bg:           #f0fdf4;
    --hps-success-color:        #166534;
    --hps-error-bg:             #fef2f2;
    --hps-error-color:          #991b1b;

    /* Display card */
    --hps-card-gap:             24px;
    --hps-card-bg:              #ffffff;
    --hps-card-padding:         28px;
    --hps-card-radius:          12px;
    --hps-card-border-color:    #e5e7eb;
    --hps-card-border-width:    1px;
    --hps-quote-color:          #e5e7eb;
    --hps-quote-size:           48px;
    --hps-text-color:           #374151;
    --hps-name-color:           #111827;
    --hps-meta-color:           #9ca3af;
    --hps-dstar-filled:         #f59e0b;
    --hps-dstar-empty:          #d1d5db;
    --hps-dstar-size:           20px;
    --hps-arrow-bg:             #ffffff;
    --hps-arrow-color:          #374151;
    --hps-dot-color:            #d1d5db;
    --hps-dot-active-color:     #374151;
}

/* ================================================================
   FORM WIDGET
   ================================================================ */

.hps-testi-form-wrap {
    max-width:        var(--hps-form-max-width, 680px);
    margin:           0 auto;
    background-color: var(--hps-form-bg, #ffffff);
    padding:          var(--hps-form-padding, 28px 32px);
    border-radius:    var(--hps-form-radius, 16px);
    box-sizing:       border-box;
}

.hps-testi-form-wrap *,
.hps-testi-form-wrap *::before,
.hps-testi-form-wrap *::after {
    box-sizing: border-box;
}

.hps-testimonial-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--hps-field-gap, 20px);
}

/* ── Field Rows ───────────────────────────────────────────────── */

.hps-form-row {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

/* ── Labels ───────────────────────────────────────────────────── */

.hps-form-row > label,
.hps-form-row > .hps-field-label {
    display:        block;
    font-size:      0.7rem;
    font-weight:    700;
    color:          var(--hps-label-color, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height:    1.4;
    margin-bottom:  2px;
}

.hps-required {
    color: var(--hps-required-color, #ef4444);
}

.hps-label-inline-note {
    font-size:      0.8em;
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          var(--hps-hint-color, #9ca3af);
    margin-left:    6px;
}

/* ── Hints ────────────────────────────────────────────────────── */

.hps-field-hint {
    font-size:  0.75rem;
    color:      var(--hps-hint-color, #9ca3af);
    line-height: 1.5;
    margin:     0;
}

.hps-form-footer-note {
    text-align:  center;
    font-size:   0.75rem;
    color:       var(--hps-hint-color, #9ca3af);
    line-height: 1.5;
    margin:      0;
}

/* ── Two-Column Grid ──────────────────────────────────────────── */

.hps-form-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--hps-field-gap, 20px);
}

.hps-form-grid-2.hps-grid-single {
    grid-template-columns: 1fr;
}

@media (max-width: 540px) {
    .hps-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Input Fields ─────────────────────────────────────────────── */

.hps-testi-form-wrap input[type="text"],
.hps-testi-form-wrap input[type="email"],
.hps-testi-form-wrap textarea,
.hps-testi-form-wrap select {
    width:            100%;
    padding:          var(--hps-input-padding, 10px 12px);
    background-color: var(--hps-input-bg, #ffffff);
    color:            var(--hps-input-color, #111827);
    border:           var(--hps-input-border-width, 1px) solid var(--hps-input-border-color, #d1d5db);
    border-radius:    var(--hps-input-radius, 8px);
    font-family:      inherit;
    font-size:        0.875rem;
    line-height:      1.5;
    transition:       border-color 0.2s ease, box-shadow 0.2s ease;
    outline:          none;
    appearance:       none;
    -webkit-appearance: none;
}

.hps-testi-form-wrap select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right:       36px;
    cursor:              pointer;
}

.hps-testi-form-wrap input[type="text"]:focus,
.hps-testi-form-wrap input[type="email"]:focus,
.hps-testi-form-wrap textarea:focus,
.hps-testi-form-wrap select:focus {
    border-color: var(--hps-accent, #f59e0b);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--hps-accent, #f59e0b) 15%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .hps-testi-form-wrap input[type="text"]:focus,
    .hps-testi-form-wrap input[type="email"]:focus,
    .hps-testi-form-wrap textarea:focus,
    .hps-testi-form-wrap select:focus {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
    }
}

.hps-testi-form-wrap input.hps-invalid,
.hps-testi-form-wrap textarea.hps-invalid,
.hps-testi-form-wrap select.hps-invalid {
    border-color: var(--hps-required-color, #ef4444);
    box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.12);
}

.hps-testi-form-wrap textarea {
    resize:     vertical;
    min-height: 120px;
}

/* ── JS Star Rating (Unicode ★) ───────────────────────────────── */

.hps-star-btns {
    display:     flex;
    gap:         var(--hps-star-gap, 4px);
    align-items: center;
    line-height: 1;
}

.hps-star-btn {
    background:  transparent;
    border:      none;
    padding:     0 1px;
    cursor:      pointer;
    line-height: 1;
    font-size:   var(--hps-star-size, 28px);
    color:       var(--hps-star-empty, #d1d5db);
    transition:  color 0.15s ease, transform 0.12s ease;
    outline:     none;
    display:     inline-block;
    /* Reset any inherited button styles */
    font-family: inherit;
    -webkit-appearance: none;
    appearance:  none;
}

/* Active (selected/filled) state */
.hps-star-btn.hps-star-active {
    color: var(--hps-star-filled, var(--hps-accent, #f59e0b));
}

/* Hover preview class applied by JS */
.hps-star-btn.hps-star-hover {
    color:     var(--hps-star-filled, var(--hps-accent, #f59e0b));
    opacity:   0.75;
    transform: scale(1.1);
}

.hps-star-btn:hover {
    transform: scale(1.12);
}

.hps-star-btn:focus-visible {
    outline:        2px solid var(--hps-accent, #f59e0b);
    outline-offset: 3px;
    border-radius:  4px;
}

/* ── Submit Button ────────────────────────────────────────────── */

.hps-submit-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         var(--hps-btn-padding, 14px 24px);
    background:      var(--hps-btn-bg, #f59e0b);
    color:           var(--hps-btn-color, #ffffff);
    border:          none;
    border-radius:   var(--hps-btn-radius, 8px);
    font-family:     inherit;
    font-size:       0.875rem;
    font-weight:     500;
    cursor:          pointer;
    transition:      background 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
    outline:         none;
    text-decoration: none;
}

.hps-submit-btn:hover:not(:disabled) {
    background: var(--hps-btn-hover-bg, #d97706);
}

.hps-submit-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.hps-submit-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
}

.hps-submit-btn:disabled {
    opacity: 0.7;
    cursor:  not-allowed;
}

/* ── Spinner ──────────────────────────────────────────────────── */

.hps-btn-spinner {
    display:       none;
    width:         16px;
    height:        16px;
    border:        2px solid rgba(255,255,255,0.4);
    border-top:    2px solid #fff;
    border-radius: 50%;
    animation:     hps-spin 0.7s linear infinite;
    flex-shrink:   0;
}

.hps-submit-btn.hps-loading .hps-btn-spinner {
    display: block;
}

.hps-submit-btn.hps-loading .hps-btn-text {
    opacity: 0.8;
}

@keyframes hps-spin {
    to { transform: rotate(360deg); }
}

/* ── Form Messages ────────────────────────────────────────────── */

.hps-form-message {
    display:       none;
    padding:       14px 16px;
    border-radius: var(--hps-input-radius, 8px);
    font-size:     0.875rem;
    line-height:   1.5;
}

.hps-form-message.hps-msg-success {
    display:          block;
    background-color: var(--hps-success-bg, #f0fdf4);
    color:            var(--hps-success-color, #166534);
    border:           1px solid currentColor;
}

.hps-form-message.hps-msg-error {
    display:          block;
    background-color: var(--hps-error-bg, #fef2f2);
    color:            var(--hps-error-color, #991b1b);
    border:           1px solid currentColor;
}

/* ── Field Validation Errors ──────────────────────────────────── */

.hps-field-error {
    font-size:   0.75rem;
    color:       var(--hps-error-color, #991b1b);
    margin-top:  2px;
    display:     block;
}

/* ── Success State (collapse form rows) ───────────────────────── */

.hps-testimonial-form.hps-submitted .hps-form-row,
.hps-testimonial-form.hps-submitted .hps-form-grid-2,
.hps-testimonial-form.hps-submitted .hps-submit-btn,
.hps-testimonial-form.hps-submitted .hps-form-footer-note {
    display: none;
}

/* ================================================================
   DISPLAY WIDGET — Card Styles
   ================================================================ */

:root {
    --hps-dstar-color:        #f59e0b;
    --hps-dstar-empty-color:  #d1d5db;
    --hps-dstar-size:         20px;
    --hps-dstar-gap:          2px;
    --hps-badge-icon-bg:      #10b981;
    --hps-badge-text-color:   #059669;
    --hps-divider-color:      #f3f4f6;
    --hps-shadow-color:       rgba(0,0,0,0.07);
    --hps-shadow-hover-color: rgba(0,0,0,0.13);
}

.hps-testi-display-wrap {
    position:   relative;
    box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────────────────────── */

.hps-testimonial-card {
    background:     var(--hps-card-bg, #ffffff);
    padding:        var(--hps-card-padding, 28px);
    border-radius:  var(--hps-card-radius, 12px);
    border:         var(--hps-card-border-width, 1px) solid var(--hps-card-border-color, #e5e7eb);
    display:        flex;
    flex-direction: column;
    height:         100%;
    box-sizing:     border-box;
    box-shadow:     0 1px 4px var(--hps-shadow-color, rgba(0,0,0,0.07));
    transition:     box-shadow 0.25s ease;
}

.hps-testimonial-card:hover {
    box-shadow: 0 6px 20px var(--hps-shadow-hover-color, rgba(0,0,0,0.13));
}

/* ── Stars (Unicode ★ spans) ──────────────────────────────────── */

.hps-testi-stars {
    display:     flex;
    gap:         var(--hps-dstar-gap, 2px);
    align-items: center;
    line-height: 1;
}

.hps-dstar {
    font-size:   var(--hps-dstar-size, 20px);
    line-height: 1;
    display:     inline-block;
    /* filled color is the default — empty overrides below */
    color:       var(--hps-dstar-color, #f59e0b);
}

.hps-dstar.hps-dstar-empty {
    color: var(--hps-dstar-empty-color, #d1d5db);
}

/* hps-dstar-filled is the default state — rule kept for explicitness */
.hps-dstar.hps-dstar-filled {
    color: var(--hps-dstar-color, #f59e0b);
}

/* ── Verified Badge ───────────────────────────────────────────── */

.hps-verified-badge {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin:      10px 0 14px;
}

.hps-verified-icon {
    width:           16px;
    height:          16px;
    border-radius:   50%;
    background:      var(--hps-badge-icon-bg, #10b981);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    /* CSS-only checkmark via ::after — no SVG needed */
    position:        relative;
}

/* CSS checkmark — reliable across all environments */
.hps-verified-icon::after {
    content:      '';
    display:      block;
    width:        4px;
    height:       7px;
    border:       2px solid #ffffff;
    border-top:   none;
    border-left:  none;
    transform:    rotate(45deg) translateY(-1px);
    flex-shrink:  0;
}

.hps-verified-text {
    font-size:      0.7rem;
    font-weight:    700;
    color:          var(--hps-badge-text-color, #059669);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height:    1;
}

/* ── Review Text ──────────────────────────────────────────────── */

.hps-testi-text {
    color:       var(--hps-text-color, #374151);
    font-size:   0.875rem;
    line-height: 1.7;
    flex-grow:   1;
    margin:      0;
}

/* ── Author ───────────────────────────────────────────────────── */

.hps-testi-author {
    margin-top:  20px;
    padding-top: 16px;
    border-top:  1px solid var(--hps-divider-color, #f3f4f6);
}

.hps-testi-name {
    font-weight:  600;
    color:        var(--hps-name-color, #111827);
    font-size:    0.875rem;
    margin:       0;
    line-height:  1.4;
}

.hps-testi-location,
.hps-testi-service,
.hps-testi-date {
    font-size:   0.75rem;
    color:       var(--hps-meta-color, #9ca3af);
    margin:      3px 0 0;
    line-height: 1.4;
}

/* ── No Testimonials ──────────────────────────────────────────── */

.hps-no-testimonials {
    color:      var(--hps-meta-color, #9ca3af);
    font-style: italic;
    text-align: center;
    padding:    40px;
    margin:     0;
}

/* ================================================================
   GRID LAYOUT
   ================================================================ */

.hps-testimonials-grid {
    display: grid;
    gap:     var(--hps-card-gap, 24px);
}

/* ================================================================
   LIST LAYOUT
   ================================================================ */

.hps-testimonials-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--hps-card-gap, 24px);
}

/* ================================================================
   CAROUSEL LAYOUT
   ================================================================ */

.hps-layout-carousel {
    position:       relative;
    padding-bottom: 52px;
}

.hps-carousel-viewport {
    overflow:   hidden;
    width:      100%;
}

.hps-carousel-track {
    display:    flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hps-carousel-slide {
    flex-shrink: 0;
    box-sizing:  border-box;
}

/* ── Arrows ───────────────────────────────────────────────────── */

.hps-carousel-prev,
.hps-carousel-next {
    position:        absolute;
    top:             50%;
    transform:       translateY(calc(-50% - 26px));
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--hps-arrow-bg, #ffffff);
    color:           var(--hps-arrow-color, #374151);
    border:          1px solid var(--hps-card-border-color, #e5e7eb);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    transition:      box-shadow 0.2s ease;
    box-shadow:      0 2px 8px rgba(0,0,0,0.08);
}

.hps-carousel-prev:hover,
.hps-carousel-next:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}

.hps-carousel-prev:disabled,
.hps-carousel-next:disabled {
    opacity: 0.3;
    cursor:  not-allowed;
}

.hps-carousel-prev { left:  -22px; }
.hps-carousel-next { right: -22px; }

@media (max-width: 767px) {
    .hps-carousel-prev { left:  0; }
    .hps-carousel-next { right: 0; }
    .hps-layout-carousel { padding: 0 44px 52px; }
}

/* ── Dots ─────────────────────────────────────────────────────── */

.hps-carousel-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    position:        absolute;
    bottom:          0;
    left:            0;
    right:           0;
}

.hps-carousel-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--hps-dot-color, #d1d5db);
    border:        none;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s ease, transform 0.2s ease;
}

.hps-carousel-dot.hps-dot-active {
    background: var(--hps-dot-active-color, #374151);
    transform:  scale(1.3);
}