/*
Theme Name: Hongo Child
Theme URI:  https://hongo.themezaa.com
Template:   hongo
Author:     ThemeZaa
Author URI: https://www.themezaa.com
Description: Hongo is a premium, modern, responsive, and multi-purpose WordPress theme.
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout
Version: 4.0.1763230808
Updated: 2025-11-15
*/

/*
Theme Name: Hongo Child
Template: hongo
*/

/* Modal base */
.hl-modal { 
    display:none; 
    position:fixed; 
    z-index:99999; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    overflow:auto; 
    background:rgba(0,0,0,0.45); 
    padding:20px; 
    box-sizing:border-box; 
}
.hl-modal[aria-hidden="false"]{ display:block; }

.hl-modal-content {
    background:#fff;
    max-width:900px;
    margin:40px auto;
    padding:18px;
    border-radius:8px;
    box-sizing:border-box;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* Close */
.hl-close { float:right; font-size:22px; border:none; background:transparent; cursor:pointer; }

/* Slots */
.hl-slot { display:inline-block; padding:8px 10px; border-radius:18px; border:1px solid #ccc; margin:6px 6px 6px 0; cursor:pointer; background:#f7f7f7; min-width:90px; text-align:center; }
.hl-slot.active { background:#000; color:#fff; border-color:#000; }
.hl-slot-title { font-weight:700; display:block; font-size:13px; }
.hl-slot-value { font-size:12px; }

/* Tabs (horizontal row) */
.hl-tabs { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.hl-tab-btn {
    padding:10px 12px;
    border-radius:6px;
    border:0;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    flex: 1 1 auto;
    min-width:120px;
    box-shadow: none;
    transition: transform .08s ease;
}
.hl-tab-btn:hover { transform: translateY(-2px); }

/* Active tab becomes black with white text (override) */
.hl-tab-btn.active { background:#000 !important; color:#fff !important; }

/* For the white tab (tab4) we need dark text normally; when active black overrides it */
.hl-tab-btn[data-tab="tab4"] { color:#222; border:1px solid #ddd; }

/* Grid */
.hl-label-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:10px;
    margin-top:12px;
}
.hl-label-card {
    padding:10px;
    border:1px solid #ddd;
    border-radius:6px;
    text-align:center;
    cursor:pointer;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    user-select:none;
}
.hl-label-card:hover { transform: translateY(-3px); transition: .12s; }
.hl-label-card.selected { background:#000; color:#fff; border-color:#000; }

/* Search */
.hl-search-input { width:100%; padding:10px; border:1px solid #ddd; margin:10px 0; box-sizing:border-box; }

/* Responsive */
@media(max-width:720px){
    .hl-modal-content{ width:96%; margin:20px auto; padding:12px; }
    .hl-label-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
    .hl-tab-btn { min-width:100px; font-size:13px; padding:8px; }
}

/* Small visual reset for the hidden grids */
[aria-hidden="true"] { display:none !important; }

/* Force modal body scrolling */
.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto !important;
}

.modal-dialog {
    max-height: 90vh;
}

.modal-content {
    overflow-y: auto !important;
    max-height: 90vh;
}

.hnl-size-chart-link a {
    font-size: 14px;
    color: #333;
    text-decoration: underline;
}

.hnl-size-chart-link a:hover {
    color: #000;
}

.pickup-box {
    margin-top: 20px;
    padding: 12px 15px;
    background: #eaffea;
    border-left: 4px solid #2a8b2a;
    font-size: 15px;
    line-height: 1.4;
}

.pickup-line {
    margin: 2px 0;
}