/*
 * Theme15 — Custom overrides
 * Most styling handled by Tailwind CSS + CSS custom properties.
 * This file is for theme-specific overrides and transitions.
 */

/* ═══════════════════════════════════════════════
   BASE TYPOGRAPHY — ported from React theme.css
   Font: Poppins (300/400/500/600/700, 400i)
   ═══════════════════════════════════════════════ */
html {
    font-size: 16px;
}

body, * {
    font-family: var(--t15-font-family, 'Poppins', Helvetica, Arial, Lucida, sans-serif);
}

h1 { font-weight: 500; line-height: 1.5; }
h2 { font-weight: 500; line-height: 1.5; }
h3 { font-weight: 500; line-height: 1.5; }
h4 { font-weight: 500; line-height: 1.5; }

label  { font-weight: 500; line-height: 1.5; }
button { font-weight: 500; line-height: 1.5; }
input  { font-weight: 400; line-height: 1.5; }

/* ═══════════════════════════════════════════════
   BOOTSTRAP COMPAT — hide modal markup
   (success_popup.blade.php uses .modal class)
   ═══════════════════════════════════════════════ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
}
.modal.show {
    display: flex;
}
.modal-dialog {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    font-family: inherit;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e8e8e8;
}
.modal-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--t15-primary, #173837);
}
.modal-header .close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}
.modal-body {
    padding: 20px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid #e8e8e8;
    gap: 8px;
}
.modal-footer .btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.15s;
}
.modal-footer .btn-secondary {
    background: var(--t15-primary, #173837);
    color: #fff;
}
.modal-footer .btn-secondary:hover {
    opacity: 0.85;
}

/* Smooth page transitions */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Category card hover image scale */
.group:hover img {
    transform: scale(1.05);
}

/* Transition duration helper (Tailwind v3 CDN doesn't include all utilities) */
.duration-400 {
    transition-duration: 400ms;
}

/* ═══════════════════════════════════════════════
   FOOTER — Accreditation logos grid responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .t15-accred-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 480px) {
    .t15-accred-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════
   CATEGORY PAGE — Product Grid & Cards
   ═══════════════════════════════════════════════ */

/* Product grid responsive fallback (Tailwind handles primary layout) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 768px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
    .products-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Product card — active color thumb highlight */
.t15-color-thumb:hover {
    border-color: #173837 !important;
}
.t15-color-thumb:hover img {
    opacity: 1 !important;
}

/* Quick Add button hover */
.t15-quick-add:hover {
    background: var(--t15-primary, #173837) !important;
    color: var(--t15-accent, #cafd5f) !important;
}

/* ═══════════════════════════════════════════════
   CATEGORY PAGE — Filter Drawer
   ═══════════════════════════════════════════════ */
#t15-filter-drawer-backdrop {
    transition: opacity .3s;
}
#t15-filter-drawer {
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════
   WISHLIST PAGE — Grid responsive
   ═══════════════════════════════════════════════ */
.t15-wishlist-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}
@media (min-width: 640px) {
    .t15-wishlist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (min-width: 768px) {
    .t15-wishlist-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
}
@media (min-width: 1024px) {
    .t15-wishlist-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
}

/* Filter colour circle hover */
.t15-filter-color:hover {
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════
   PRESET PACKS PAGE — Card hover & Quick Add
   ═══════════════════════════════════════════════ */
.t15-pack-card:hover .t15-quick-add-btn {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.t15-quick-add-btn:hover {
    filter: brightness(0.95);
}
.t15-pagination-arrow:not(:disabled):hover {
    border-color: #173837 !important;
}
.t15-page-btn:hover {
    border-color: #173837 !important;
}

/* ═══════════════════════════════════════════════
   CATEGORY PAGE — Subcategory horizontal scroll
   ═══════════════════════════════════════════════ */
.t15-subcat-strip::-webkit-scrollbar {
    display: none;
}
.t15-subcat-strip {
    scrollbar-width: none;
}