/*
 * MOTO SERVICE RENT — Step 4: Payment / Terms / Legal Modal
 * File: moto-step4.css
 * Path: /wp-content/themes/marina/css/moto-step4.css
 * v1.0
 */

/* ═══════════════════════════════════════════
   STEP 4 — PAYMENT SECTION
   ═══════════════════════════════════════════ */

.moto-modal-body .crbs-main-content-step-4 .crbs-main-content-step-header-title {
    color: #1a1a1a !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* Payment method cards */
.moto-modal-body .crbs-main-content-step-4 .crbs-payment {
    background: transparent !important;
    list-style: none !important;
    padding: 0 !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-payment > li {
    background: #ffffff !important;
    border: 1.5px solid #ddd !important;
    border-radius: 6px !important;
    padding: 20px !important;
    margin-bottom: 12px !important;
    transition: border-color 0.3s !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-payment > li:hover,
.moto-modal-body .crbs-main-content-step-4 .crbs-payment > li.crbs-state-selected {
    border-color: #eb7c16 !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-payment > li a {
    color: #1a1a1a !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-payment > li .crbs-form-checkbox {
    border: 1.5px solid #eb7c16 !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-payment > li .crbs-form-checkbox .crbs-meta-icon-tick {
    font-family: 'crbs-meta-icon' !important;
    color: #eb7c16 !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-payment img {
    max-height: 40px !important;
}

/* ═══════════════════════════════════════════
   AGREEMENTS — Checkboxes + Links
   ═══════════════════════════════════════════ */

.moto-modal-body .crbs-main-content-step-4 .crbs-header {
    color: #1a1a1a !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #eb7c16 !important;
}

.moto-modal-body .crbs-main-content-step-4 .crbs-agreement {
    background: transparent !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement .crbs-clear-fix {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement .crbs-clear-fix:last-child {
    border-bottom: none !important;
}

/* Checkbox */
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement .crbs-form-checkbox {
    border: 1.5px solid #ddd !important;
    border-radius: 3px !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    transition: border-color 0.3s !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement .crbs-form-checkbox:hover {
    border-color: #eb7c16 !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement .crbs-form-checkbox.crbs-state-selected {
    border-color: #eb7c16 !important;
    background: rgba(235,124,22,0.08) !important;
}
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement .crbs-form-checkbox .crbs-meta-icon-tick {
    font-family: 'crbs-meta-icon' !important;
    color: #eb7c16 !important;
}

/* Agreement text + links */
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement span,
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement label,
.moto-modal-body .crbs-main-content-step-4 .crbs-agreement div {
    color: #1a1a1a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Legal link style */
.moto-legal-link {
    color: #eb7c16 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: color 0.3s !important;
}
.moto-legal-link:hover {
    color: #d06a0a !important;
}

/* ═══════════════════════════════════════════
   LEGAL MODAL — Fullscreen overlay
   ═══════════════════════════════════════════ */

.moto-legal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000000 !important;
    background: rgba(0,0,0,0.6) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
.moto-legal-overlay.open {
    display: flex !important;
}

.moto-legal-modal {
    background: #ffffff !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 720px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3) !important;
}

/* Header */
.moto-legal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    border-bottom: 2px solid #eb7c16 !important;
    flex-shrink: 0 !important;
}
.moto-legal-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
}
.moto-legal-close {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #666 !important;
    transition: all 0.3s !important;
    padding: 0 !important;
    outline: none !important;
}
.moto-legal-close:hover {
    border-color: #eb7c16 !important;
    color: #eb7c16 !important;
}

/* Body — scrollable */
.moto-legal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px !important;
    -webkit-overflow-scrolling: touch !important;
}
.moto-legal-body::-webkit-scrollbar {
    width: 4px !important;
}
.moto-legal-body::-webkit-scrollbar-track {
    background: transparent !important;
}
.moto-legal-body::-webkit-scrollbar-thumb {
    background: #ddd !important;
    border-radius: 2px !important;
}

/* Content — iframe fills modal body */
.moto-legal-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

/* Fallback content styling */
.moto-legal-content {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #333 !important;
}
/* Reset WPBakery rendered output */
.moto-legal-content *:not(a) {
    color: #333 !important;
}
.moto-legal-content div,
.moto-legal-content section,
.moto-legal-content p,
.moto-legal-content span,
.moto-legal-content li,
.moto-legal-content td,
.moto-legal-content [class*="msr-"],
.moto-legal-content [class*="msr-tc"],
.moto-legal-content [class*="msr-fw"],
.moto-legal-content .vc_row,
.moto-legal-content .wpb_column,
.moto-legal-content .wpb_wrapper,
.moto-legal-content .wpb_text_column,
.moto-legal-content [class*="nicdark_"],
.moto-legal-content [class*="nd_options_"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #333 !important;
    max-width: 100% !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}
.moto-legal-content h1,
.moto-legal-content h2,
.moto-legal-content h3,
.moto-legal-content h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #1a1a1a !important;
    margin: 20px 0 10px !important;
}
.moto-legal-content p {
    margin-bottom: 12px !important;
}
.moto-legal-content a {
    color: #eb7c16 !important;
}
.moto-legal-content h1 { font-size: 24px !important; }
.moto-legal-content h2 { font-size: 20px !important; }
.moto-legal-content h3 { font-size: 17px !important; }
.moto-legal-content p {
    margin-bottom: 12px !important;
}
.moto-legal-content a {
    color: #eb7c16 !important;
}
.moto-legal-content ul,
.moto-legal-content ol {
    padding-left: 24px !important;
    margin-bottom: 12px !important;
}

/* Loading spinner */
.moto-legal-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 0 !important;
}
.moto-legal-spinner {
    width: 32px !important;
    height: 32px !important;
    border: 3px solid #f0f0f0 !important;
    border-top: 3px solid #eb7c16 !important;
    border-radius: 50% !important;
    animation: motoLegalSpin 0.8s linear infinite !important;
}
@keyframes motoLegalSpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .moto-legal-overlay {
        padding: 0 !important;
    }
    .moto-legal-modal {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        height: 100% !important;
    }
    .moto-legal-header {
        padding: 14px 16px !important;
    }
    .moto-legal-title {
        font-size: 18px !important;
    }
    .moto-legal-body {
        padding: 16px !important;
    }
    .moto-legal-content {
        font-size: 13px !important;
    }
}