/*
 * Pickup point / Travel Agency selector — checkout frontend styles
 * Colors are intentionally absent — the active theme handles all color theming.
 */

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.scpwoo-pickup-selector {
    display: none;
    margin-top: 12px;
    padding: 0 0 4px 22px;
}

.scpwoo-pickup-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Prompt + search ────────────────────────────────────────────────────────── */
.scpwoo-pickup-prompt {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.85;
}

.scpwoo-pickup-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: transparent;
}
.scpwoo-pickup-search:focus {
    border-color: currentColor;
    outline: none;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
/*
 * Card is a <label> wrapping a visually-hidden radio.
 * Reset ALL theme / WooCommerce border/outline/shadow on labels
 * so only our own border is visible (fixes the double-border bug).
 */
.scpwoo-pickup-card {
    /* Full reset of theme interference */
    appearance: none;
    -webkit-appearance: none;
    outline: none !important;
    box-shadow: none !important;

    /* Structural styling only */
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* Suppress any ::before injected by WooCommerce themes */
.scpwoo-pickup-card::before {
    display: none !important;
    content: none !important;
}

.scpwoo-pickup-card:hover {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.03);
}

/* Focus ring */
.scpwoo-pickup-card:focus-within {
    border-color: rgba(0, 0, 0, 0.3);
    outline: none !important;
    box-shadow: none !important;
}

/* ── Selected state ──────────────────────────────────────────────────────────
 * border-width stays 1.5px — never change it.
 * Changing width causes a 1px layout shift that creates a visual color glitch.
 */
.scpwoo-pickup-card--selected,
.scpwoo-pickup-card--selected:hover,
.scpwoo-pickup-card--selected:focus-within {
    border-color: currentColor;
    background: transparent;
    outline: none !important;
    box-shadow: none !important;
}

/* Dot indicator */
.scpwoo-pickup-card--selected::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Visually-hidden radio (accessible) ─────────────────────────────────────── */
.scpwoo-pickup-radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

/* ── Header row: name + location badge ──────────────────────────────────────── */
.scpwoo-pickup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-right: 28px;
}

.scpwoo-pickup-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.scpwoo-pickup-location {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Address — always visible ───────────────────────────────────────────────── */
.scpwoo-pickup-address {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 3px;
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selected card shows the full address instead of truncating it */
.scpwoo-pickup-card--selected .scpwoo-pickup-address {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* ── Expandable details (hours + phone) — only when selected ────────────────── */
.scpwoo-pickup-details {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.scpwoo-pickup-card--selected .scpwoo-pickup-details {
    display: flex;
}

.scpwoo-pickup-detail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.45;
}

/* Icons — dashicons */
.scpwoo-pickup-hours::before {
    content: '\f469'; /* dashicons-clock */
    font-family: dashicons;
    font-size: 14px;
    opacity: 0.6;
    line-height: 1;
    flex-shrink: 0;
}

.scpwoo-pickup-phone::before {
    content: '\f525'; /* dashicons-phone */
    font-family: dashicons;
    font-size: 14px;
    opacity: 0.6;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.scpwoo-pickup-empty {
    font-size: 13px;
    opacity: 0.65;
    padding: 8px 4px;
    font-style: italic;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .scpwoo-pickup-selector {
        padding-left: 0;
    }

    .scpwoo-pickup-header {
        flex-wrap: wrap;
        gap: 4px;
    }

    .scpwoo-pickup-name {
        font-size: 13px;
    }

    .scpwoo-pickup-card {
        padding: 10px 12px;
    }
}