/* ===========================================================================
   SHOPFORME — UI/UX enhancement layer  (Phase 6)

   Additive polish ONLY. This file is loaded last so it can refine spacing,
   states, hover feedback, focus visibility, loading and empty states across
   the existing theme (app.min.css / style.css / new.css) WITHOUT changing
   the layout, colour direction, branding or structure of any page — the
   homepage included.

   Nothing here repositions, hides or recolours existing sections. It only
   makes the components that are already there feel a little more premium.
   =========================================================================== */

/* ---- 1. Motion baseline ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 2. Buttons: consistent hover / active / keyboard focus ----------- */
.th-btn,
.woocommerce-MyAccount-content .th-btn,
button.th-btn {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, filter .16s ease;
}
.th-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.th-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.th-btn:focus-visible,
.icon-btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(26, 127, 69, .55);
    outline-offset: 2px;
}
.icon-btn { transition: transform .16s ease, background-color .16s ease, color .16s ease; }
.icon-btn:hover { transform: translateY(-2px); }

/* ---- 3. Cards: gentle elevation on hover ----------------------------- */
.th-product,
.th-blog,
.category-card,
.service-box,
.product-grid {
    transition: transform .18s ease, box-shadow .18s ease;
}
.th-product:hover,
.th-blog:hover,
.category-card:hover,
.service-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(17, 24, 39, .10);
}

/* ---- 4. Product imagery: subtle, contained zoom --------------------- */
.product-img,
.blog-img,
.category-thumb { overflow: hidden; }
.product-img img,
.blog-img img { transition: transform .4s ease; }
.th-product:hover .product-img img,
.th-blog:hover .blog-img img { transform: scale(1.05); }

/* ---- 5. Form controls: clearer focus, consistent radius ------------- */
.form-control,
.form-select,
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], textarea, select {
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus {
    border-color: #1a7f45 !important;
    box-shadow: 0 0 0 3px rgba(26, 127, 69, .15) !important;
    outline: none;
}

/* ---- 6. Links inside content ---------------------------------------- */
.link-inherit a { transition: color .15s ease; }

/* ---- 7. Loading skeletons (opt-in via .sfm-skeleton) --------------- */
.sfm-skeleton {
    position: relative;
    overflow: hidden;
    background: #eef0f2;
    border-radius: 8px;
}
.sfm-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: sfm-shimmer 1.4s infinite;
}
@keyframes sfm-shimmer { 100% { transform: translateX(100%); } }

/* ---- 8. Empty states (opt-in via .sfm-empty) --------------------- */
.sfm-empty {
    text-align: center;
    padding: 56px 24px;
    color: #6b7280;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
    background: #fafafa;
}
.sfm-empty i { font-size: 30px; color: #9ca3af; margin-bottom: 10px; display: block; }

/* ---- 9. Scroll-reveal (opt-in via [data-sfm-reveal]) ------------- */
[data-sfm-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
[data-sfm-reveal].is-visible { opacity: 1; transform: none; }

/* ---- 10. Buyer / vendor dashboard nav: tighter active state ------ */
.th-profile-nav .nav-link.th-btn { transition: background-color .15s ease, transform .12s ease; }
.th-profile-nav .nav-link.th-btn:active { transform: scale(.99); }

/* ---- 11. Tables in the account area ----------------------------- */
.woocommerce-MyAccount-content table:not(.no-enhance) tr { transition: background-color .12s ease; }
.woocommerce-MyAccount-content table:not(.no-enhance) tbody tr:hover { background: #f8faf9; }

/* ---- 12. Pagination ------------------------------------------------ */
.th-pagination .page-numbers,
.pagination .page-link { transition: background-color .15s ease, color .15s ease; }

/* ---- 13. Responsive safety: never let a row cause x-overflow ---- */
img { max-width: 100%; height: auto; }