/* =========================================
   LADLI RIDER REGISTRATION
========================================= */

.rider-register-page {
    background:
        radial-gradient(
            circle at 90% 10%,
            #fff0e3,
            transparent 28%
        ),
        #f8f9fb;
}


.rider-register-main {
    padding: 125px 0 80px;
}


.rider-register-wrapper {
    width: min(1150px, 92%);
    margin: auto;
}


/* =========================================
   INTRO
========================================= */

.rider-register-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}


.register-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    border-radius: 30px;

    background: #fff0e4;
    color: #ff6b00;

    font-size: 11px;
    font-weight: 800;
}


.rider-register-intro h1 {
    margin: 18px 0 12px;

    color: #171717;

    font-size: 44px;
    line-height: 1.12;
}


.rider-register-intro h1 span {
    color: #ff6b00;
}


.rider-register-intro > p {
    color: #777;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================
   BENEFITS
========================================= */

.rider-benefits {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 28px;
}


.rider-benefit {
    display: flex;

    align-items: center;

    gap: 10px;

    text-align: left;

    padding: 13px;

    background: white;

    border: 1px solid #e8e8e8;

    border-radius: 13px;
}


.benefit-icon {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #fff0e4;
    color: #ff6b00;
}


.rider-benefit strong {
    display: block;

    color: #333;

    font-size: 11px;
}


.rider-benefit span {
    display: block;

    margin-top: 3px;

    color: #999;

    font-size: 9px;
}


/* =========================================
   CARD
========================================= */

.rider-register-card {
    max-width: 850px;

    margin: auto;

    padding: 32px;

    background: white;

    border: 1px solid #e5e5e5;

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);
}


.register-card-header {
    display: flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 22px;

    border-bottom: 1px solid #eee;

    margin-bottom: 25px;
}


.register-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #fff0e4;

    color: #ff6b00;

    font-size: 18px;
}


.register-card-header h2 {
    font-size: 22px;

    color: #222;
}


.register-card-header p {
    margin-top: 3px;

    color: #999;

    font-size: 10px;
}


/* =========================================
   PROFILE
========================================= */

.profile-upload-area {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 16px;

    margin-bottom: 28px;

    border-radius: 15px;

    background: #fafafa;

    border: 1px solid #eee;
}


.profile-preview {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 50%;

    background: #fff0e4;

    color: #ff6b00;

    border: 3px solid white;

    box-shadow: 0 3px 12px rgba(0,0,0,.08);

    font-size: 22px;
}


.profile-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.profile-upload-content strong {
    display: block;

    color: #333;

    font-size: 13px;
}


.profile-upload-content span {
    display: block;

    margin: 4px 0 9px;

    color: #999;

    font-size: 10px;
}


.upload-btn,
.small-upload-btn {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 8px;

    background: #ff6b00;

    color: white;

    cursor: pointer;

    font-size: 9px;

    font-weight: 700;
}


.upload-btn input,
.small-upload-btn input {
    display: none;
}


/* =========================================
   SECTION TITLE
========================================= */

.form-section-title {
    display: flex;

    align-items: center;

    gap: 11px;

    margin: 28px 0 15px;

    padding-bottom: 10px;

    border-bottom: 1px solid #eee;
}


.form-section-title > span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #fff0e4;

    color: #ff6b00;

    font-size: 10px;

    font-weight: 800;
}


.form-section-title strong {
    display: block;

    color: #333;

    font-size: 13px;
}


.form-section-title small {
    display: block;

    margin-top: 2px;

    color: #999;

    font-size: 9px;
}


/* =========================================
   FORM GRID
========================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}


.full-width {
    grid-column: 1 / -1;
}


.register-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #333;

    font-size: 10px;

    font-weight: 700;
}


.register-form-group label i {
    color: #ff6b00;

    margin-right: 4px;
}


.register-form-group input,
.register-form-group select {
    width: 100%;

    height: 46px;

    padding: 0 13px;

    outline: none;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: white;

    color: #333;

    font-size: 12px;

    transition: .25s;
}


.register-form-group input:focus,
.register-form-group select:focus {
    border-color: #ff6b00;

    box-shadow:
        0 0 0 3px rgba(255,107,0,.09);
}


/* =========================================
   VEHICLE OPTIONS
========================================= */

.vehicle-options {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 10px;
}


.vehicle-option input {
    display: none;
}


.vehicle-option-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 105px;

    padding: 10px;

    border: 1px solid #e1e1e1;

    border-radius: 13px;

    cursor: pointer;

    transition: .25s;

    background: white;
}


.vehicle-option-card img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


.vehicle-option-card strong {
    color: #555;

    font-size: 11px;
}


.vehicle-option input:checked
+ .vehicle-option-card {
    border-color: #ff6b00;

    background: #fff7f0;

    box-shadow:
        0 5px 18px rgba(255,107,0,.12);
}


.vehicle-option input:checked
+ .vehicle-option-card strong {
    color: #ff6b00;
}


/* =========================================
   BICYCLE ICON
========================================= */

.bicycle-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #ff6b00;

    font-size: 38px;
}


