/* ==========================================================
PAKISTAN CONSULATE GLASGOW
BOOKING + CUSTOMER APPOINTMENT PORTAL
Theme: Pakistan Green + White
========================================================== */

/* ==========================================================
ROOT VARIABLES
========================================================== */

:root{


--pak-green:#006600;
--pak-green-dark:#004d00;
--pak-green-deep:#003d00;
--pak-green-light:#eaf6ea;
--pak-green-soft:#f3faf3;

--white:#ffffff;
--off-white:#f7fbf7;

--border:#d8e8d8;

--success:#198754;
--danger:#b42318;
--warning:#9a6700;

--shadow:
    0 8px 30px rgba(0,102,0,.08);

--shadow-large:
    0 15px 45px rgba(0,102,0,.12);


}

/* ==========================================================
GLOBAL RESET
========================================================== */

*{


margin:0;
padding:0;
box-sizing:border-box;


}

html{


scroll-behavior:smooth;


}

body{


font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

background:
    linear-gradient(
        135deg,
        #f7fbf7 0%,
        #edf7ed 100%
    );

color:var(--pak-green);

line-height:1.6;

min-height:100vh;


}

a{


color:var(--pak-green);


}

button,
input,
select,
textarea{


font-family:inherit;


}

button{


cursor:pointer;


}

img{


max-width:100%;


}

/* ==========================================================
SCROLLBAR
========================================================== */

::-webkit-scrollbar{


width:9px;


}

::-webkit-scrollbar-track{


background:#edf6ed;


}

::-webkit-scrollbar-thumb{


background:var(--pak-green);

border-radius:10px;


}

::-webkit-scrollbar-thumb:hover{


background:var(--pak-green-dark);


}

/* ==========================================================
CUSTOMER / GOVERNMENT HEADER
========================================================== */

.customer-header{


width:100%;

background:
    linear-gradient(
        135deg,
        var(--pak-green-deep),
        var(--pak-green)
    );

color:var(--white);

border-bottom:5px solid
    var(--white);

box-shadow:
    0 4px 20px rgba(0,0,0,.15);


}

.header-inner{


max-width:1250px;

margin:0 auto;

min-height:90px;

padding:15px 25px;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;


}

.government-brand{


display:flex;

align-items:center;

gap:16px;


}

.pakistan-emblem{


width:62px;

height:62px;

border-radius:50%;

background:var(--white);

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

flex-shrink:0;

border:2px solid
    rgba(255,255,255,.8);


}

.pakistan-emblem img{


width:52px;

height:52px;

object-fit:contain;


}

.government-brand h1{


color:var(--white);

font-size:21px;

font-weight:700;

line-height:1.2;


}

.government-brand p{


color:var(--white);

margin-top:3px;

font-size:14px;

opacity:.9;


}

.portal-label{


color:var(--white);

font-size:14px;

font-weight:600;

padding:10px 18px;

border:1px solid
    rgba(255,255,255,.5);

border-radius:30px;

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


}

/* ==========================================================
BOOKING PAGE
========================================================== */

.booking-page{


min-height:100vh;

padding:40px 20px;


}

.booking-box{


width:540px;

max-width:95%;

margin:50px auto;

background:var(--white);

border-radius:18px;

padding:40px;

border:
    1px solid var(--border);

box-shadow:var(--shadow-large);


}

.booking-box::before{


content:"";

display:block;

width:70px;

height:5px;

margin:0 auto 30px;

border-radius:10px;

background:var(--pak-green);


}

/* ==========================================================
BOOKING PROGRESS
========================================================== */

.progress{


display:flex;

align-items:center;

justify-content:center;

margin-bottom:40px;


}

.step{


width:44px;

height:44px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#dcecdc;

color:var(--pak-green);

font-weight:700;

border:2px solid
    #c5ddc5;

transition:.25s;


}

.step.active{


background:var(--pak-green);

color:var(--white);

border-color:var(--pak-green);

box-shadow:
    0 0 0 5px rgba(0,102,0,.10);


}

.line{


width:65px;

height:3px;

background:#dcecdc;


}

.step.active + .line{


background:var(--pak-green);


}

/* ==========================================================
BOOKING STEPS
========================================================== */

.booking-step{


display:none;


}

.booking-step.active{


display:block;

animation:
    bookingFade .25s ease;


}

@keyframes bookingFade{


from{

    opacity:0;
    transform:translateY(8px);

}

to{

    opacity:1;
    transform:translateY(0);

}


}

.booking-step h2{


color:var(--pak-green-dark);

font-size:25px;

margin-bottom:8px;


}

.booking-step h2::after{


content:"";

display:block;

width:45px;

height:3px;

background:var(--pak-green);

margin-top:8px;

border-radius:5px;


}

