/**
 * [add_to_cart_button] + [variation_picker] shortcodes
 * (Denwax\Shortcodes\Registrar).
 *
 * Enqueued only on pages where a shortcode renders. All classes are
 * prefixed .vp- to stay clear of Elementor and theme styles. Font family is
 * inherited from the theme; sizes scale down on small screens via clamp().
 */

.vp-form {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
}

/* --- Cards ------------------------------------------------------------- */

.vp-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

@media (max-width: 480px) {
    .vp-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vp-option {
    position: relative;
    display: flex;
    min-width: 0;
}

/* Visually hidden radio: still focusable and keyboard-operable. */
.vp-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.vp-card {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: clamp(48px, 6vw, 60px);
    margin: 0;
    padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 20px);
    background: #EFEFEF;
    border: 1.5px solid transparent; /* same width as the selected state so nothing jumps */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.vp-card:hover {
    background: #E8E8E8;
}

.vp-radio:checked + .vp-card {
    border-color: #222;
}

.vp-radio:focus-visible + .vp-card {
    outline: 2px solid #222;
    outline-offset: 3px;
}

.vp-radio:disabled + .vp-card {
    opacity: .45;
    cursor: not-allowed;
    background: #EFEFEF;
}

.vp-label {
    font-weight: 700;
    font-size: clamp(13px, 1.5vw, 14.5px);
    line-height: 1.2;
    color: #222;
}

.vp-price {
    font-weight: 700;
    font-size: clamp(12px, 1.4vw, 13.5px);
    line-height: 1.2;
    color: #8C8377;
    text-align: right;
    white-space: nowrap;
}

.vp-price del {
    font-size: .7em;
    opacity: .7;
    margin-right: .3em;
}

.vp-price ins {
    text-decoration: none;
}

/* --- Description ------------------------------------------------------- */

.vp-description {
    margin: clamp(12px, 2vw, 20px) 0;
    padding-left: clamp(4px, .7vw, 7px);
    font-weight: 400;
    font-size: clamp(13px, 1.5vw, 14.5px);
    line-height: 1.4;
    color: #222;
}

.vp-description[hidden] {
    display: none;
}

.vp-description > :last-child {
    margin-bottom: 0;
}

/* Keep some air between cards and actions when there is no description. */
.vp-description[hidden] + .vp-actions {
    margin-top: clamp(8px, 1.2vw, 12px);
}

/* --- Quantity + button ------------------------------------------------- */

.vp-actions {
    display: flex;
    align-items: stretch;
    gap: clamp(8px, 1.5vw, 14px);
    min-width: 0;
}

.vp-form .vp-actions .vp-qty {
    flex: 0 0 clamp(46px, 6vw, 60px); /* flex-basis beats the theme's width: 100% on inputs */
    box-sizing: border-box;
    width: clamp(46px, 6vw, 60px);
    min-width: 0;
    max-width: clamp(46px, 6vw, 60px);
    height: clamp(38px, 4.4vw, 44px);
    margin: 0;
    padding: 0;
    background: #fff;
    border: 2px solid #222;
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    font-size: clamp(12px, 1.4vw, 13.5px);
    line-height: 1;
    color: #222;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.vp-form .vp-qty::-webkit-outer-spin-button,
.vp-form .vp-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vp-form .vp-qty:focus-visible {
    outline: 2px solid #222;
    outline-offset: 3px;
}

.vp-form .vp-actions .vp-add,
.vp-cta .vp-button {
    flex: 1 1 0;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: clamp(38px, 4.4vw, 44px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0 clamp(8px, 1vw, 12px);
    background: #222;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    font-size: clamp(13px, 1.5vw, 14.5px);
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vp-form .vp-add:hover,
.vp-cta .vp-button:hover {
    background: #000;
    color: #fff;
}

.vp-form .vp-add:focus-visible,
.vp-cta .vp-button:focus-visible {
    outline: 2px solid #222;
    outline-offset: 3px;
}

.vp-form .vp-add:disabled,
.vp-cta .vp-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* AJAX states: keep the button fully opaque while working / after success. */
.vp-form .vp-add.is-adding,
.vp-form .vp-add.is-added,
.vp-cta .vp-button.is-adding,
.vp-cta .vp-button.is-added {
    opacity: 1;
    cursor: default;
}

.vp-form .vp-add.is-adding,
.vp-cta .vp-button.is-adding {
    background: #444;
}

.vp-form .vp-add.is-added,
.vp-cta .vp-button.is-added {
    background: #324902;
}

.vp-error {
    margin: clamp(8px, 1.2vw, 12px) 0 0;
    font-size: clamp(12px, 1.4vw, 13.5px);
    color: #b00020;
}

.vp-error[hidden] {
    display: none;
}

/* --- [add_to_cart_button] ---------------------------------------------- */

.vp-cta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Standalone button: outlined style matching the theme's card buttons.
   Overrides the shared .vp-add rules above (same specificity, later). */
.vp-cta .vp-button {
    flex: none;
    width: 100%;
    height: auto;
    padding: 6px 18px;
    background: #00000000;
    border: 2px solid #202020;
    border-radius: .55em;
    font-family: "Raleway", Sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4em;
    color: #202020;
    transition: background-color .15s ease, border-color .15s ease;
}

/* color="white": white outline + text for dark backgrounds. Hover/AJAX
   states below still apply (higher specificity). */
.vp-cta--white .vp-button {
    border-color: #fff;
    color: #fff;
}

.vp-cta--white .vp-button:focus-visible {
    outline-color: #fff;
}

.vp-cta .vp-button:hover {
    background: #ffd70d;
    border-color: #ffd70d;
    color: #202020;
}

.vp-cta .vp-button.is-adding {
    background: #ffd70d;
    border-color: #ffd70d;
    color: #202020;
}

.vp-cta .vp-button.is-added {
    background: #324902;
    border-color: #324902;
    color: #fff;
}

/* --- Popup --------------------------------------------------------------- */

.vp-popup {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above Elementor sticky headers / menus */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.vp-popup[hidden] {
    display: none;
}

.vp-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.vp-popup__dialog {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: clamp(24px, 4vw, 40px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: vp-popup-in .18s ease-out;
}

@keyframes vp-popup-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-popup__dialog { animation: none; }
}

.vp-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #5b5b5b;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vp-popup__close:hover {
    background: #EFEFEF;
    color: #222;
}

.vp-popup__close:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
}

.vp-popup__title {
    margin: 0 36px clamp(14px, 2.5vw, 20px) 0;
    font-size: clamp(17px, 2.2vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    color: #222;
}

/* Scroll lock while a popup is open. */
html.vp-popup-open,
html.vp-popup-open body {
    overflow: hidden;
}