/* Path: wp-content/plugins/wcellar-presale/assets/presale.css
   W Cellar Presale — responsive front-end styles
   Accent: #9b0047 (matches --color-accent from theme)
   --------------------------------------------------------------- */

/* ── CSS custom-property overrides (fall back when theme vars absent) ── */
.presale-cta,
.presale-badge {
    --presale-accent:  #9b0047;
    --presale-text:    #1a1a1a;
    --presale-muted:   rgba(26, 26, 26, 0.6);
    --presale-border:  #e5e5e5;
    --presale-bg:      #fff;
    --presale-radius:  3px;
    --presale-font:    'Pretendard', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Catalog / archive badge ── */
.presale-badge {
    display: inline-block;
    padding: 3px 8px;
    font-family: var(--presale-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--presale-accent);
    color: #fff;
    border-radius: var(--presale-radius);
    line-height: 1.4;
    vertical-align: middle;
    /* Ensure no overflow on narrow cards */
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Single product CTA card ── */
.presale-cta {
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0;
    padding: 20px 22px;
    border: 1px solid var(--presale-border);
    border-left: 3px solid var(--presale-accent);
    background-color: var(--presale-bg);
    border-radius: var(--presale-radius);
    font-family: var(--presale-font);
    color: var(--presale-text);
}

/* ── Lock badge (header) ── */
.presale-cta__header {
    margin-bottom: 14px;
}

.presale-cta__lock-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--presale-accent);
}

/* ── Progress section ── */
.presale-cta__progress-wrap {
    margin-bottom: 18px;
}

/* Progress track */
.presale-progress {
    width: 100%;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}

/* Progress fill */
.presale-progress__bar {
    height: 100%;
    background-color: var(--presale-accent);
    border-radius: 99px;
    transition: width 0.4s ease;
    /* Width is set inline via PHP (committed/target %) */
}

/* Progress label */
.presale-cta__progress-label {
    margin: 0;
    font-size: 13px;
    color: var(--presale-muted);
    line-height: 1.5;
}

.presale-cta__progress-label strong {
    color: var(--presale-text);
    font-weight: 600;
}

/* ── CTA action area ── */
.presale-cta__action {
    margin-top: 4px;
}

/* Participate button */
.presale-join-btn {
    display: block;           /* full-width by default (mobile-first) */
    width: 100%;
    box-sizing: border-box;
    padding: 13px 24px;
    background-color: var(--presale-accent);
    color: #fff !important;   /* override any theme anchor resets */
    font-family: var(--presale-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none !important;
    border: none;
    border-radius: var(--presale-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    /* Ensure no horizontal overflow at 390px */
    max-width: 100%;
    overflow: hidden;
}

.presale-join-btn:hover,
.presale-join-btn:focus {
    background-color: #7a0037;
    color: #fff !important;
    text-decoration: none !important;
    opacity: 0.95;
}

/* Banned notice */
.presale-cta__banned-notice {
    margin: 0;
    padding: 12px 14px;
    background-color: #f9f9f9;
    border: 1px solid var(--presale-border);
    border-radius: var(--presale-radius);
    font-size: 13px;
    color: var(--presale-muted);
    line-height: 1.6;
}

/* ── Responsive: desktop (≥ 600px) — button not required to be full-width ── */
@media (min-width: 600px) {
    .presale-join-btn {
        display: inline-block;
        width: auto;
        min-width: 160px;
    }
}

/* ── Confirm button (confirming phase) ── */
.presale-confirm-btn {
    display: block;            /* full-width by default (mobile-first) */
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    background-color: var(--presale-accent);
    color: #fff !important;
    font-family: var(--presale-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none !important;
    border: none;
    border-radius: var(--presale-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    /* Long label (N병 · €X · ₩Y) must never overflow at 390px */
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.4;
}

.presale-confirm-btn:hover,
.presale-confirm-btn:focus {
    background-color: #7a0037;
    color: #fff !important;
    text-decoration: none !important;
    opacity: 0.95;
}

.presale-confirm-btn--loading {
    opacity: 0.65;
    cursor: progress;
    pointer-events: none;
}

/* "주문 보기" completed state — subtler treatment */
.presale-confirm-btn--done {
    background-color: #2e7d32;
}

.presale-confirm-btn--done:hover,
.presale-confirm-btn--done:focus {
    background-color: #256628;
}

/* Hint + closed notice */
.presale-cta__confirm-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--presale-muted);
    line-height: 1.6;
}

.presale-cta__confirm-closed {
    margin: 0;
    padding: 12px 14px;
    background-color: #f9f9f9;
    border: 1px solid var(--presale-border);
    border-radius: var(--presale-radius);
    font-size: 13px;
    color: var(--presale-muted);
    line-height: 1.6;
}

/* ── Responsive: desktop (≥ 600px) — confirm button not required to be full-width ── */
@media (min-width: 600px) {
    .presale-confirm-btn {
        display: inline-block;
        width: auto;
        min-width: 220px;
    }
}

/* ── Safety: never overflow the parent at any viewport ── */
.presale-cta *,
.presale-badge {
    max-width: 100%;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   MODAL — Join modal overlay + card
   ═══════════════════════════════════════════════════════════ */

/* Overlay — hidden by default */
#presale-join-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.55);
    overflow-y: auto;          /* scroll when content is taller than viewport */
    -webkit-overflow-scrolling: touch;
    /* Flex: vertically centre the card on large screens */
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

#presale-join-overlay.presale-modal--open {
    display: flex;
}

/* Modal card */
#presale-join-modal {
    --presale-accent:  #9b0047;
    --presale-text:    #1a1a1a;
    --presale-muted:   rgba(26, 26, 26, 0.6);
    --presale-border:  #e5e5e5;
    --presale-bg:      #fff;
    --presale-radius:  4px;
    --presale-font:    'Pretendard', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    position: relative;
    background: var(--presale-bg);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    font-family: var(--presale-font);
    color: var(--presale-text);

    /* Mobile-first: full viewport width minus gutters */
    width: 100%;
    max-width: 440px;           /* caps at comfortable card width on desktop */
    box-sizing: border-box;
    padding: 28px 24px 24px;

    /* Hard cap: never wider than the overlay itself */
    overflow: hidden;
}

/* Close button (×) */
.presale-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--presale-muted);
    cursor: pointer;
    padding: 0 4px;
}
.presale-modal__close:hover { color: var(--presale-text); }

