/**
 * WW Pickup Checkout Pro — Frontend CSS
 *
 * Ontwerp: donkere viswinkel-stijl met goudkleurige accenten.
 * Kaart: wit, ronde hoeken, ruime padding, mobielvriendelijk.
 * Desktop: labels en velden naast elkaar in twee kolommen.
 * Mobiel: alles onder elkaar (single column).
 *
 * @package WW_Pickup_Checkout_Pro
 */

/* ─── CSS Variabelen ───────────────────────────────────────────── */
.ww-pickup-card {
    --ww-gold:        #c9a84c;
    --ww-gold-light:  #e8d08a;
    --ww-gold-dark:   #9e7b2a;
    --ww-dark:        #1a1a1a;
    --ww-text:        #2c2c2c;
    --ww-muted:       #666;
    --ww-white:       #ffffff;
    --ww-bg:          #fafaf8;
    --ww-border:      #e0d9cc;
    --ww-error:       #c0392b;
    --ww-error-bg:    #fdf0ee;
    --ww-radius:      12px;
    --ww-shadow:      0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0,0,0,0.06);
    --ww-transition:  0.2s ease;
}

/* ─── Kaart container ──────────────────────────────────────────── */
.ww-pickup-card {
    background:    var(--ww-white);
    border:        1px solid var(--ww-border);
    border-top:    4px solid var(--ww-gold);
    border-radius: var(--ww-radius);
    box-shadow:    var(--ww-shadow);
    padding:       28px 28px 24px;
    margin:        24px 0;
    position:      relative;
    overflow:      hidden;
    transition:    box-shadow var(--ww-transition);
}

.ww-pickup-card:hover {
    box-shadow: 0 6px 32px rgba(201, 168, 76, 0.18), 0 2px 8px rgba(0,0,0,0.08);
}

/* Decoratieve goudkleurige hoekaccent */
.ww-pickup-card::before {
    content:       '';
    position:      absolute;
    top:           0;
    right:         0;
    width:         80px;
    height:        80px;
    background:    radial-gradient(circle at top right, rgba(201,168,76,0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* ─── Header ───────────────────────────────────────────────────── */
.ww-pickup-card__header {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  8px;
}

.ww-pickup-card__icon {
    font-size:   1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.ww-pickup-card__title {
    margin:      0;
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--ww-dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ─── Beschrijving ─────────────────────────────────────────────── */
.ww-pickup-card__desc {
    margin:      0 0 20px;
    color:       var(--ww-muted);
    font-size:   0.9rem;
    line-height: 1.6;
    padding-left: 36px; /* uitlijnen met titel (icon breedte + gap) */
}

/* ─── Velden container ─────────────────────────────────────────── */
.ww-pickup-card__fields {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px 24px;
    margin-top:            4px;
}

/* ─── Individueel veld ─────────────────────────────────────────── */
.ww-pickup-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

/* ─── Label ────────────────────────────────────────────────────── */
.ww-pickup-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-weight: 600;
    font-size:   0.88rem;
    color:       var(--ww-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor:      pointer;
}

.ww-pickup-label__icon {
    font-size:   1rem;
    line-height: 1;
}

/* ─── Select-dropdowns ─────────────────────────────────────────── */
.ww-pickup-select {
    appearance:       none;
    -webkit-appearance: none;
    width:            100%;
    padding:          12px 40px 12px 14px;
    font-size:        0.95rem;
    color:            var(--ww-text);
    background-color: var(--ww-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    background-size:  18px;
    border:           2px solid var(--ww-border);
    border-radius:    8px;
    cursor:           pointer;
    transition:       border-color var(--ww-transition), box-shadow var(--ww-transition), background-color var(--ww-transition);
    line-height:      1.4;
    outline:          none;
    font-family:      inherit;
}

.ww-pickup-select:hover {
    border-color:     var(--ww-gold-light);
    background-color: #fff;
}

.ww-pickup-select:focus {
    border-color:    var(--ww-gold);
    box-shadow:      0 0 0 3px rgba(201, 168, 76, 0.18);
    background-color: #fff;
}

/* Fout-staat */
.ww-pickup-select--error {
    border-color:    var(--ww-error) !important;
    background-color: var(--ww-error-bg) !important;
    box-shadow:      0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}

.ww-pickup-select--error:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22) !important;
}

/* ─── Foutmelding ──────────────────────────────────────────────── */
.ww-pickup-error {
    display:     block;
    color:       var(--ww-error);
    font-size:   0.82rem;
    font-weight: 600;
    min-height:  1.1rem;
    line-height: 1.3;
    padding-left: 2px;
    animation:   ww-shake 0.35s ease;
}

@keyframes ww-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}

/* ─── Animatie: kaart inzoomen bij inject ──────────────────────── */
.ww-pickup-card.ww-pickup-injected {
    animation: ww-fadeIn 0.4s ease both;
}

@keyframes ww-fadeIn {
    from {
        opacity:   0;
        transform: translateY(-8px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* ─── Bedankpagina ─────────────────────────────────────────────── */
.ww-pickup-thankyou {
    margin-top: 2rem;
}

.ww-pickup-thankyou .woocommerce-order-details__title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--ww-dark, #1a1a1a);
    margin-bottom: 12px;
}

/* ─── Mobiel (≤ 640px) ─────────────────────────────────────────── */
@media ( max-width: 640px ) {
    .ww-pickup-card {
        padding: 20px 18px 18px;
        margin:  16px 0;
    }

    .ww-pickup-card__fields {
        grid-template-columns: 1fr; /* Één kolom op mobiel */
        gap:                   16px;
    }

    .ww-pickup-card__title {
        font-size: 1rem;
    }

    .ww-pickup-card__desc {
        padding-left: 0;
    }

    .ww-pickup-select {
        padding: 11px 36px 11px 12px;
        font-size: 16px; /* Voorkom iOS-zoom bij focus */
    }
}

/* ─── Tablet (641px – 900px): 2 kolommen al op tablet ─────────── */
@media ( min-width: 641px ) and ( max-width: 900px ) {
    .ww-pickup-card__fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── WooCommerce Blocks-specifieke positionering ──────────────── */

/* Zorg dat de kaart mooi past binnen de Blocks checkout sidebar */
.wc-block-checkout__main .ww-pickup-card,
.wp-block-woocommerce-checkout .ww-pickup-card {
    margin-left:  0;
    margin-right: 0;
}

/* Spacing aanpassen als kaart vóór de actieknop staat */
.wc-block-checkout__actions .ww-pickup-card,
.wc-block-checkout__payment-method + .ww-pickup-card {
    margin-bottom: 0;
    border-radius: var(--ww-radius) var(--ww-radius) 0 0;
    border-bottom: none;
}