/*
 * =========================================================
 * REPOSE CAFE – Order Method Popup Styles
 * Brand: Primary Pink #ED8D8B | Persian Teal #029A87
 *        Espresso #482728 | Deep Teal #073B3A
 *        Yellow #F4E285 | Coral #F87060
 * =========================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Base font ── */
.exwf-order-method,
.exwf-order-method * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

/* ── Main popup card ── */
.exwf-order-method .exwf-opcls-content {
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 60px rgba(7,59,58,0.18), 0 4px 16px rgba(7,59,58,0.08) !important;
    border: none !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Gradient accent bar at the very top of the card */
.exwf-order-method .exwf-opcls-content::before {
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(90deg, #ED8D8B, #F87060, #F4E285, #029A87, #073B3A);
    flex-shrink: 0;
}

/* Inner padding wrapper – sits below the gradient bar */
.exwf-order-method .exwf-method-ct {
    padding: 28px 28px 24px !important;
}

/* ── Close (×) button ── */
.exwf-order-method .ex_close {
    color: #aabfbe !important;
    font-size: 26px !important;
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}
.exwf-order-method .ex_close:hover {
    color: #F87060 !important;
    transform: rotate(90deg) scale(1.1);
}

/* ── Delivery / Takeaway / Dine-In tab strip ── */
.exwf-order-method .exwf-method-title {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 22px !important;
    background: #f0f5f4 !important;
    padding: 5px !important;
    border-radius: 16px !important;
}
.exwf-order-method .exwf-method-title > div {
    flex: 1;
    text-align: center;
    border-radius: 12px;
    padding: 11px 6px;
    font-weight: 700;
    color: #6d8584;
    transition: all 0.25s ease;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.1px;
}
.exwf-order-method .exwf-method-title > div.at-method {
    background: #029A87 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(2,154,135,0.35);
}
.exwf-order-method .exwf-method-title > div:not(.at-method):hover {
    background: rgba(2,154,135,0.09);
    color: #029A87;
}

/* ── Field labels ── */
.rp-om-label {
    color: #482728 !important;
    font-weight: 700 !important;
    margin-bottom: 7px !important;
    display: block !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
}

/* ── Select wrapper (for the chevron icon) ── */
.rp-select-wrap {
    position: relative;
    margin-bottom: 14px;
}
.rp-select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #029A87;
}
.rtl .rp-select-chevron {
    left: 14px;
    right: auto;
}

/* ── Select dropdowns ── */
.exwf-order-method select.rp-om-select {
    width: 100% !important;
    padding: 13px 42px 13px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cee6e4 !important;
    background: #f6fafa !important;
    color: #073B3A !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    display: block !important;
    margin-bottom: 0 !important;
}
.exwf-order-method select.rp-om-select:hover {
    border-color: #029A87 !important;
}
.exwf-order-method select.rp-om-select:focus {
    border-color: #ED8D8B !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(237,141,139,0.2) !important;
    outline: none !important;
}

/* ── Address text input ── */
.exwf-order-method input[type="text"] {
    width: 100% !important;
    padding: 13px 42px 13px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cee6e4 !important;
    background: #f6fafa !important;
    color: #073B3A !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}
.exwf-order-method input[type="text"]:hover {
    border-color: #029A87 !important;
}
.exwf-order-method input[type="text"]:focus {
    border-color: #ED8D8B !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(237,141,139,0.2) !important;
    outline: none !important;
}

/* ── Address label ── */
.exwf-order-method .exwf-del-address > span {
    color: #482728;
    font-weight: 700;
    margin-bottom: 7px;
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* ── CRITICAL FIX: This class was used in JS but never defined ── */
.rp-om-step--hidden {
    display: none !important;
}

/* Smooth fade-in when branch dropdown appears */
.rp-om-step {
    animation: rpFadeUp 0.28s ease both;
}
@keyframes rpFadeUp {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Thin divider between Area and Branch steps */
.rp-om-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #deecea, transparent);
    margin: 2px 0 14px;
}

/* ── Error messages ── */
.exwf-order-method .exwf-add-error {
    color: #F87060 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 4px 0 8px !important;
}

/* ── "Start my order" CTA button ── */
.exwf-method-bt {
    margin-top: 6px;
}
.exwf-method-bt .exwf-button {
    background: linear-gradient(135deg, #ED8D8B 0%, #F87060 100%) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 15px 28px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    transition: all 0.28s ease !important;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
    border: none !important;
    box-shadow: 0 6px 18px rgba(237,141,139,0.4) !important;
}
.exwf-method-bt .exwf-button:hover {
    background: linear-gradient(135deg, #029A87 0%, #073B3A 100%) !important;
    box-shadow: 0 8px 22px rgba(2,154,135,0.4) !important;
    transform: translateY(-2px);
}
.exwf-method-bt .exwf-button:active {
    transform: translateY(0);
}

/* ── Geo-location icon positioning ── */
.exwf-order-method .exwf-del-address > div {
    position: relative;
}
.exwf-order-method .exwf-crlog {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
}