.booking-step p{


color:var(--pak-green);

margin-bottom:20px;


}

/* ==========================================================
BOOKING INPUTS
========================================================== */

.booking-step input,
.booking-step select,
.booking-step textarea{


width:100%;

padding:14px 15px;

margin:10px 0 15px;

background:var(--white);

color:var(--pak-green);

border:
    1px solid var(--border);

border-radius:9px;

font-size:15px;

transition:.2s;


}

.booking-step input::placeholder{


color:#649064;


}

.booking-step input:focus,
.booking-step select:focus,
.booking-step textarea:focus{


outline:none;

border-color:var(--pak-green);

box-shadow:
    0 0 0 4px
    rgba(0,102,0,.10);


}

/* ==========================================================
BOOKING BUTTON
========================================================== */

.booking-step button{


width:100%;

margin-top:15px;

padding:14px 20px;

border:none;

border-radius:9px;

background:var(--pak-green);

color:var(--white);

font-size:15px;

font-weight:700;

transition:.25s;


}

.booking-step button:hover{


background:var(--pak-green-dark);

transform:translateY(-1px);

box-shadow:
    0 5px 15px
    rgba(0,102,0,.20);


}

.booking-step button:active{


transform:translateY(0);


}

/* ==========================================================
AVAILABLE SLOTS
========================================================== */

#slots{


margin-top:20px;

padding:15px;

background:var(--pak-green-soft);

border:
    1px solid var(--border);

border-radius:12px;

display:flex;

flex-wrap:wrap;

gap:10px;


}

.slot{


display:inline-flex;

align-items:center;

justify-content:center;

min-width:100px;

padding:11px 16px;

margin:0;

background:var(--white);

border:
    2px solid var(--pak-green);

color:var(--pak-green);

border-radius:8px;

cursor:pointer;

font-weight:600;

transition:.2s;


}

.slot:hover{


background:var(--pak-green);

color:var(--white);


}

.slot.selected{


background:var(--pak-green);

border-color:var(--pak-green);

color:var(--white);

box-shadow:
    0 4px 12px
    rgba(0,102,0,.20);


}

/* ==========================================================
CUSTOMER DASHBOARD
========================================================== */

.dashboard-container{


width:100%;

max-width:1250px;

margin:0 auto;

padding:35px 25px 60px;


}

/* ==========================================================
DASHBOARD WELCOME
========================================================== */

.dashboard-welcome{


display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:30px;

margin-bottom:20px;

background:
    linear-gradient(
        135deg,
        var(--pak-green),
        var(--pak-green-dark)
    );

border-radius:16px;

color:var(--white);

box-shadow:var(--shadow-large);


}

.welcome-label{


display:inline-block;

color:var(--white);

font-size:12px;

font-weight:700;

letter-spacing:1.5px;

margin-bottom:8px;

opacity:.85;


}

.dashboard-welcome h2{


color:var(--white);

font-size:30px;

line-height:1.2;

margin-bottom:8px;


}

.dashboard-welcome p{


color:var(--white);

opacity:.9;


}

.reference-display{


min-width:230px;

padding:18px 22px;

border-radius:12px;

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

border:
    1px solid
    rgba(255,255,255,.30);


}

.reference-display span{


display:block;

color:var(--white);

font-size:12px;

opacity:.8;

margin-bottom:5px;


}

.reference-display strong{


color:var(--white);

font-size:19px;

letter-spacing:1px;


}

/* ==========================================================
DASHBOARD STATUS
========================================================== */

.dashboard-status{


display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

background:var(--white);

border:
    1px solid var(--border);

border-radius:14px;

padding:20px 25px;

margin-bottom:20px;

box-shadow:var(--shadow);


}

.status-information span,
.appointment-date-summary span{


display:block;

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.8px;

color:var(--pak-green);

margin-bottom:6px;


}

.appointment-date-summary{


text-align:right;


}

.appointment-date-summary strong{


display:block;

color:var(--pak-green-dark);

font-size:20px;


}

.appointment-date-summary small{


color:var(--pak-green);

font-size:14px;


}

/* ==========================================================
STATUS BADGES
========================================================== */

.status-badge{


display:inline-block;

padding:8px 20px;

border-radius:30px;

font-size:14px;

font-weight:700;

border:2px solid
    var(--pak-green);

background:var(--pak-green);

color:var(--white);


}

.status-pending{


background:#fff8dc;

color:var(--warning);

border-color:#e4c65a;


}

.status-confirmed{


background:var(--pak-green);

color:var(--white);

border-color:var(--pak-green);


}

.status-checked-in{


background:#e6f5e6;

color:var(--pak-green-dark);

border-color:#9ccc9c;


}

.status-completed{


background:#e8f5e8;

color:var(--pak-green-dark);

border-color:#9ccc9c;


}

