/* ============================================================
   MY CUSTOM REVIEWS — v3 Final (Elementor-Safe)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

#hf-rev-container {
    --green:        #4e8c2f;
    --green-mid:    #6aae3f;
    --green-glow:   rgba(78,140,47,.15);
    --gold:         #f5b731;
    --surface:      #f4f7f0;
    --card:         #ffffff;
    --border:       #dce8cc;
    --border-light: #eef4e6;
    --txt:          #1a2a10;
    --txt-mid:      #3d5228;
    --txt-muted:    #7a9060;
    --shadow-sm:    0 2px 8px rgba(20,50,5,.07);
    --shadow-md:    0 6px 24px rgba(20,50,5,.11);
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
    --ff-display: 'Playfair Display', Georgia, serif;
    --ff-body:    'DM Sans', -apple-system, sans-serif;
}

#hf-rev-container *,
#hf-rev-container *::before,
#hf-rev-container *::after {
    box-sizing: border-box !important;
}

#hf-rev-container {
    background: var(--surface) !important;
    padding: 36px 20px !important;
    border-radius: var(--r-xl) !important;
    max-width: 1100px !important;
    margin: 20px auto !important;
    font-family: var(--ff-body) !important;
    color: var(--txt) !important;
    line-height: normal !important;
}

#hf-rev-container #hf-rev-flex-wrapper {
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

#hf-rev-container #hf-rev-main-column {
    flex: 1 1 340px !important;
    min-width: 0 !important;
}

#hf-rev-container #hf-rev-form-card {
    flex: 0 0 360px !important;
    max-width: 100% !important;
}

#hf-rev-container .hf-rev-card {
    background: var(--card) !important;
    border-radius: var(--r-lg) !important;
    border: 1.5px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

#hf-rev-container #hf-rev-summary-card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 22px 26px !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
}

#hf-rev-container #hf-rev-summary-card::before,
#hf-rev-container #hf-rev-summary-card::after { display: none !important; }

#hf-rev-container .hf-rev-summary-header-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid var(--border-light) !important;
}

#hf-rev-container .hf-big-num {
    font-family: var(--ff-display) !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    color: var(--txt) !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    letter-spacing: -1px !important;
    background: none !important;
    border: none !important;
    text-shadow: none !important;
}

#hf-rev-container .hf-stars-container {
    position: relative !important;
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 0 7px !important;
    letter-spacing: 3px !important;
}

#hf-rev-container .hf-stars-background {
    color: #d8e8c8 !important;
    display: block !important;
}

#hf-rev-container .hf-stars-inner {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: #f5b731 !important;
    z-index: 1 !important;
    transition: width .6s ease !important;
    display: block !important;
}

#hf-rev-container .hf-rev-count-text {
    font-size: 12px !important;
    color: var(--txt-muted) !important;
    font-weight: 500 !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 1.5 !important;
}

#hf-rev-container .hf-rev-bar-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

#hf-rev-container .hf-rev-bar-row:last-child { margin-bottom: 0 !important; }

#hf-rev-container .hf-rev-bar-label {
    flex: 0 0 68px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--txt) !important;
    line-height: 1.4 !important;
    padding: 0 !important; margin: 0 !important;
}

#hf-rev-container .hf-rev-bar-outer {
    flex: 1 1 auto !important;
    height: 8px !important;
    background: #eef4e6 !important;
    border-radius: 99px !important;
    margin: 0 10px !important;
    overflow: hidden !important;
    min-width: 40px !important;
}

#hf-rev-container .hf-rev-bar-inner {
    height: 100% !important;
    background: #6aae3f !important;
    border-radius: 99px !important;
    transition: width .8s ease !important;
    display: block !important;
    min-width: 0 !important;
}

#hf-rev-container .hf-rev-bar-pct {
    flex: 0 0 32px !important;
    text-align: right !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--txt-muted) !important;
    padding: 0 !important; margin: 0 !important;
}

#hf-rev-container #hf-rev-list-container { margin-top: 0 !important; }

#hf-rev-container .hf-list-title {
    font-family: var(--ff-display) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--txt) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: none !important;
    background: none !important;
}

#hf-rev-container .hf-list-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--border) !important;
    display: block !important;
}

#hf-rev-container .hf-list-title::before { display: none !important; }

#hf-rev-container .hf-rev-single-item {
    background: var(--card) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    padding: 18px 20px !important;
    margin-bottom: 10px !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .2s, box-shadow .2s !important;
    display: block !important;
}

#hf-rev-container .hf-rev-single-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, #6aae3f, #f5b731) !important;
    border-radius: 3px 0 0 3px !important;
    display: block !important;
}

#hf-rev-container .hf-rev-single-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

#hf-rev-container .hf-rev-single-item.hf-hidden-review { display: none !important; }

#hf-rev-container .hf-rev-item-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

#hf-rev-container .hf-rev-item-author-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#hf-rev-container .hf-rev-avatar {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4e8c2f, #6aae3f) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: white !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(78,140,47,.25) !important;
    font-family: var(--ff-body) !important;
    line-height: 1 !important;
}

#hf-rev-container .hf-rev-item-author-info {
    display: flex !important;
    flex-direction: column !important;
}

#hf-rev-container .hf-rev-item-author {
    font-weight: 700 !important;
    color: var(--txt) !important;
    font-size: 13.5px !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 1.4 !important;
}

#hf-rev-container .hf-rev-item-date {
    font-size: 11px !important;
    color: var(--txt-muted) !important;
    margin-top: 1px !important;
    display: block !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

#hf-rev-container .hf-rev-item-stars {
    font-size: 14px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

#hf-rev-container .hf-rev-item-content {
    line-height: 1.7 !important;
    color: #4a5c35 !important;
    font-size: 13.5px !important;
    padding-left: 46px !important;
    margin: 0 !important;
}

#hf-rev-container .hf-rev-item-images {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-left: 46px !important;
    flex-wrap: wrap !important;
}

#hf-rev-container .hf-rev-thumb {
    width: 64px !important; height: 64px !important;
    object-fit: cover !important;
    border-radius: var(--r-sm) !important;
    border: 2px solid var(--border) !important;
    transition: transform .2s, border-color .2s !important;
    cursor: pointer !important;
    display: block !important;
}

#hf-rev-container .hf-rev-thumb:hover {
    transform: scale(1.07) !important;
    border-color: #6aae3f !important;
}

#hf-rev-container #hf-load-more-wrap {
    text-align: center !important;
    margin-top: 6px !important;
}

#hf-rev-container #hf-load-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    color: var(--txt-mid) !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: var(--ff-body) !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s, color .2s !important;
    letter-spacing: .3px !important;
    text-decoration: none !important;
    line-height: normal !important;
    box-shadow: none !important;
    outline: none !important;
}

#hf-rev-container #hf-load-more-btn:hover {
    background: #4e8c2f !important;
    border-color: #4e8c2f !important;
    color: white !important;
}

#hf-rev-container #hf-load-more-btn svg {
    width: 14px !important; height: 14px !important;
    transition: transform .2s !important;
    display: inline-block !important;
}

#hf-rev-container #hf-load-more-btn:hover svg { transform: translateY(2px) !important; }

#hf-rev-container .hf-no-rev-empty {
    text-align: center !important;
    padding: 36px 20px !important;
    color: var(--txt-muted) !important;
    font-size: 14px !important;
    font-style: italic !important;
    background: var(--card) !important;
    border: 1px dashed var(--border) !important;
    border-radius: var(--r-md) !important;
}

/* ── FORM ──────────────────────────────────────────────── */
#hf-rev-container #hf-rev-form-card { padding: 28px 26px !important; }

