/* OfflineSeva Razorpay — Checkout Styles v1.5 */

/* ── Razorpay gateway <li> — mirrors LP's PayPal row ── */
.osr-razorpay-li {
    display      : flex !important;
    align-items  : center !important;
    gap          : 12px !important;
    padding      : 12px 16px !important;
    border       : 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    cursor       : pointer !important;
    background   : #ffffff !important;
    transition   : border-color 0.2s, background 0.2s, box-shadow 0.2s;
    list-style   : none !important;
}

.osr-razorpay-li:hover {
    border-color : #072654 !important;
    background   : #f5f7ff !important;
}

/* Selected state */
.osr-razorpay-li.osr-selected {
    border-color : #072654 !important;
    background   : #eef2ff !important;
    box-shadow   : 0 0 0 2px rgba(7,38,84,0.15) !important;
}

.osr-razorpay-li input[type="radio"] {
    accent-color : #072654;
    width        : 18px;
    height       : 18px;
    flex-shrink  : 0;
    cursor       : pointer;
    margin       : 0;
}

.osr-razorpay-li label {
    display     : flex !important;
    align-items : center !important;
    gap         : 10px !important;
    margin      : 0 !important;
    cursor      : pointer !important;
    font-weight : 600 !important;
    font-size   : 14px !important;
    color       : #1a1a2e !important;
    flex        : 1 !important;
}

.osr-razorpay-li label img {
    height : 22px;
    width  : auto;
}

/* ── LP's native PROCEED button — active state when Razorpay selected ── */
/* This targets LP's own button and makes it green when Razorpay is chosen */
.osr-proceed-razorpay-active,
.osr-proceed-razorpay-active:focus {
    background-color : #16a34a !important;  /* green */
    border-color     : #16a34a !important;
    color            : #ffffff !important;
    opacity          : 1 !important;
    pointer-events   : auto !important;
    cursor           : pointer !important;
    box-shadow       : 0 4px 14px rgba(22,163,74,0.35) !important;
    transition       : background-color 0.25s, box-shadow 0.25s, transform 0.1s !important;
}

.osr-proceed-razorpay-active:hover {
    background-color : #15803d !important;
    box-shadow       : 0 6px 18px rgba(22,163,74,0.45) !important;
}

.osr-proceed-razorpay-active:active {
    transform        : scale(0.98) !important;
}

/* Pulse animation on first activation — draws user attention */
@keyframes osr-btn-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(22,163,74,0.5); }
    60%  { box-shadow: 0 0 0 10px rgba(22,163,74,0);   }
    100% { box-shadow: 0 0 0 0   rgba(22,163,74,0);   }
}
.osr-proceed-razorpay-active.osr-just-activated {
    animation: osr-btn-pulse 0.6s ease-out;
}

/* ── Standalone gateway list (no-PayPal mode) ── */
ul.osr-gw-list {
    list-style : none !important;
    padding    : 0 !important;
    margin     : 0 0 16px !important;
}

/* ── Fallback sidebar containers ── */
#osr-sidebar-wrap,
.osr-created-col {
    background    : #ffffff;
    border        : 1px solid #e5e7eb;
    border-radius : 10px;
    padding       : 20px;
    margin-bottom : 20px;
    box-shadow    : 0 1px 4px rgba(0,0,0,0.06);
}

/* ── OSR Pay Now button (standalone, shown in no-PayPal mode) ── */
.osr-pay-btn {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    gap             : 8px !important;
    width           : 100% !important;
    background      : #16a34a !important;
    color           : #ffffff !important;
    border          : none !important;
    border-radius   : 6px !important;
    padding         : 14px 20px !important;
    font-size       : 14px !important;
    font-weight     : 700 !important;
    letter-spacing  : 0.5px !important;
    cursor          : pointer !important;
    margin-top      : 12px !important;
    transition      : background 0.2s, box-shadow 0.2s, transform 0.1s;
    text-transform  : uppercase !important;
    text-decoration : none !important;
    box-shadow      : 0 4px 14px rgba(22,163,74,0.35) !important;
}

.osr-pay-btn:hover  {
    background : #15803d !important;
    box-shadow : 0 6px 18px rgba(22,163,74,0.45) !important;
}

.osr-pay-btn:active { transform: scale(0.98); }

.osr-pay-btn:disabled {
    opacity : 0.6 !important;
    cursor  : not-allowed !important;
}

.osr-pay-btn img {
    height : 18px;
    width  : auto;
    filter : brightness(0) invert(1);
}

/* ── Pay wrap spacing ── */
#osr-razorpay-pay-wrap { margin-top: 10px; }