.status-cancelled{


background:#fff0ef;

color:var(--danger);

border-color:#e4aaa5;


}

.status-no-show{


background:#f1f6f1;

color:var(--pak-green-dark);

border-color:#bfd5bf;


}

/* ==========================================================
COUNTDOWN
========================================================== */

.countdown-card{


display:flex;

align-items:center;

justify-content:center;

gap:20px;

text-align:center;

background:
    linear-gradient(
        135deg,
        var(--pak-green-deep),
        var(--pak-green)
    );

color:var(--white);

padding:25px;

border-radius:14px;

margin-bottom:25px;

box-shadow:var(--shadow);


}

.countdown-icon{


width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:50%;

font-size:25px;


}

.countdown-card h2{


color:var(--white);

font-size:20px;

margin-bottom:5px;


}

.countdown-card p{


color:var(--white);

opacity:.95;


}

.countdown-card strong{


color:var(--white);

font-size:22px;


}

/* ==========================================================
INFORMATION GRID
========================================================== */

.info-grid{


display:grid;

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

gap:20px;

margin-bottom:25px;


}

.info-card{


background:var(--white);

border:
    1px solid var(--border);

border-radius:14px;

padding:25px;

box-shadow:var(--shadow);


}

.card-heading{


display:flex;

align-items:center;

gap:12px;

margin-bottom:20px;


}

.card-icon{


width:40px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

background:var(--pak-green-light);

border-radius:10px;

font-size:19px;


}

.info-card h2{


color:var(--pak-green-dark);

font-size:20px;


}

.info-card table{


width:100%;

border-collapse:collapse;


}

.info-card td{


padding:12px 0;

border-bottom:
    1px solid #e5efe5;

vertical-align:top;


}

.info-card tr:last-child td{


border-bottom:none;


}

.info-card td:first-child{


width:150px;

font-weight:700;

color:var(--pak-green);


}

.info-card td:last-child{


color:var(--pak-green-dark);

font-weight:500;

word-break:break-word;


}

/* ==========================================================
GENERAL SECTION
========================================================== */

.section{


background:var(--white);

margin-bottom:25px;

padding:28px;

border:
    1px solid var(--border);

border-radius:14px;

box-shadow:var(--shadow);


}

.section-heading{


display:flex;

align-items:center;

gap:14px;

margin-bottom:22px;


}

.section-heading > span{


width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

background:var(--pak-green-light);

border-radius:10px;

font-size:20px;


}

.section-heading h2{


color:var(--pak-green-dark);

font-size:21px;


}

.section-heading p{


color:var(--pak-green);

font-size:13px;

margin-top:2px;


}

/* ==========================================================
OFFICE SECTION
========================================================== */

.office-details{


display:grid;

grid-template-columns:
    1.5fr 1fr auto;

gap:25px;

align-items:center;


}

.office-details strong{


display:block;

color:var(--pak-green);

font-size:13px;

text-transform:uppercase;

letter-spacing:.7px;

margin-bottom:6px;


}

.office-details p{


color:var(--pak-green-dark);


}

.location-button{


display:inline-block;

padding:11px 18px;

background:var(--pak-green);

color:var(--white);

text-decoration:none;

border-radius:8px;

font-weight:600;

transition:.2s;


}

.location-button:hover{


background:var(--pak-green-dark);


}

/* ==========================================================
QUICK ACTIONS
========================================================== */

.action-grid{


display:grid;

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

gap:14px;


}

.action-btn{


min-height:90px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:8px;

background:var(--pak-green);

color:var(--white);

text-align:center;

text-decoration:none;

padding:15px;

border-radius:10px;

font-weight:700;

border:1px solid
    var(--pak-green);

transition:.25s;


}

.action-btn span{


font-size:23px;


}

.action-btn:hover{


background:var(--pak-green-dark);

transform:translateY(-2px);

box-shadow:
    0 7px 15px
    rgba(0,102,0,.18);


}

/* ==========================================================
REQUEST SECTION
========================================================== */

.request-actions{


display:grid;

grid-template-columns:1fr 1fr;

gap:15px;


}

.request-btn{


display:block;

padding:14px;

text-align:center;

text-decoration:none;

background:var(--pak-green);

color:var(--white);

border-radius:9px;

font-weight:700;

transition:.2s;


}

.request-btn:hover{


background:var(--pak-green-dark);


}

.danger-btn{


background:#fff0ef;

color:var(--danger);

border:
    1px solid #e4aaa5;


}

.danger-btn:hover{


background:#fce0de;

color:var(--danger);


}

/* ==========================================================
TIMELINE
========================================================== */

.timeline{


list-style:none;

padding:0;

margin:0;


}

.timeline li{


position:relative;

display:flex;

gap:15px;

padding:0 0 25px;


}

