/* ═══════════════════════════════════════════════════
   MK Product Options — Frontend CSS  v1.3
   Brand: Navy #1a1a2e | Primary #273774 | Secondary #009aee
   ═══════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   WRAPPER & HEADER
   ════════════════════════════════════════════════════ */
.mkpo-sc-wrapper { margin: 0 0 28px; }

.mkpo-sc-header {
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #273774;
}
.mkpo-sc-title {
    float: left;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1a1a2e;
    line-height: 1.4;
}
.mkpo-sc-total-row {
    float: right;
    font-size: 0.88rem;
    color: #555;
    display: none;
    line-height: 1.6;
}
.mkpo-total-amount { font-weight: 800; color: #273774; }
.mkpo-total-row    { display: none !important; }

/* ════════════════════════════════════════════════════
   GRID
   ════════════════════════════════════════════════════ */
.mkpo-sc-grid {
    display: grid;
    gap: 16px;
    align-items: start; /* cards are only as tall as their own content */
}
/* Fallback column rules (overridden by inline style when PHP outputs them) */
.mkpo-sc-grid-1 { grid-template-columns: repeat(2, 1fr); } /* 1 col = 2 tracks, each card spans 2 */
.mkpo-sc-grid-2 { grid-template-columns: repeat(4, 1fr); }
.mkpo-sc-grid-3 { grid-template-columns: repeat(6, 1fr); }
.mkpo-sc-grid-4 { grid-template-columns: repeat(8, 1fr); }

/* Prevent orphan cards on the last row from stretching */
.mkpo-sc-grid-2 .mkpo-box,
.mkpo-sc-grid-3 .mkpo-box,
.mkpo-sc-grid-4 .mkpo-box {
    width: 100%;
    min-width: 0;
}

@media (max-width: 900px) {
    .mkpo-sc-grid-3,
    .mkpo-sc-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .mkpo-sc-grid-3 .mkpo-box,
    .mkpo-sc-grid-4 .mkpo-box { grid-column: span 2 !important; }
}
@media (max-width: 520px) {
    .mkpo-sc-grid-2,
    .mkpo-sc-grid-3,
    .mkpo-sc-grid-4 { grid-template-columns: 1fr !important; }
    .mkpo-sc-grid-2 .mkpo-box,
    .mkpo-sc-grid-3 .mkpo-box,
    .mkpo-sc-grid-4 .mkpo-box { grid-column: span 1 !important; }
}

/* ════════════════════════════════════════════════════
   BOX CARD
   (display:block — no flex interference from themes)
   ════════════════════════════════════════════════════ */
.mkpo-box {
    display: block;
    background: #fff;
    border: 1.5px solid #e2e6ea;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: border-color .18s, box-shadow .18s;
}
.mkpo-box:hover {
    border-color: #009aee;
    box-shadow: 0 4px 20px rgba(0,154,238,.14);
}
.mkpo-box.mkpo-box-active {
    border-color: #273774;
    box-shadow: 0 4px 20px rgba(39,55,116,.18);
}

/* Gold top bar */
.mkpo-box-topbar {
    display: block;
    height: 3px;
    background: #e2e6ea;
    transition: background .18s;
}
.mkpo-box:hover    .mkpo-box-topbar { background: #009aee; }
.mkpo-box-active   .mkpo-box-topbar { background: #273774; }

/* Active tick badge (CSS pseudo-element) */
/* .mkpo-box-tick removed - use ::after instead */ .mkpo-box-tick-unused {
    display: none;
    position: absolute;
    top: 8px; right: 10px;
    width: 20px; height: 20px;
    background: #273774;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}
.mkpo-box.mkpo-box-active /* .mkpo-box-tick removed - use ::after instead */ .mkpo-box-tick-unused { display: block; }

/* Inner padding area */
.mkpo-box-inner {
    display: block;
    padding: 14px 16px 12px;
}

/* Name */
.mkpo-box-name {
    display: block;
    font-weight: 800;
    font-size: 0.92rem;
    color: #1a1a2e;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* Description */
.mkpo-box-desc {
    display: block;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.65;
    margin-bottom: 10px;
}
.mkpo-box-desc p { margin: 0 0 4px; }
.mkpo-box-desc p:last-child { margin: 0; }

/* Control */
.mkpo-box-control {
    display: block;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

/* ════════════════════════════════════════════════════
   CHECKBOX CONTROL
   ════════════════════════════════════════════════════ */
.mkpo-box-checkbox-label {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.mkpo-cb { display: none; }
.mkpo-box-check {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    position: relative;
    background: #fff;
    flex-shrink: 0;
    transition: all .15s;
    vertical-align: middle;
}
.mkpo-cb:checked + .mkpo-box-check {
    background: #273774;
    border-color: #273774;
}
.mkpo-cb:checked + .mkpo-box-check::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.mkpo-box-add-text {
    display: inline;
    font-size: 0.83rem;
    font-weight: 600;
    color: #374151;
    vertical-align: middle;
}

/* Select */
.mkpo-box-select {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.86rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
    margin-top: 4px;
    box-sizing: border-box;
}
.mkpo-box-select:focus {
    outline: none;
    border-color: #273774;
    box-shadow: 0 0 0 2px rgba(39,55,116,.18);
}

/* Qty */
.mkpo-box-qty-wrap {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 10px;
}
.mkpo-box-qty-input {
    width: 70px;
    padding: 6px 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    transition: border-color .15s;
}
.mkpo-box-qty-input:focus { outline: none; border-color: #273774; }
.mkpo-qty-line-price { font-size: 0.82rem; color: #273774; font-weight: 700; }

/* Swatches */
.mkpo-swatches {
    display: block;
    overflow: hidden;
    margin-bottom: 8px;
}
.mkpo-swatch {
    display: inline-block;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12);
    transition: transform .12s, box-shadow .12s;
    margin: 0 4px 4px 0;
    vertical-align: middle;
}
.mkpo-swatch:hover { transform: scale(1.18); }
.mkpo-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #273774; transform: scale(1.12); }

/* ════════════════════════════════════════════════════
   LEARN MORE BUTTON (hover state via JS, no CSS hover
   needed since inline styles handle the base)
   ════════════════════════════════════════════════════ */
.mkpo-learn-more-btn:hover {
    background: #1a1a2e !important;
    color: #fff !important;
}
.mkpo-learn-more-btn:focus { outline: 2px solid #273774; }

/* ════════════════════════════════════════════════════
   POPUP
   ════════════════════════════════════════════════════ */
#mkpo-popup-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(15,15,30,.65);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center; align-items: center;
    -webkit-box-pack: center; justify-content: center;
    padding: 20px;
    animation: mkpo-fade .18s ease;
}
@keyframes mkpo-fade { from { opacity: 0; } to { opacity: 1; } }

#mkpo-popup-box {
    background: #fff; border-radius: 12px;
    max-width: 680px; width: 100%; max-height: 88vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    animation: mkpo-up .2s ease;
    overflow: hidden;
}
@keyframes mkpo-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

#mkpo-popup-header {
    display: -webkit-box; display: flex;
    -webkit-box-align: center; align-items: center;
    -webkit-box-pack: justify; justify-content: space-between;
    padding: 16px 20px;
    background: #1a1a2e;
    flex-shrink: 0;
    border-bottom: 3px solid #273774;
}
#mkpo-popup-title {
    margin: 0; font-size: 1rem; font-weight: 700; color: #fff;
}
#mkpo-popup-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.65); font-size: 1.7rem; line-height: 1;
    padding: 0 2px; transition: color .15s; font-weight: 300;
}
#mkpo-popup-close:hover { color: #009aee; }

#mkpo-popup-body {
    flex: 1; overflow-y: auto; padding: 22px 24px;
    font-size: 0.92rem; line-height: 1.72; color: #333;
}
#mkpo-popup-body img  { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
#mkpo-popup-body h1,
#mkpo-popup-body h2,
#mkpo-popup-body h3   { color: #1a1a2e; margin-top: 0; }
#mkpo-popup-body a    { color: #009aee; }
#mkpo-popup-body p    { margin: 0 0 12px; }
#mkpo-popup-body p:last-child { margin: 0; }

/* ════════════════════════════════════════════════════
   DARK THEME (WoodMart wd-dark)
   ════════════════════════════════════════════════════ */
.wd-dark .mkpo-sc-title           { color: #f0f0f0; }
.wd-dark .mkpo-box                { background: #1e1e30; border-color: #2d2d44; }
.wd-dark .mkpo-box-topbar         { background: #2d2d44; }
.wd-dark .mkpo-box:hover .mkpo-box-topbar,
.wd-dark .mkpo-box-active .mkpo-box-topbar { background: #273774; }
.wd-dark .mkpo-box:hover,
.wd-dark .mkpo-box.mkpo-box-active { border-color: #273774; }
.wd-dark .mkpo-box-name           { color: #f0f0f0; }
.wd-dark .mkpo-box-desc           { color: #aaa; }
.wd-dark .mkpo-box-add-text       { color: #d1d5db; }
.wd-dark .mkpo-box-check          { background: #2a2a3e; border-color: #555; }
.wd-dark .mkpo-box-select,
.wd-dark .mkpo-box-qty-input      { background: #16162a; color: #e0e0e0; border-color: #444; }
.wd-dark .mkpo-box-control        { border-top-color: #2d2d44; }
.wd-dark #mkpo-popup-body         { color: #e0e0e0; }

/* ════════════════════════════════════════════════════
   EQUAL-HEIGHT GRID (masonry v2)
   4 small cards identical size, tall card = full height
   ════════════════════════════════════════════════════ */
.mkpo-eq-grid {
    display: grid;
    gap: 16px;
    align-items: stretch;
}
.mkpo-eq-cell {
    min-width: 0;
    display: flex;         /* card stretches to fill cell */
}
.mkpo-eq-cell .mkpo-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
/* Body grows, footer pins to the bottom of every card */
.mkpo-eq-cell .mkpo-box .mkpo-box-inner { flex: 1 1 auto; }
.mkpo-eq-cell .mkpo-box .mkpo-box-footer { margin-top: auto; }
.mkpo-eq-cell .mkpo-box .mkpo-box-topbar { flex: 0 0 auto; }

/* ── Tablet: 2 columns, tall card keeps right side ── */
@media (max-width: 900px) {
    .mkpo-eq-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
    }
    .mkpo-eq-cell       { grid-column: auto !important; grid-row: auto !important; }
    .mkpo-eq-cell.mkpo-eq-tall {
        grid-column: 1 / -1 !important;  /* tall card spans full width */
        grid-row: auto !important;
        order: 99;                        /* moves to the end */
    }
}

/* ── Mobile: single column stack ── */
@media (max-width: 520px) {
    .mkpo-eq-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 12px;
    }
    .mkpo-eq-cell,
    .mkpo-eq-cell.mkpo-eq-tall {
        grid-column: auto !important;
        grid-row: auto !important;
        order: 0;
    }
    .mkpo-box-inner { padding: 14px; }
    .mkpo-sc-title  { font-size: 1.1rem !important; }
}