#hf-rev-container .hf-form-header { margin-bottom: 22px !important; }

#hf-rev-container .hf-form-header h3 {
    font-family: var(--ff-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important; padding: 0 !important;
    color: var(--txt) !important;
    letter-spacing: -.3px !important;
    border: none !important; background: none !important;
    line-height: 1.3 !important;
}

#hf-rev-container .hf-form-header p {
    font-size: 12.5px !important;
    color: var(--txt-muted) !important;
    margin: 0 !important; padding: 0 !important;
}

#hf-rev-container .hf-field-group { margin-bottom: 16px !important; }

#hf-rev-container .hf-field-group label {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
    color: var(--txt-mid) !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-family: var(--ff-body) !important;
    cursor: default !important;
    transition: none !important;
}

#hf-rev-container #hf-rev-form input[type="text"],
#hf-rev-container #hf-rev-form textarea {
    width: 100% !important;
    padding: 10px 13px !important;
    font-size: 13.5px !important;
    font-family: var(--ff-body) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: #fafcf8 !important;
    color: var(--txt) !important;
    box-sizing: border-box !important;
    transition: border-color .2s, box-shadow .2s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important;
}

#hf-rev-container #hf-rev-form textarea {
    min-height: 95px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

#hf-rev-container #hf-rev-form input[type="text"]:focus,
#hf-rev-container #hf-rev-form textarea:focus {
    border-color: #4e8c2f !important;
    box-shadow: 0 0 0 3px rgba(78,140,47,.15) !important;
    background: #fff !important;
    outline: none !important;
}