.timeline li:last-child{


padding-bottom:0;


}

.timeline li:not(:last-child)::after{


content:"";

position:absolute;

left:17px;

top:37px;

bottom:0;

width:2px;

background:#d6e7d6;


}

.timeline-marker{


width:36px;

height:36px;

border-radius:50%;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

background:var(--pak-green);

color:var(--white);

font-weight:bold;

z-index:2;


}

.timeline-content{


padding-top:2px;


}

.timeline-content strong{


color:var(--pak-green-dark);

font-size:15px;


}

.timeline-content p{


color:var(--pak-green);

font-size:14px;

margin-top:3px;


}

.timeline-date{


display:block;

margin-top:6px;

color:#558055;

font-size:12px;


}

.timeline .pending .timeline-marker{


background:#d9e7d9;

color:var(--pak-green);


}

/* ==========================================================
INSTRUCTIONS
========================================================== */

.instructions-grid{


display:grid;

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

gap:15px;


}

.instruction-item{


display:flex;

align-items:flex-start;

gap:14px;

padding:18px;

background:var(--pak-green-soft);

border:
    1px solid var(--border);

border-radius:10px;


}

.instruction-item > span{


width:32px;

height:32px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--pak-green);

color:var(--white);

font-size:12px;

font-weight:700;


}

.instruction-item p{


color:var(--pak-green-dark);

font-size:14px;


}

/* ==========================================================
SECURITY NOTE
========================================================== */

.security-note{


display:flex;

align-items:flex-start;

gap:15px;

margin-top:5px;

padding:20px;

background:var(--pak-green-light);

border:
    1px solid var(--border);

border-left:
    5px solid var(--pak-green);

border-radius:10px;


}

.security-icon{


font-size:25px;


}

.security-note h3{


color:var(--pak-green-dark);

margin-bottom:3px;


}

.security-note p{


color:var(--pak-green);

font-size:14px;


}

/* ==========================================================
CUSTOMER FOOTER
========================================================== */

.customer-footer{


background:
    linear-gradient(
        135deg,
        var(--pak-green-deep),
        var(--pak-green)
    );

color:var(--white);

text-align:center;

padding:25px 20px;

margin-top:20px;


}

.customer-footer p{


color:var(--white);

font-weight:700;

margin-bottom:4px;


}

.customer-footer span{


color:var(--white);

opacity:.8;

font-size:13px;


}

/* ==========================================================
ERROR / MESSAGE BOXES
========================================================== */

.error-message{


padding:15px;

background:#fff0ef;

color:var(--danger);

border:
    1px solid #e4aaa5;

border-radius:8px;

margin-bottom:15px;


}

.success-message{


padding:15px;

background:var(--pak-green-light);

color:var(--pak-green-dark);

border:
    1px solid #b7d8b7;

border-radius:8px;

margin-bottom:15px;


}

.warning-message{


padding:15px;

background:#fff8dc;

color:var(--warning);

border:
    1px solid #e4c65a;

border-radius:8px;

margin-bottom:15px;


}

/* ==========================================================
FORM LABELS
========================================================== */

.booking-step label{


display:block;

color:var(--pak-green-dark);

font-weight:700;

font-size:14px;

margin-top:12px;


}

/* ==========================================================
DATE INPUT
========================================================== */

input[type="date"]{


color:var(--pak-green-dark);


}

input[type="date"]::-webkit-calendar-picker-indicator{


cursor:pointer;

opacity:.7;


}

/* ==========================================================
RESPONSIVE - 1100PX
========================================================== */

@media(max-width:1100px){


.action-grid{

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

}


.office-details{

    grid-template-columns:
        1fr 1fr;

}


.office-details > div:last-child{

    grid-column:1 / -1;

}


}

/* ==========================================================
RESPONSIVE - 900PX
========================================================== */

@media(max-width:900px){


.dashboard-welcome{

    flex-direction:column;

    align-items:flex-start;

}


.reference-display{

    width:100%;

}


.dashboard-status{

    flex-direction:column;

    align-items:flex-start;

}


.appointment-date-summary{

    text-align:left;

}


.info-grid{

    grid-template-columns:1fr;

}


.action-grid{

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

}


}

/* ==========================================================
RESPONSIVE - 700PX
========================================================== */

@media(max-width:700px){


.header-inner{

    padding:14px 18px;

}


.government-brand h1{

    font-size:17px;

}


.portal-label{

    display:none;

}


.dashboard-container{

    padding:25px 15px 45px;

}


.dashboard-welcome{

    padding:23px;

}


.dashboard-welcome h2{

    font-size:25px;

}


.section{

    padding:21px;

}


.office-details{

    grid-template-columns:1fr;

    gap:18px;

}


.office-details > div:last-child{

    grid-column:auto;

}


.instructions-grid{

    grid-template-columns:1fr;

}


.request-actions{

    grid-template-columns:1fr;

}


}

