/* =========================================================

   AZIN TRAVEL & TOURISM

   HAJJ & UMRAH PASSENGER REGISTRATION

   PREMIUM NAVY / GOLD DESIGN

   ========================================================= */



:root{

    --navy:#062f49;

    --navy-dark:#04263c;

    --navy-soft:#0b496c;

    --gold:#e1a20a;

    --gold-dark:#b87900;

    --gold-soft:#fff4d2;

    --white:#fff;

    --page:#edf4f8;

    --text:#08283f;

    --muted:#5d7890;

    --line:#d3dee7;

    --red:#ef3340;

    --green:#08aa6e;

    --blue:#168ee1;

    --shadow:0 8px 22px rgba(6,37,59,.13);

    --radius:14px;

    --transition:.2s ease;

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

    margin:0;

    color:var(--text);

    background:var(--page);

    font-family:Arial,Helvetica,sans-serif;

}

button,input,select,textarea{font:inherit}

button{cursor:pointer}

[hidden]{display:none!important}



/* TOP HEADER */

.top-header{

    height:56px;

    background:var(--navy-dark);

    color:#fff;

}

.top-header-inner{

    width:min(1180px,calc(100% - 36px));

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.azin-logo{color:#f0c65f;text-decoration:none;font-weight:900;font-size:22px;letter-spacing:1px}

.employee-panel-btn{

    border:1px solid rgba(225,162,10,.65);

    border-radius:8px;

    padding:9px 14px;

    color:#fff;

    background:rgba(255,255,255,.05);

}



/* PAGE */

.registration-page{padding:24px 0 42px}

.registration-container{width:min(1180px,calc(100% - 36px));margin:auto}



/* HERO */

.registration-banner{

    position:relative;

    min-height:112px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:24px 30px;

    border:1.5px solid var(--gold);

    border-radius:var(--radius);

    color:#fff;

    background:

      radial-gradient(circle at 94% 30%,rgba(225,162,10,.18),transparent 26%),

      linear-gradient(115deg,#052c45,#0a4565);

    box-shadow:var(--shadow);

}

.registration-banner:before{

    content:"";

    width:62px;height:62px;

    margin-right:20px;

    flex:0 0 62px;

    border:1px solid rgba(255,220,132,.55);

    border-radius:14px;

    background:linear-gradient(145deg,#f4cf73,#d99b00);

    box-shadow:0 7px 18px rgba(225,162,10,.22);

}

.registration-banner:after{

    content:"\f66f";

    position:absolute;

    left:50px;

    top:45px;

    font:900 28px/1 "Font Awesome 6 Free";

    color:#704600;

}

.banner-content h1{margin:0 0 8px;font-size:26px;color:#f5d57f}

.banner-content p{margin:0;font-size:12px;color:#d8e6ef}

.banner-decoration{

    position:absolute;right:-35px;top:-72px;width:190px;height:190px;

    border:1px solid rgba(225,162,10,.38);border-radius:50%;

}

.banner-decoration:after{

    content:"";position:absolute;inset:20px;border:1px solid rgba(225,162,10,.24);border-radius:50%;

}



/* ALL MAIN CARDS */

.registration-type-card,.form-card{

    margin-top:16px;

    border:1.5px solid var(--gold);

    border-radius:var(--radius);

    background:#fff;

    box-shadow:var(--shadow);

}

.registration-type-card{padding:17px 22px}

.section-title-row{display:flex;align-items:center;gap:14px}

.section-icon,.heading-icon,.payment-header-icon,.mini-header-icon,.field-icon{

    display:inline-flex;align-items:center;justify-content:center;

    color:#8a5800;

    background:linear-gradient(145deg,#fff7df,#ffe5a0);

    border:1px solid #f3d98d;

    box-shadow:0 4px 12px rgba(225,162,10,.10);

}

.section-icon{width:46px;height:46px;border-radius:11px;font-size:19px}

.section-title-row h2{margin:0;font-size:18px}

.registration-type-options{display:flex;gap:30px;margin:9px 0 0 60px}

.registration-option{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}

.registration-option input{position:absolute;opacity:0}

.custom-radio{

    width:21px;height:21px;border:2px solid #aabcca;border-radius:50%;position:relative;background:#fff

}

.registration-option input:checked + .custom-radio{border-color:var(--gold)}

.registration-option input:checked + .custom-radio:after{

    content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold)

}



/* PASSENGER CARD */

.passenger-card{padding:20px 22px 24px}

.passenger-header{
    display:grid;
    grid-template-columns:
        minmax(260px, 1.05fr)
        minmax(220px, .90fr)
        minmax(250px, 1fr)
        150px;
    gap:20px;
    align-items:start;
    margin-bottom:25px;
}

.passenger-heading{display:flex;gap:14px;align-items:flex-start}

.heading-icon{width:46px;height:46px;flex:0 0 46px;border-radius:11px;font-size:19px}

.heading-copy h2{margin:2px 0 5px;font-size:20px}

.heading-copy p{margin:0;color:var(--muted);font-size:11px}

.passenger-group,

.passenger-number-card,

.family-member-control{

    position:relative;

    min-width:0;

    padding-left:54px;

}



.family-member-control{

    grid-column:auto;

    width:100%;

    margin:0;

}



.mini-header-icon{

    position:absolute;

    left:0;

    top:27px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    font-size:16px;

}



.passenger-group label,

.passenger-number-card label,

.family-member-control label{

    display:block;

    margin:2px 0 7px;

    font-size:12px;

    font-weight:800;

}

.group-input-wrap{display:flex;height:44px;border:1.5px solid #ddbdbd;border-radius:9px;overflow:hidden;background:#fff}

.group-input-wrap input{min-width:0;flex:1;border:0!important;outline:0;padding:0 12px}

.group-dropdown-btn{width:42px;border:0;border-left:1px solid #d8e3ea;background:#fff;color:#355a72}

.passenger-number-box{

    width:100%;height:44px;display:flex;align-items:center;justify-content:center;

    border:1.5px solid #ddbdbd;border-radius:9px;background:#fff

}

.group-combobox{
    position:relative;
}


/* GROUP DROPDOWN */

.group-dropdown{
    position:absolute;

    left:0;
    right:0;
    top:calc(100% + 7px);

    z-index:50;

    width:100%;

    display:block;

    padding:8px;

    border:1.5px solid var(--gold);
    border-radius:10px;

    background:#ffffff;

    box-shadow:
        0 14px 30px rgba(6,37,59,.16),
        0 3px 8px rgba(225,162,10,.08);
}


/* COMPANY ITEMS */

.company-suggestions button{
    width:100%;

    display:flex;
    align-items:center;

    margin:0;
    padding:11px 13px;

    border:0;
    border-bottom:1px solid #edf1f4;
    border-radius:7px;

    background:#ffffff;
    color:var(--text);

    font-size:13px;
    font-weight:700;

    text-align:left;

    transition:
        background .18s ease,
        color .18s ease,
        padding-left .18s ease;
}

.company-suggestions button:last-child{
    border-bottom:0;
}

.company-suggestions button:hover{
    padding-left:17px;

    background:var(--gold-soft);
    color:#8a5800;
}

.group-list{
    width:100%;
    max-height:190px;
    overflow-y:auto;

    display:flex;
    flex-direction:column;
    gap:5px;
}


/* GROUP ITEM */

.group-list-item{
    width:100%;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:9px 12px;
    margin:0;

    border:1px solid transparent;
    border-radius:8px;

    background:#ffffff;
    color:var(--text);

    text-align:left;
    cursor:pointer;

    transition:all .18s ease;
}

.group-list-item:hover{
    background:#fff8e6;
    border-color:#efd58d;
}

.group-list-item.selected{
    background:#fff4d2;
    border-color:var(--gold);
}


/* GROUP NAME */

.group-item-name{
    display:block;
    min-width:0;

    color:#08283f;

    font-size:12px;
    font-weight:800;

    white-space:nowrap;
}


/* GROUP STATUS */

.group-item-status{
    flex:0 0 auto;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 9px;

    border-radius:20px;

    background:#eaf8f1;
    color:#078653;

    font-size:10px;
    font-weight:800;

    white-space:nowrap;
}


/* DIVIDER */

.group-dropdown-divider{
    width:100%;
    height:1px;

    margin:7px 0;

    background:#e7edf2;
}


/* CREATE NEW GROUP */

.create-group-btn{
    width:100%;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:9px 12px;

    border:1px solid #efd58d;
    border-radius:8px;

    background:#fff8e6;
    color:#805300;

    font-size:12px;
    font-weight:800;

    cursor:pointer;
}

.create-group-btn:hover{
    background:#ffefc2;
    border-color:var(--gold);
}


/* SELECTED GROUP */

.selected-group-status{
    margin-top:6px;

    color:var(--green);

    font-size:10px;
    font-weight:700;
}


/* FORM GRID + FIELD ICONS */

.form-grid{

    display:grid;

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

    column-gap:46px;

    row-gap:18px;

}

.form-group{position:relative;min-width:0;padding-left:58px}

.field-icon{

    position:absolute;left:0;bottom:0;

    width:46px;height:46px;border-radius:10px;font-size:17px

}

.form-group label{

    display:block;margin-bottom:7px;color:var(--text);font-size:12px;font-weight:800

}

.form-group label span{color:#e1252e}

.form-group input,.form-group select,.form-group textarea{

    width:100%;height:46px;min-width:0;padding:0 14px;

    border:1.5px solid var(--gold);border-radius:9px;

    outline:0;background:#fff;color:var(--text);

    box-shadow:inset 0 1px 2px rgba(6,37,59,.025);

    transition:border-color var(--transition),box-shadow var(--transition)

}

.form-group input::placeholder{color:#b2908f}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{

    border-color:var(--red);box-shadow:0 0 0 3px rgba(225,162,10,.12)

}

.company-combobox{position:relative}



/* PAYMENT */

.payment-card{padding:18px 20px 20px}

.form-section-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}

.payment-header-icon{width:46px;height:46px;flex:0 0 46px;border-radius:10px;font-size:18px}

.form-section-header h2{margin:0 0 5px;font-size:19px}

.form-section-header p{margin:0;color:var(--muted);font-size:11px}

.payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.payment-field{

    min-width:0;padding:13px 14px 14px;border-radius:12px;

    background:#f8fcff;box-shadow:0 6px 16px rgba(6,37,59,.08)

}

.payment-field>label{

    display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;font-weight:900

}

.payment-field>label:before{

    width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;

    border-radius:10px;color:#fff;font:900 17px/1 "Font Awesome 6 Free";

}

.total-payment{border:1.5px solid #269ce9;background:linear-gradient(145deg,#f8fcff,#eef8ff)}

.total-payment>label:before{content:"\f81d";background:linear-gradient(145deg,#27a9f4,#1687d8)}

.received-payment{border:1.5px solid #16b875;background:linear-gradient(145deg,#fbfffd,#effbf5)}

.received-payment>label:before{content:"\f4c0";background:linear-gradient(145deg,#16c887,#08a86f)}

.remaining-payment{border:1.5px solid #ff4c55;background:linear-gradient(145deg,#fffefe,#fff2f3)}

.remaining-payment>label:before{content:"\f570";background:linear-gradient(145deg,#ff5660,#df2832)}

.money-input{

    height:46px;display:flex;overflow:hidden;border:1.5px solid var(--gold);

    border-radius:8px;background:#fff

}

.currency-symbol{

    width:48px;display:flex;align-items:center;justify-content:center;

    border-right:1px solid #d8e2e9;background:#f5f9fb;color:#0b4162;font-weight:900

}

.money-input input{

    width:100%;min-width:0;border:0!important;outline:0;padding:0 13px;background:#fff;

    color:var(--text);font-size:16px;font-weight:900

}

.received-payment .money-input input,.received-status{color:var(--green)}

.remaining-payment .money-input input,.remaining-status{color:var(--red)}

.payment-status{display:block;margin-top:7px;font-size:10px;font-weight:900}



/* FAMILY */

.family-counter{height:44px;display:flex;border:1.5px solid var(--gold);border-radius:9px;overflow:hidden}

.family-counter button{width:40px;border:0;background:#fff4d5;color:#7c5100;font-size:18px}

.family-counter strong{flex:1;display:flex;align-items:center;justify-content:center}



/* ACTIONS */

.registration-actions{margin-top:16px;display:flex;gap:12px}

.register-btn,.register-family-btn,.next-member-btn{

    min-height:52px;flex:1;border-radius:9px;font-weight:900;box-shadow:0 8px 18px rgba(6,37,59,.15)

}

.register-btn,.register-family-btn{

    border:1.5px solid var(--gold);background:linear-gradient(135deg,#063653,#052b43);color:#fff

}

.next-member-btn{border:1.5px solid var(--gold);background:#fff8e5;color:#694500}

.register-btn i,.register-family-btn i{margin-right:8px;color:#f3c85e}

.registration-message{margin-top:12px;text-align:center;font-size:12px;font-weight:700}



/* =========================================================
   FORM VALIDATION - SHOW RED ONLY AFTER REGISTER CLICK
   ========================================================= */

#passengerRegistrationForm.form-submitted
.form-group input:invalid,

#passengerRegistrationForm.form-submitted
.form-group select:invalid,

#passengerRegistrationForm.form-submitted
.form-group textarea:invalid{
    border-color:#e53935 !important;

    box-shadow:
        0 0 0 3px rgba(8, 209, 88, 0.493) !important;
}


/* When invalid field receives focus */

#passengerRegistrationForm.form-submitted
.form-group input:invalid:focus,

#passengerRegistrationForm.form-submitted
.form-group select:invalid:focus,

#passengerRegistrationForm.form-submitted
.form-group textarea:invalid:focus{
    border-color:#e53935 !important;

    box-shadow:
        0 0 0 3px rgba(229,57,53,.16) !important;
}



/* RESPONSIVE */

@media(max-width:900px){

    .passenger-header{grid-template-columns:1fr 1fr}

    .passenger-heading{grid-column:1/-1}

    .form-grid{column-gap:24px}

    .payment-grid{gap:14px}

}

@media(max-width:700px){

    .registration-container,.top-header-inner{width:min(100% - 20px,1180px)}

    .registration-banner{padding:20px}

    .registration-banner:before,.registration-banner:after{display:none}

    .banner-content h1{font-size:21px}

    .passenger-header,.form-grid,.payment-grid{grid-template-columns:1fr}

    .passenger-heading{grid-column:auto}

    .form-group{padding-left:54px}

    .payment-grid{gap:12px}

}

@media(max-width:480px){

    .passenger-card,.payment-card{padding:15px 12px}

    .registration-type-options{margin-left:0}

    .form-group{padding-left:0;padding-top:52px}

    .field-icon{top:0;bottom:auto}

    .registration-actions{flex-direction:column}

}

/* =========================================================
   FAMILY HEADER ROW FIX
   Passenger Information | Family Members | Group | Passenger No.
   ========================================================= */
.passenger-header:has(.family-member-control:not([hidden])){
    grid-template-columns:
        minmax(260px, 1.05fr)
        minmax(220px, .90fr)
        minmax(250px, 1fr)
        150px;
}

.passenger-header:has(.family-member-control:not([hidden])) .passenger-heading{
    grid-column:auto;
}

.passenger-header:has(.family-member-control:not([hidden])) .family-member-control,
.passenger-header:has(.family-member-control:not([hidden])) .passenger-group,
.passenger-header:has(.family-member-control:not([hidden])) .passenger-number-card{
    grid-column:auto;
    grid-row:1;
    width:100%;
    min-width:0;
}

/* Desktop: force all four header items into one row */
@media (min-width:901px){
    .passenger-header:has(.family-member-control:not([hidden])) .passenger-heading{
        grid-column:1;
        grid-row:1;
    }

    .passenger-header:has(.family-member-control:not([hidden])) .family-member-control{
        grid-column:2;
        grid-row:1;
    }

    .passenger-header:has(.family-member-control:not([hidden])) .passenger-group{
        grid-column:3;
        grid-row:1;
    }

    .passenger-header:has(.family-member-control:not([hidden])) .passenger-number-card{
        grid-column:4;
        grid-row:1;
    }
}












/* =========================================================
   SPECIAL ROOM
   Individual + Family
   ========================================================= */


/* =========================================================
   BASE
   Icon + Control in one row
   ========================================================= */

.special-room-control{
    position:relative;
    min-width:0;
    width:100%;

    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:auto 44px;
    column-gap:12px;
    row-gap:7px;

    padding-left:0;
}


/* Icon */

.special-room-control > .mini-header-icon{
    position:static;

    grid-column:1;
    grid-row:2;

    width:42px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    font-size:16px;
}


/* Title */

.special-room-label{
    grid-column:2;
    grid-row:1;

    display:block;

    margin:2px 0 0;

    color:var(--text);

    font-size:12px;
    font-weight:800;

    white-space:nowrap;
}


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

.special-room-checkbox{
    grid-column:2;
    grid-row:2;

    width:100%;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    margin:0;

    border:1.5px solid var(--gold);
    border-radius:9px;

    background:#fff;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* Hide browser checkbox */

.special-room-checkbox input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}


/* Custom checkbox */

.special-room-check{
    width:20px;
    height:20px;

    flex:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #aabcca;
    border-radius:5px;

    background:#fff;

    transition:all .2s ease;
}


.special-room-check i{
    opacity:0;

    color:#fff;

    font-size:11px;

    transform:scale(.6);

    transition:all .18s ease;
}


/* Checked */

.special-room-checkbox input:checked
+ .special-room-check{
    border-color:var(--gold);
    background:var(--gold);
}


.special-room-checkbox input:checked
+ .special-room-check i{
    opacity:1;
    transform:scale(1);
}


.special-room-checkbox:has(input:checked){
    border-color:var(--gold);

    background:var(--gold-soft);

    box-shadow:
        0 0 0 3px rgba(225,162,10,.10);
}


.special-room-text{
    color:var(--text);

    font-size:12px;
    font-weight:800;

    white-space:nowrap;
}


/* =========================================================
   KEEP HEADER LABELS IN ONE LINE
   ========================================================= */

.passenger-group > label,
.passenger-number-card > label,
.family-member-control > label,
.special-room-label{
    white-space:nowrap;
}


/* =========================================================
   INDIVIDUAL
   Passenger Information | Group | Passenger No. | Special Room
   ========================================================= */

@media (min-width:901px){

    .passenger-header{
        grid-template-columns:
            minmax(230px,1fr)
            minmax(280px,1.25fr)
            155px
            200px;

        gap:18px;

        align-items:start;
    }


    .passenger-heading{
        grid-column:1;
        grid-row:1;
    }


    .passenger-group{
        grid-column:2;
        grid-row:1;
    }


    .passenger-number-card{
        grid-column:3;
        grid-row:1;

        min-width:155px;
    }


    .special-room-control{
        grid-column:4;
        grid-row:1;

        min-width:200px;
    }
}


/* =========================================================
   FAMILY
   Passenger Information | Family Members | Group |
   Passenger No. | Special Room
   ========================================================= */

@media (min-width:901px){

    .passenger-header:has(
        .family-member-control:not([hidden])
    ){
        grid-template-columns:
            minmax(190px,.95fr)
            165px
            minmax(220px,1.05fr)
            145px
            190px;

        gap:14px;

        align-items:start;
    }


    .passenger-header:has(
        .family-member-control:not([hidden])
    ) .passenger-heading{
        grid-column:1;
        grid-row:1;
    }


    .passenger-header:has(
        .family-member-control:not([hidden])
    ) .family-member-control{
        grid-column:2;
        grid-row:1;
    }


    .passenger-header:has(
        .family-member-control:not([hidden])
    ) .passenger-group{
        grid-column:3;
        grid-row:1;
    }


    .passenger-header:has(
        .family-member-control:not([hidden])
    ) .passenger-number-card{
        grid-column:4;
        grid-row:1;

        min-width:145px;
    }


    .passenger-header:has(
        .family-member-control:not([hidden])
    ) .special-room-control{
        grid-column:5;
        grid-row:1;

        min-width:190px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

    .special-room-control{
        grid-column:auto;
        width:100%;
    }
}


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

@media (max-width:700px){

    .special-room-control{
        grid-column:auto;
        width:100%;
    }
}