#hf-rev-container .hf-rev-star-input {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-top: 3px !important;
}

#hf-rev-container .hf-rev-star-input input[type="radio"] {
    display: none !important;
}

#hf-rev-container .hf-rev-star-input label {
    cursor: pointer !important;
    font-size: 28px !important;
    color: #dce8cc !important;
    margin: 0 !important; padding: 0 !important;
    transition: color .15s, transform .15s !important;
    line-height: 1 !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
}

#hf-rev-container .hf-rev-star-input label:hover { transform: scale(1.15) !important; }

#hf-rev-container .hf-rev-star-input label:hover,
#hf-rev-container .hf-rev-star-input label:hover ~ label,
#hf-rev-container .hf-rev-star-input input[type="radio"]:checked ~ label {
    color: #f5b731 !important;
    filter: drop-shadow(0 1px 3px rgba(245,183,49,.4)) !important;
}

#hf-rev-container .hf-upload-input-wrapper {
    background: #f7faf4 !important;
    padding: 11px 13px !important;
    border-radius: var(--r-sm) !important;
    border: 1.5px dashed var(--border) !important;
    transition: border-color .2s !important;
}

#hf-rev-container .hf-upload-input-wrapper:hover { border-color: #6aae3f !important; }

#hf-rev-container #hf-rev-images-input {
    width: 100% !important;
    font-size: 12.5px !important;
    font-family: var(--ff-body) !important;
    color: var(--txt-mid) !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    line-height: normal !important;
    display: block !important;
}

#hf-rev-container .hf-upload-hint {
    font-size: 11px !important;
    color: var(--txt-muted) !important;
    margin-top: 5px !important; margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#hf-rev-container .hf-upload-hint::before { content: '⚡' !important; }

#hf-rev-container .hf-previews-grid {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
    gap: 7px !important;
    margin-top: 9px !important;
}

#hf-rev-container .hf-preview-item {
    position: relative !important;
    aspect-ratio: 1/1 !important;
    border-radius: var(--r-sm) !important;
    overflow: hidden !important;
    border: 2px solid #6aae3f !important;
    box-shadow: var(--shadow-sm) !important;
}

#hf-rev-container .hf-preview-item img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
}

#hf-rev-container .hf-preview-item.hf-uploading {
    border-color: var(--border) !important;
    background: #f7faf4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hf-rev-container .hf-upload-spinner {
    width: 20px !important; height: 20px !important;
    border: 3px solid #d8e8c8 !important;
    border-top-color: #4e8c2f !important;
    border-radius: 50% !important;
    animation: hf-spin .7s linear infinite !important;
}

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

#hf-rev-container .hf-upload-success-icon {
    position: absolute !important;
    top: 3px !important; right: 3px !important;
    background: #4e8c2f !important;
    color: white !important;
    font-size: 8px !important;
    width: 16px !important; height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
}

#hf-rev-container .hf-primary-btn {
    width: 100% !important;
    background: linear-gradient(135deg, #4e8c2f 0%, #6aae3f 100%) !important;
    color: white !important;
    border: none !important;
    padding: 13px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: var(--ff-body) !important;
    border-radius: var(--r-sm) !important;
    cursor: pointer !important;
    transition: opacity .2s, transform .15s, box-shadow .2s !important;
    margin-top: 6px !important;
    box-shadow: 0 4px 14px rgba(78,140,47,.3) !important;
    display: block !important;
    text-align: center !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#hf-rev-container .hf-primary-btn:hover {
    opacity: .9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(78,140,47,.4) !important;
}