.vehicle-option input:checked
+ .vehicle-option-card
.bicycle-icon {
    color: #ff6b00;
}


/* =========================================
   VEHICLE DETAILS
========================================= */

#motorVehicleDetails {
    display: block;

    transition: .25s;
}


#motorVehicleDetails.hidden {
    display: none;
}


/* =========================================
   VEHICLE PHOTO
========================================= */

.document-upload {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 16px;

    padding: 13px;

    border: 1px dashed #ddd;

    border-radius: 12px;

    background: #fcfcfc;
}


.document-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #fff0e4;

    color: #ff6b00;
}


.document-content {
    flex: 1;
}


.document-content strong {
    display: block;

    font-size: 11px;

    color: #333;
}


.document-content span {
    display: block;

    margin-top: 3px;

    color: #999;

    font-size: 9px;
}


/* =========================================
   BICYCLE MESSAGE
========================================= */

.bicycle-message {
    display: none;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 14px;

    border-radius: 13px;

    background: #f0fff6;

    border: 1px solid #c9f2d9;
}


.bicycle-message.show {
    display: flex;
}


.bicycle-message-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #16a34a;

    color: white;

    font-size: 19px;
}


.bicycle-message strong {
    display: block;

    color: #15803d;

    font-size: 11px;
}


.bicycle-message span {
    display: block;

    margin-top: 4px;

    color: #6b7280;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================
   DOCUMENT UPLOAD
========================================= */

.full-upload-box {
    min-height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border: 1px dashed #ddd;

    border-radius: 12px;

    cursor: pointer;

    background: #fcfcfc;
}


.full-upload-box:hover {
    border-color: #ff6b00;
}


.full-upload-box > i {
    color: #ff6b00;

    font-size: 20px;
}


.full-upload-box strong {
    color: #555;

    font-size: 11px;
}


.full-upload-box span {
    color: #aaa;

    font-size: 9px;
}


.full-upload-box input {
    display: none;
}


/* =========================================
   LOCATION
========================================= */

.location-box {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    border-radius: 14px;

    background: #fff8f2;

    border: 1px solid #ffe1cc;
}


.location-box-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    background: #ff6b00;

    color: white;
}


.location-box-content {
    flex: 1;
}


.location-box-content strong {
    display: block;

    color: #333;

    font-size: 11px;
}


.location-box-content span {
    display: block;

    margin-top: 4px;

    color: #999;

    font-size: 9px;
}


.location-btn {
    height: 38px;

    padding: 0 13px;

    border-radius: 9px;

    background: white;

    color: #ff6b00;

    border: 1px solid #ff6b00;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.location-btn:disabled {
    opacity: .65;

    cursor: not-allowed;
}


/* =========================================
   TERMS
========================================= */

.terms-check {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 25px;

    color: #777;

    font-size: 10px;

    line-height: 1.6;

    cursor: pointer;
}


.terms-check input {
    margin-top: 3px;

    accent-color: #ff6b00;
}


.terms-check a {
    color: #ff6b00;

    font-weight: 700;
}


/* =========================================
   MESSAGE
========================================= */

.register-message {
    min-height: 20px;

    margin-top: 12px;

    text-align: center;

    font-size: 11px;

    font-weight: 700;
}


.register-message.success {
    color: #16a34a;
}


.register-message.error {
    color: #dc2626;
}


/* =========================================
   SUBMIT
========================================= */

.register-submit-btn {
    width: 100%;

    height: 50px;

    margin-top: 12px;

    border: 0;

    border-radius: 11px;

    background: #ff6b00;

    color: white;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(255,107,0,.20);

    transition: .25s;
}


.register-submit-btn:hover {
    background: #e85f00;

    transform: translateY(-2px);
}


.register-submit-btn:disabled {
    opacity: .65;

    cursor: not-allowed;

    transform: none;
}


.approval-note {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 6px;

    margin-top: 13px;

    color: #999;

    text-align: center;

    font-size: 9px;

    line-height: 1.6;
}


.approval-note i {
    color: #16a34a;

    margin-top: 2px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .rider-register-main {
        padding: 95px 0 90px;
    }


    .rider-register-wrapper {
        width: 94%;
    }


    .rider-register-intro h1 {
        font-size: 32px;
    }


    .rider-register-intro > p {
        font-size: 12px;
    }


    .rider-benefits {
        grid-template-columns: 1fr;
    }


    .rider-register-card {
        padding: 20px 15px;

        border-radius: 19px;
    }


    .form-grid {
        grid-template-columns: 1fr;
    }


    .full-width {
        grid-column: auto;
    }


    .vehicle-options {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .location-box {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .location-btn {
        width: 100%;
    }


    .profile-upload-area {
        padding: 12px;
    }


    .bicycle-message {
        align-items: flex-start;
    }

}


@media (max-width: 380px) {

    .vehicle-option-card {
        min-height: 95px;
    }


    .vehicle-option-card img {
        width: 42px;
        height: 42px;
    }


    .bicycle-icon {
        width: 42px;
        height: 42px;

        font-size: 33px;
    }

}