/* ============================================
   WC VARIATION TABLE PRO v4 — BASE
   NO SCROLL — SAME TABLE ON ALL DEVICES
   ============================================ */

.wcvtp-wrap { width:100%; margin:18px 0; position:relative }
.wcvtp-wrap * { box-sizing:border-box }

/* ── TABLE — fixed layout = no overflow ── */
.wcvtp-tbl {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: hidden;
}

/* ── Column widths ── */
.wt1, .wd1 { width:15% }  /* Tablet */
.wt2, .wd2 { width:15% }  /* Price */
.wt3, .wd3 { width:14% }  /* Price/Unit */
.wt4, .wd4 { width:12% }  /* Qty */
.wt5, .wd5 { width:44% }  /* Actions */

/* ── Header ── */
.wt {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wt1 { text-align:left }
.wt:first-child { border-radius:var(--wcvtp-r,8px) 0 0 0 }
.wt:last-child { border-radius:0 var(--wcvtp-r,8px) 0 0 }

/* Responsive text: full / short */
.wt-s { display:none }

/* ── Rows ── */
.wr { transition:background .2s; cursor:pointer }
.wr:last-child .wd:first-child { border-radius:0 0 0 var(--wcvtp-r,8px) }
.wr:last-child .wd:last-child { border-radius:0 0 var(--wcvtp-r,8px) 0 }

/* ── Cells ── */
.wd { text-align:center; vertical-align:middle; overflow:hidden; text-overflow:ellipsis }
.wd1 { text-align:left }

/* ── Label ── */
.wd-label { font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Prices ── */
.wd-reg { font-size:11px; display:block; margin-bottom:1px; white-space:nowrap }
.wd-price, .wd-unit { display:inline-block; white-space:nowrap }

/* Remove WooCommerce default price markup styles */
.wcvtp-wrap .woocommerce-Price-amount { font-size:inherit; color:inherit; font-weight:inherit }
.wcvtp-wrap .woocommerce-Price-currencySymbol { font-size:inherit }

/* ── Qty Dropdown ── */
.wd-qty {
    width: 100%;
    max-width: 52px;
    padding: 5px 2px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
    text-align-last: center;
    background: #fff;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
}
.wd-qty:focus { border-color:#3498db; outline:none }

/* ── Button Container ── */
.wd-btns {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.wd-btn {
    border: none;
    cursor: pointer;
    transition: all .25s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 12px;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.wd-btn:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.15) }
.wd-btn:active { transform:translateY(0) }
.wd-ic { flex-shrink:0 }

/* Responsive btn text */
.wd-bs { display:none }

/* ── Loading ── */
.wd-btn.wd-loading { opacity:.6; pointer-events:none }
.wd-btn.wd-loading::after {
    content:''; width:12px; height:12px;
    border:2px solid currentColor; border-top-color:transparent;
    border-radius:50%; animation:wcvtp-sp .6s linear infinite;
    margin-left:4px;
}

/* ── Done ── */
.wd-btn.wd-done { pointer-events:none }

@keyframes wcvtp-sp { to{transform:rotate(360deg)} }

/* ── Out of Stock ── */
.wd-oos { color:#c0392b; font-size:11px; font-weight:600; text-transform:uppercase }
.wr-oos { opacity:.4; cursor:not-allowed; pointer-events:none }
.wd-na { color:#bbb }

/* ── Error ── */
.wcvtp-err { color:#c0392b; padding:10px 14px; background:#fef5f5; border-left:4px solid #c0392b; border-radius:4px; font-size:13px }

/* ── Shortcode ── */
.wcvtp-sc-wrap { margin:20px 0 }
.wcvtp-sc-title { margin:22px 0 6px; font-size:17px }
.wcvtp-sc-title a { text-decoration:none; color:#2c3e50 }

/* ============================================
   EXTRA TABLES SECTION
   ============================================ */
.wcvtp-extra-section {
    margin: 25px 0 15px;
    padding: 0;
    clear: both;
}

.wcvtp-extra-heading {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.wcvtp-extra-card {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: hidden;
    border: 1px solid #eee;
    padding: 18px;
}

.wcvtp-extra-img {
    flex-shrink: 0;
    width: 110px;
    display: flex;
    align-items:center;
    padding-top: 4px;
}

.wcvtp-extra-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: transform .2s;
}

.wcvtp-extra-img img:hover {
    transform: scale(1.05);
}

.wcvtp-extra-body {
    flex: 1;
    min-width: 0;
}

.wcvtp-extra-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #2c3e50;
}

.wcvtp-extra-name a {
    text-decoration: none;
    color: inherit;
    transition: color .2s;
}

.wcvtp-extra-name a:hover {
    color: #2980b9;
}

/* Extra tables — inner table needs no extra margin */
.wcvtp-is-extra { margin: 0 }

/* ============================================
   TOAST NOTIFICATION
   ============================================ */
.wcvtp-toast {
    position:fixed; top:20px; right:20px;
    padding:13px 22px; border-radius:8px;
    font-size:13px; font-weight:600;
    z-index:999999; color:#fff;
    box-shadow:0 5px 24px rgba(0,0,0,.22);
    transform:translateX(130%);
    transition:transform .4s cubic-bezier(.68,-.55,.27,1.55);
    display:flex; align-items:center; gap:8px;
    max-width:320px;
}
.wcvtp-toast.wcvtp-show { transform:translateX(0) }

/* ============================================
   RESPONSIVE — tablet
   ============================================ */
@media (max-width:768px) {
    .wt, .wd { font-size:12px !important; padding:8px 6px !important }
    .wd-btn { padding:6px 8px; font-size:11px !important }
    .wd-qty { max-width:44px; font-size:12px }
    .wd-reg { font-size:10px }
    .wd-btns { gap:3px }
}

/* ============================================
   RESPONSIVE — mobile
   ============================================ */
@media (max-width:576px) {
    .wcvtp-wrap { margin:10px 0 }

    .wt, .wd { font-size:11px !important; padding:6px 4px !important }
    .wt { letter-spacing:0 }

    /* short headers */
    .wt-f { display:none }
    .wt-s { display:inline }

    /* short button text */
    .wd-bf { display:none }
    .wd-bs { display:inline }

    .wd-label { font-size:11px }
    .wd-price { font-size:12px !important }
    .wd-unit { font-size:11px !important }
    .wd-reg { font-size:9px }

    .wd-btn { padding:5px 6px; font-size:10px !important; gap:2px }
    .wd-ic { width:11px; height:11px }
    .wd-btns { gap:2px }

    .wd-qty { max-width:38px; font-size:11px; border-width:1px; border-radius:3px; padding:3px 1px }

    /* Column widths mobile */
    .wt1,.wd1 { width:20% }
    .wt2,.wd2 { width:16% }
    .wt3,.wd3 { width:14% }
    .wt4,.wd4 { width:10% }
    .wt5,.wd5 { width:40% }

    /* ── HIDE IMAGE IN EXTRA TABLES ON MOBILE ── */
    .wcvtp-extra-img { display:none !important }
    .wcvtp-extra-card { padding:12px }
    .wcvtp-extra-name { font-size:14px; margin-bottom:8px }
}

/* ============================================
   RESPONSIVE — very small
   ============================================ */
@media (max-width:380px) {
    .wt, .wd { font-size:9px !important; padding:5px 3px !important }
    .wd-btn { padding:4px 5px; font-size:9px !important }
    .wd-qty { max-width:32px; font-size:10px }
    .wd-ic { width:10px; height:10px }
}