/* ==========================================================
RESPONSIVE - 600PX
========================================================== */

@media(max-width:600px){


.booking-box{

    margin:25px auto;

    padding:25px 20px;

    border-radius:14px;

}


.progress{

    margin-bottom:30px;

}


.step{

    width:38px;

    height:38px;

    font-size:14px;

}


.line{

    width:35px;

}


.booking-step h2{

    font-size:22px;

}


#slots{

    padding:12px;

}


.slot{

    flex:1 1 calc(50% - 10px);

    min-width:0;

}


.action-grid{

    grid-template-columns:1fr;

}


.countdown-card{

    flex-direction:column;

    padding:22px 15px;

}


.info-card{

    padding:20px;

}


.info-card td{

    display:block;

    width:100% !important;

    border:none;

    padding:5px 0;

}


.info-card tr{

    display:block;

    padding:8px 0;

    border-bottom:
        1px solid #e5efe5;

}


.info-card tr:last-child{

    border-bottom:none;

}


.info-card td:first-child{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.5px;

}


.info-card td:last-child{

    font-size:14px;

}


.security-note{

    padding:17px;

}


}

/* ==========================================================
RESPONSIVE - 420PX
========================================================== */

@media(max-width:420px){


.government-brand{

    gap:10px;

}


.pakistan-emblem{

    width:48px;

    height:48px;

}


.pakistan-emblem img{

    width:40px;

    height:40px;

}


.government-brand h1{

    font-size:15px;

}


.government-brand p{

    font-size:12px;

}


.dashboard-welcome h2{

    font-size:22px;

}


.reference-display strong{

    font-size:16px;

}


.slot{

    flex:1 1 100%;

}


.section-heading h2{

    font-size:18px;

}


}

css
/* ==========================================================
   CUSTOMER PORTAL LOGIN
   Pakistan Green & White Government Theme
========================================================== */

.portal-page{

    min-height:100vh;

    background:#f3f8f5;

    color:#006633;

}


/* ==========================================================
   GOVERNMENT HEADER
========================================================== */

.gov-header{

    background:#ffffff;

    border-bottom:4px solid #006633;

}