/* Title */
.presale-modal__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* Wine name sub-line */
.presale-modal__wine-name {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--presale-muted);
    word-break: break-word;
}

/* Card notice (ok / warn) */
.presale-modal__card-notice {
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: var(--presale-radius);
    font-size: 13px;
    line-height: 1.55;
    background-color: #f5f5f5;
    box-sizing: border-box;
    width: 100%;
    word-break: break-word;
}

.presale-modal__card-ok {
    color: #1d7a4a;
    font-weight: 600;
}

.presale-modal__card-warn {
    color: #7a4500;
}

.presale-modal__card-warn a {
    color: var(--presale-accent);
    text-decoration: underline;
}

/* Label + qty input */
.presale-modal__body {
    margin-bottom: 18px;
}

.presale-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--presale-text);
}

.presale-modal__qty {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;          /* ≥16px prevents iOS auto-zoom */
    font-family: var(--presale-font);
    border: 1px solid var(--presale-border);
    border-radius: var(--presale-radius);
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    color: var(--presale-text);
    outline-offset: 2px;
}
.presale-modal__qty:focus {
    outline: 2px solid var(--presale-accent);
    border-color: var(--presale-accent);
}

/* Submit button */
.presale-modal__footer {
    margin-bottom: 0;
}

.presale-modal__submit {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    font-family: var(--presale-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: var(--presale-accent);
    border: none;
    border-radius: var(--presale-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}
.presale-modal__submit:hover:not(:disabled) { background-color: #7a0037; }
.presale-modal__submit:disabled { opacity: 0.65; cursor: not-allowed; }

/* Success state */
.presale-modal__success {
    text-align: center;
    padding: 8px 0 4px;
}

.presale-modal__success-msg {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1d7a4a;
}

.presale-modal__withdraw {
    background: transparent;
    border: 1px solid var(--presale-border);
    border-radius: var(--presale-radius);
    padding: 9px 18px;
    font-family: var(--presale-font);
    font-size: 13px;
    color: var(--presale-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.presale-modal__withdraw:hover { border-color: #999; color: var(--presale-text); }
.presale-modal__withdraw:disabled { opacity: 0.6; cursor: not-allowed; }

/* Error message */
.presale-modal__error {
    margin: 12px 0 0;
    padding: 10px 12px;
    background-color: #fff5f5;
    border: 1px solid #f5b8b8;
    border-radius: var(--presale-radius);
    font-size: 13px;
    color: #b20000;
    line-height: 1.5;
    word-break: break-word;
}

/* Joined state on the join button */
.presale-join-btn--joined {
    background-color: #1d7a4a !important;
}

/* ── Responsive: on very small screens (< 390px),
       ensure the overlay padding shrinks before the card does ── */
@media (max-width: 389px) {
    #presale-join-overlay { padding: 16px 10px; }
}

/* ── Desktop (≥ 600px): centre the card vertically with some top offset ── */
@media (min-width: 600px) {
    #presale-join-overlay {
        align-items: center;
        padding: 40px 24px;
    }
}

/* ── Modal safety: never let any child overflow ── */
#presale-join-modal *,
#presale-join-overlay * {
    max-width: 100%;
    box-sizing: border-box;
}