#hf-rev-container .hf-primary-btn:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#hf-rev-container .hf-success-notice {
    margin-top: 10px !important; padding: 10px 14px !important;
    background: #edf7e7 !important;
    border: 1px solid #b6dcaa !important;
    border-radius: var(--r-sm) !important;
    color: #4e8c2f !important;
    font-size: 13px !important; font-weight: 600 !important;
    text-align: center !important;
}

#hf-rev-container .hf-error-notice {
    margin-top: 10px !important; padding: 10px 14px !important;
    background: #fff0f0 !important;
    border: 1px solid #f5c6c6 !important;
    border-radius: var(--r-sm) !important;
    color: #c0392b !important;
    font-size: 13px !important; font-weight: 600 !important;
    text-align: center !important;
}

@media (max-width: 800px) {
    #hf-rev-container #hf-rev-flex-wrapper { flex-direction: column !important; }
    #hf-rev-container #hf-rev-form-card {
        order: -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex: none !important;
    }
    #hf-rev-container .hf-rev-item-content,
    #hf-rev-container .hf-rev-item-images { padding-left: 0 !important; }
}

/* ── Form Position: Bottom ───────────────────────────── */
#hf-rev-container .hf-form-bottom {
    margin-top: 24px !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Form Position: Left ─────────────────────────────── */
#hf-rev-container .hf-pos-left #hf-rev-form-card {
    order: -1 !important;
}

/* ── Admin settings table reset ─────────────────────── */
.hf-section table { display: table; width: 100%; }
.hf-section table tr { display: table-row; }
.hf-section table th,
.hf-section table td { display: table-cell; }

/* ── New review animation (prepended on submit) ────── */
#hf-rev-container .hf-new-review {
    animation: hf-slide-in .4s ease forwards !important;
}

@keyframes hf-slide-in {
    from { opacity:0; transform:translateY(-14px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Mini stars widget ──────────────────────────────── */
.hf-mini-stars {
    font-family: -apple-system, sans-serif;
    line-height: 1;
}

.hf-mini-stars span { transition: width .5s ease; }

/* ── Field group spacing in form ───────────────────── */
#hf-rev-container .hf-field-group {
    margin-bottom: 16px !important;
}

#hf-rev-container .hf-field-group:last-of-type {
    margin-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════
   CLICK-TO-UPLOAD BUTTON
════════════════════════════════════════════════════ */
#hf-rev-container .hf-upload-btn-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

#hf-rev-container .hf-upload-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 16px !important;
    background: #fff !important;
    border: 1.5px solid var(--hf-green, #4e8c2f) !important;
    border-radius: 7px !important;
    color: var(--hf-green, #4e8c2f) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .2s, color .2s !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#hf-rev-container .hf-upload-trigger-btn:hover {
    background: var(--hf-green, #4e8c2f) !important;
    color: #fff !important;
}

#hf-rev-container .hf-upload-trigger-btn svg {
    flex-shrink: 0 !important;
}

#hf-rev-container .hf-upload-file-count {
    font-size: 12.5px !important;
    color: var(--hf-txt-muted, #7a9060) !important;
    font-style: italic !important;
}

/* ── Preview grid ───────────────────────────────── */
#hf-rev-container .hf-previews-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

#hf-rev-container .hf-preview-item {
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1.5px solid var(--hf-border, #cce4b0) !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
}

#hf-rev-container .hf-preview-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#hf-rev-container .hf-preview-name {
    display: none !important; /* hidden under image */
}

/* ════════════════════════════════════════════════════
   SUBMISSION NOTICE MESSAGES
════════════════════════════════════════════════════ */
#hf-rev-container ~ .hf-notice,
.hf-notice {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.hf-notice-success {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

.hf-notice-pending {
    background: #fef9c3 !important;
    border: 1px solid #fde047 !important;
    color: #713f12 !important;
}

.hf-notice-error {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}