.gov-header-inner{

    max-width:1400px;

    margin:0 auto;

    min-height:88px;

    padding:12px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.gov-brand{

    display:flex;

    align-items:center;

    gap:16px;

}


.gov-logo{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.gov-logo img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}


.gov-title{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.gov-title strong{

    font-size:20px;

    color:#006633;

}


.gov-title span{

    font-size:14px;

    color:#008844;

}


.gov-links{

    display:flex;

    align-items:center;

    gap:25px;

}


.gov-links a{

    color:#006633;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}


.gov-links a:hover{

    color:#008844;

}



/* ==========================================================
   NAVIGATION
========================================================== */

.portal-nav{

    background:#006633;

    color:#ffffff;

}


.portal-nav-inner{

    max-width:1400px;

    margin:0 auto;

    min-height:52px;

    padding:0 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.portal-nav-brand{

    font-size:17px;

    font-weight:700;

}


.portal-nav-links{

    display:flex;

    align-items:center;

    height:52px;

}


.portal-nav-links a{

    height:52px;

    display:flex;

    align-items:center;

    padding:0 20px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    border-bottom:3px solid transparent;

    transition:.2s;

}


.portal-nav-links a:hover{

    background:#008844;

}


.portal-nav-links a.active{

    background:#008844;

    border-bottom-color:#ffffff;

}



/* ==========================================================
   MAIN AREA
========================================================== */

.portal-main{

    max-width:1200px;

    margin:0 auto;

    padding:55px 25px 70px;

}


.portal-login-wrapper{

    display:grid;

    grid-template-columns:
        minmax(450px,650px)
        minmax(280px,380px);

    gap:35px;

    align-items:start;

    justify-content:center;

}



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

.portal-login-card{

    background:#ffffff;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #dceee4;

    box-shadow:
        0 12px 35px rgba(0,102,51,.10);

}


.portal-login-header{

    background:#006633;

    color:#ffffff;

    text-align:center;

    padding:35px 25px;

}


.portal-lock{

    width:55px;

    height:55px;

    margin:0 auto 15px;

    border-radius:50%;

    background:#ffffff;

    color:#006633;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}


.portal-login-header h1{

    margin:0 0 7px;

    font-size:27px;

    color:#ffffff;

}


.portal-login-header p{

    margin:0;

    color:#ffffff;

    opacity:.95;

}


.portal-login-body{

    padding:35px;

}



/* ==========================================================
   MESSAGES
========================================================== */

.portal-message{

    padding:14px 16px;

    border-radius:8px;

    margin-bottom:22px;

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:14px;

    font-weight:600;

}


.portal-message.success{

    background:#e7f7ee;

    border:1px solid #a8dfc0;

    color:#006633;

}


.portal-message.error{

    background:#fff4f4;

    border:1px solid #e7b6b6;

    color:#b02a37;

}



/* ==========================================================
   DESCRIPTION
========================================================== */

.portal-description{

    margin-bottom:25px;

    color:#008844;

    line-height:1.7;

}



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

.portal-login-form label{

    display:block;

    margin-bottom:8px;

    font-weight:700;

    color:#006633;

}


.tracking-input{

    position:relative;

    display:flex;

    align-items:center;

}


.tracking-icon{

    position:absolute;

    left:15px;

    font-size:18px;

    font-weight:bold;

    color:#008844;

}


.tracking-input input{

    width:100%;

    height:52px;

    padding:0 15px 0 43px;

    border:1px solid #b9d9c8;

    border-radius:8px;

    outline:none;

    color:#006633;

    background:#ffffff;

    font-size:15px;

    transition:.2s;

}


.tracking-input input::placeholder{

    color:#63a184;

}


.tracking-input input:focus{

    border-color:#006633;

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

}


.portal-submit{

    width:100%;

    min-height:52px;

    margin-top:18px;

    border:none;

    border-radius:8px;

    background:#006633;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}


.portal-submit:hover{

    background:#008844;

    transform:translateY(-1px);

}



/* ==========================================================
   HELP
========================================================== */

.portal-help{

    margin-top:28px;

    padding-top:22px;

    border-top:1px solid #dceee4;

}


.portal-help h3{

    margin-bottom:6px;

    color:#006633;

    font-size:16px;

}


.portal-help p{

    margin:0;

    color:#008844;

    font-size:14px;

    line-height:1.6;

}



/* ==========================================================
   SECURITY
========================================================== */

.portal-security{

    margin-top:22px;

    padding:17px;

    border-radius:9px;

    background:#eef8f2;

    border-left:4px solid #006633;

    display:flex;

    gap:13px;

    align-items:flex-start;

}


.security-icon{

    font-size:20px;

}


.portal-security strong{

    display:block;

    margin-bottom:4px;

    color:#006633;

}


.portal-security p{

    margin:0;

    font-size:13px;

    line-height:1.5;

    color:#008844;

}



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

.portal-info-card{

    background:#ffffff;

    border-radius:14px;

    padding:30px;

    border:1px solid #dceee4;

    box-shadow:
        0 12px 35px rgba(0,102,51,.08);

}


.portal-info-card h2{

    margin:0 0 25px;

    color:#006633;

    font-size:22px;

    padding-bottom:15px;

    border-bottom:2px solid #e4f2e9;

}


.portal-info-item{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}


.portal-info-item:last-child{

    margin-bottom:0;

}


.info-number{

    flex-shrink:0;

    width:36px;

    height:36px;

    border-radius:50%;

    background:#006633;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}


.portal-info-item strong{

    display:block;

    margin-bottom:4px;

    color:#006633;

}


.portal-info-item p{

    margin:0;

    color:#008844;

    font-size:13px;

    line-height:1.5;

}



/* ==========================================================
   FOOTER
========================================================== */

.gov-footer{

    background:#006633;

    color:#ffffff;

    margin-top:20px;

}


.gov-footer-inner{

    max-width:1400px;

    margin:0 auto;

    padding:40px 30px;

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:50px;

}


.footer-column{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.footer-column h3{

    margin:0 0 10px;

    color:#ffffff;

    font-size:17px;

}


.footer-column p{

    margin:0;

    color:#ffffff;

    opacity:.9;

    font-size:14px;

}


.footer-column a{

    color:#ffffff;

    text-decoration:none;

    opacity:.9;

    font-size:14px;

    transition:.2s;

}


.footer-column a:hover{

    opacity:1;

    text-decoration:underline;

}


.footer-bottom{

    border-top:1px solid rgba(255,255,255,.2);

    text-align:center;

    padding:18px 20px;

}


.footer-bottom p{

    margin:0;

    color:#ffffff;

    font-size:13px;

    opacity:.9;

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    .portal-login-wrapper{

        grid-template-columns:1fr;

    }

    .portal-info-card{

        max-width:none;

    }

}


@media(max-width:700px){

    .gov-header-inner{

        padding:12px 18px;

    }

    .gov-links{

        display:none;

    }

    .gov-title strong{

        font-size:16px;

    }

    .gov-title span{

        font-size:12px;

    }

    .portal-nav-inner{

        padding:0 15px;

    }

    .portal-nav-brand{

        display:none;

    }

    .portal-nav-links{

        width:100%;

        justify-content:center;

    }

    .portal-nav-links a{

        padding:0 12px;

        font-size:13px;

    }

    .portal-main{

        padding:30px 15px 50px;

    }

    .portal-login-body{

        padding:25px 20px;

    }

    .portal-login-header{

        padding:28px 20px;

    }

    .portal-login-header h1{

        font-size:23px;

    }

    .gov-footer-inner{

        grid-template-columns:1fr;

        gap:30px;

        padding:35px 20px;

    }

}


@media(max-width:450px){

    .gov-logo{

        width:48px;

        height:48px;

    }

    .gov-title strong{

        font-size:14px;

    }

    .gov-title span{

        font-size:11px;

    }

    .portal-login-body{

        padding:20px 16px;

    }

    .portal-info-card{

        padding:22px 18px;

    }

}


css
/* ==========================================================
   RESCHEDULE APPOINTMENT
========================================================== */

.reschedule-wrapper{

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap:30px;

    align-items:start;

}


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

.reschedule-card{

    background:#ffffff;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #dceee4;

    box-shadow:
        0 12px 35px rgba(0,102,51,.10);

}


.reschedule-header{

    background:#006633;

    color:#ffffff;

    text-align:center;

    padding:35px 25px;

}


.reschedule-icon{

    width:58px;

    height:58px;

    margin:0 auto 15px;

    border-radius:50%;

    background:#ffffff;

    color:#006633;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}


.reschedule-header h1{

    margin:0 0 8px;

    color:#ffffff;

    font-size:27px;

}


.reschedule-header p{

    margin:0;

    color:#ffffff;

    opacity:.92;

    font-size:14px;

}


.reschedule-body{

    padding:35px;

}


/* ==========================================================
   REFERENCE BOX
========================================================== */

.reference-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:17px 20px;

    margin-bottom:25px;

    background:#eef8f2;

    border:1px solid #cfe6d8;

    border-left:4px solid #006633;

    border-radius:9px;

}


.reference-box span{

    color:#006633;

    font-size:13px;

    font-weight:700;

}


.reference-box strong{

    color:#006633;

    font-size:17px;

    letter-spacing:1px;

}


/* ==========================================================
   CURRENT APPOINTMENT
========================================================== */

.current-appointment{

    margin-bottom:30px;

    padding:22px;

    background:#f7fbf8;

    border:1px solid #dceee4;

    border-radius:10px;

}


.current-heading{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}


.current-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#006633;

    color:#ffffff;

    border-radius:9px;

    font-size:18px;

}


.current-heading h2{

    margin:0;

    color:#006633;

    font-size:18px;

}


.current-heading p{

    margin:2px 0 0;

    color:#008844;

    font-size:12px;

}


.current-details{

    display:grid;

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

    gap:15px;

}


.current-details > div{

    padding:14px;

    background:#ffffff;

    border:1px solid #e0eee5;

    border-radius:8px;

}


.current-details span{

    display:block;

    margin-bottom:5px;

    color:#008844;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

}


.current-details strong{

    color:#006633;

    font-size:14px;

}


/* ==========================================================
   FORM SECTION
========================================================== */

.form-section{

    margin-bottom:25px;

}


.form-section label{

    display:block;

    margin-bottom:5px;

    color:#006633;

    font-size:15px;

    font-weight:700;

}


.field-help{

    margin:0 0 10px;

    color:#008844;

    font-size:13px;

}


.form-section input[type="date"]{

    width:100%;

    height:52px;

    padding:0 15px;

    background:#ffffff;

    color:#006633;

    border:1px solid #b9d9c8;

    border-radius:8px;

    outline:none;

    font-size:15px;

    transition:.2s;

}


.form-section input[type="date"]:focus{

    border-color:#006633;

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

}


/* ==========================================================
   SLOT CONTAINER
========================================================== */

.reschedule-slots{

    min-height:90px;

    padding:15px;

    background:#f7fbf8;

    border:1px solid #dceee4;

    border-radius:10px;

}


/* ==========================================================
   SLOT PLACEHOLDER
========================================================== */

.slot-placeholder{

    min-height:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#008844;

}


.slot-placeholder span{

    font-size:25px;

    margin-bottom:5px;

}


.slot-placeholder p{

    margin:0;

    font-size:13px;

}


/* ==========================================================
   SLOT LOADING
========================================================== */

.slot-loading{

    min-height:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#008844;

}


.slot-loading p{

    margin:8px 0 0;

    font-size:13px;

}


.loading-spinner{

    width:28px;

    height:28px;

    border:3px solid #dceee4;

    border-top-color:#006633;

    border-radius:50%;

    animation:
        rescheduleSpin .7s linear infinite;

}


@keyframes rescheduleSpin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   SLOTS RETURNED BY AJAX
========================================================== */

.reschedule-slots #slots{

    margin:0;

    padding:0;

    background:transparent;

    border:none;

}


/*
   If get-slots.php returns .slot elements directly
*/

.reschedule-slots .slot{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:105px;

    min-height:46px;

    margin:5px;

    padding:10px 15px;

    background:#ffffff;

    color:#006633;

    border:2px solid #006633;

    border-radius:8px;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

    transition:.2s;

}


.reschedule-slots .slot:hover{

    background:#006633;

    color:#ffffff;

    transform:translateY(-1px);

}


.reschedule-slots .slot.selected{

    background:#006633;

    color:#ffffff;

    border-color:#006633;

    box-shadow:
        0 4px 12px rgba(0,102,51,.20);

}


/* ==========================================================
   SLOT ERROR
========================================================== */

.slot-error{

    min-height:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#b02a37;

}


.slot-error span{

    font-size:24px;

    margin-bottom:5px;

}


.slot-error p{

    margin:0;

    font-size:13px;

}


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

.selection-message{

    margin:5px 0 20px;

    padding:13px 15px;

    border-radius:8px;

    background:#f3f8f5;

    border:1px solid #dceee4;

    color:#008844;

    font-size:13px;

    font-weight:600;

}


.selection-message.success{

    background:#e7f7ee;

    border-color:#a8dfc0;

    color:#006633;

}


.selection-message.warning{

    background:#fff8df;

    border-color:#ead58a;

    color:#8a6900;

}


.selection-message.error{

    background:#fff4f4;

    border-color:#e7b6b6;

    color:#b02a37;

}


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

.reschedule-submit{

    width:100%;

    min-height:52px;

    border:none;

    border-radius:8px;

    background:#006633;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}


.reschedule-submit:hover:not(:disabled){

    background:#008844;

    transform:translateY(-1px);

    box-shadow:
        0 5px 15px rgba(0,102,51,.18);

}


.reschedule-submit:disabled{

    background:#b8cfc1;

    color:#ffffff;

    cursor:not-allowed;

}


/* ==========================================================
   CANCEL
========================================================== */

.cancel-reschedule{

    display:block;

    margin-top:14px;

    padding:12px;

    text-align:center;

    color:#006633;

    text-decoration:none;

    border:1px solid #cfe2d6;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

    transition:.2s;

}


.cancel-reschedule:hover{

    background:#eef8f2;

}


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

.reschedule-info-card{

    background:#ffffff;

    border-radius:14px;

    padding:30px;

    border:1px solid #dceee4;

    box-shadow:
        0 12px 35px rgba(0,102,51,.08);

}


.reschedule-info-card h2{

    margin:0 0 25px;

    padding-bottom:15px;

    border-bottom:2px solid #e4f2e9;

    color:#006633;

    font-size:21px;

}


/* ==========================================================
   INFORMATION ITEMS
========================================================== */

.reschedule-info-item{

    display:flex;

    gap:13px;

    margin-bottom:25px;

}


.reschedule-info-item:last-of-type{

    margin-bottom:25px;

}


.reschedule-info-item .info-number{

    flex-shrink:0;

    width:35px;

    height:35px;

    border-radius:50%;

    background:#006633;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}


.reschedule-info-item strong{

    display:block;

    margin-bottom:4px;

    color:#006633;

    font-size:14px;

}


.reschedule-info-item p{

    margin:0;

    color:#008844;

    font-size:13px;

    line-height:1.5;

}


/* ==========================================================
   WARNING
========================================================== */

.reschedule-warning{

    display:flex;

    gap:12px;

    align-items:flex-start;

    padding:16px;

    background:#fff8df;

    border:1px solid #ead58a;

    border-left:4px solid #c49a00;

    border-radius:8px;

}


.reschedule-warning > span{

    font-size:20px;

}


.reschedule-warning strong{

    display:block;

    margin-bottom:4px;

    color:#765900;

    font-size:13px;

}


.reschedule-warning p{

    margin:0;

    color:#806900;

    font-size:12px;

    line-height:1.5;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    .reschedule-wrapper{

        grid-template-columns:1fr;

    }

    .reschedule-info-card{

        max-width:none;

    }

}


@media(max-width:700px){

    .reschedule-wrapper{

        gap:20px;

    }

    .reschedule-body{

        padding:25px 20px;

    }

    .reschedule-header{

        padding:28px 20px;

    }

    .reschedule-header h1{

        font-size:23px;

    }

    .current-details{

        grid-template-columns:1fr;

    }

    .reference-box{

        flex-direction:column;

        align-items:flex-start;

        gap:5px;

    }

}


@media(max-width:450px){

    .reschedule-body{

        padding:20px 16px;

    }

    .reschedule-info-card{

        padding:22px 18px;

    }

    .reschedule-slots .slot{

        width:100%;

        margin:5px 0;

    }

}