/* ==========================================================================
   GURUKUL JYOTISH ANUSANDHAN KENDRA - INDIAN APPOINTMENT MODULE CSS
   Theme: Maroon (#6D1B1B) + White + Dark Grey | Luxury Minimal | No Gold
   ========================================================================== */

/* ---------- ROOT VARIABLES ---------- */
:root {
    --ga-maroon: #6D1B1B;
    --ga-maroon-dark: #4E1212;
    --ga-maroon-light: #8a2a2a;
    --ga-white: #ffffff;
    --ga-grey-dark: #2b2b2b;
    --ga-grey-mid: #6f6f6f;
    --ga-grey-light: #8a8a8a;
    --ga-border: #e2dcdc;
    --ga-bg-soft: #faf5f5;
    --ga-error: #b3261e;
    --ga-success: #1e7d34;
}

/* ---------- RESET ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: var(--ga-grey-dark);
    min-height: 100vh;
}

/* ==========================================================================
   BACKGROUND - Dark blurred overlay with subtle astrology feel
   ========================================================================== */
.ga-background {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, #2a0d0d 0%, #120404 60%, #000000 100%);
    z-index: 0;
}

.ga-background-blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   MODAL OVERLAY - Centers the booking card on screen
   ========================================================================== */
.ga-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ==========================================================================
   BOOKING CARD - Compact, fixed width 550px, auto height, no inner scroll
   ========================================================================== */
.ga-card {
    position: relative;
    width: 550px;
    max-width: 100%;
    height: auto;
    background: var(--ga-white);
    border-radius: 16px;
    padding: 40px 45px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    animation: gaFadeUp 0.35s ease;
}

@keyframes gaFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Close button */
.ga-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ga-border);
    background: var(--ga-white);
    color: var(--ga-grey-dark);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.ga-close-btn:hover {
    background: var(--ga-maroon);
    color: var(--ga-white);
    border-color: var(--ga-maroon);
}

/* ==========================================================================
   HEADER SECTION - Logo, Title, Subtitle
   ========================================================================== */
.ga-header {
    text-align: center;
    margin-bottom: 22px;
}

.ga-logo-circle {
    width: 66px;
    height: 66px;
    background: var(--ga-maroon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.ga-title {
    color: var(--ga-maroon);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ga-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 12px;
    width: 220px;
}
.ga-divider-line {
    flex: 1;
    height: 1px;
    background: var(--ga-maroon);
    opacity: 0.4;
}
.ga-divider-icon {
    color: var(--ga-maroon);
    font-size: 12px;
}

.ga-subtitle {
    color: var(--ga-grey-mid);
    font-size: 14.5px;
    font-family: Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   ALERT BOX - Inline success / error banner inside the card
   ========================================================================== */
.ga-alert {
    font-family: Arial, sans-serif;
    font-size: 13.5px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
}
.ga-alert.ga-alert-success {
    background: #eaf6ec;
    color: var(--ga-success);
    border: 1px solid #bfe3c6;
}
.ga-alert.ga-alert-error {
    background: #fbeceb;
    color: var(--ga-error);
    border: 1px solid #f0c4c1;
}

/* ==========================================================================
   FORM SECTION
   ========================================================================== */
.ga-form {
    font-family: Arial, Helvetica, sans-serif;
}

.ga-form-row {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
}

.ga-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ga-form-group label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ga-grey-dark);
    margin-bottom: 6px;
}

.ga-required {
    color: var(--ga-maroon);
}

/* Input wrapper with icon */
.ga-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--ga-border);
    border-radius: 8px;
    background: var(--ga-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ga-input-wrap:focus-within {
    border-color: var(--ga-maroon);
    box-shadow: 0 0 0 3px rgba(109, 27, 27, 0.12);
}

.ga-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
}

.ga-input-wrap input,
.ga-input-wrap select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 12px;
    font-size: 14px;
    color: var(--ga-grey-dark);
    font-family: Arial, Helvetica, sans-serif;
    appearance: none;
    -webkit-appearance: none;
}

.ga-input-wrap select {
    cursor: pointer;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.ga-input-wrap input::placeholder {
    color: #a8a8a8;
}

/* Field-level state classes toggled by JS */
.ga-input-wrap.ga-input-error {
    border-color: var(--ga-error);
}
.ga-input-wrap.ga-input-valid {
    border-color: #4caf6b;
}

.ga-error-msg {
    display: block;
    min-height: 16px;
    font-size: 12px;
    color: var(--ga-error);
    margin-top: 4px;
}

/* ==========================================================================
   SUBMIT BUTTON
   ========================================================================== */
.ga-submit-btn {
    position: relative;
    width: 100%;
    background: var(--ga-maroon);
    color: var(--ga-white);
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s, transform 0.1s;
}

.ga-submit-btn:hover {
    background: var(--ga-maroon-dark);
}

.ga-submit-btn:active {
    transform: scale(0.99);
}

/* Disabled state - used while request is in-flight to block double click */
.ga-submit-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.ga-btn-icon {
    display: flex;
    align-items: center;
}

/* Loader spinner - hidden by default */
.ga-btn-loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--ga-white);
    border-radius: 50%;
    animation: gaSpin 0.7s linear infinite;
}

/* When button has "loading" class, show spinner and hide text/icon */
.ga-submit-btn.ga-loading .ga-btn-text,
.ga-submit-btn.ga-loading .ga-btn-icon {
    display: none;
}
.ga-submit-btn.ga-loading .ga-btn-loader {
    display: inline-block;
}

@keyframes gaSpin {
    to { transform: rotate(360deg); }
}

/* Secure note under button */
.ga-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ga-grey-mid);
}

/* ==========================================================================
   OR DIVIDER
   ========================================================================== */
.ga-or-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
}
.ga-or-line {
    flex: 1;
    height: 1px;
    background: var(--ga-border);
}
.ga-or-text {
    font-family: Arial, sans-serif;
    font-size: 12.5px;
    color: var(--ga-grey-light);
    letter-spacing: 1px;
}

/* ==========================================================================
   INTERNATIONAL CLIENT BOX
   ========================================================================== */
.ga-intl-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ga-bg-soft);
    border: 1px solid #f1e3e3;
    border-radius: 10px;
    padding: 16px 18px;
    font-family: Arial, Helvetica, sans-serif;
    flex-wrap: wrap;
}

.ga-intl-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--ga-maroon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ga-intl-text {
    flex: 1;
    min-width: 180px;
}

.ga-intl-text strong {
    display: block;
    font-size: 14.5px;
    color: var(--ga-grey-dark);
    margin-bottom: 2px;
    font-family: Georgia, serif;
}

.ga-intl-text p {
    font-size: 12.5px;
    color: var(--ga-grey-mid);
}

.ga-intl-btn {
    white-space: nowrap;
    border: 1.5px solid var(--ga-maroon);
    color: var(--ga-maroon);
    background: transparent;
    padding: 9px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.ga-intl-btn:hover {
    background: var(--ga-maroon);
    color: var(--ga-white);
}

/* ==========================================================================
   RESPONSIVE - TABLET
========================================================================== */

@media screen and (max-width:992px){

.ga-modal-overlay{

padding:20px;

}

.ga-card{

width:100%;
max-width:680px;
padding:30px;

}

.ga-title{

font-size:34px;

}

.ga-form-row{

gap:15px;

}

.ga-intl-box{

flex-direction:column;
align-items:flex-start;

}

.ga-intl-btn{

width:100%;
text-align:center;
margin-top:15px;

}

/* Success Popup */

.ga-success-card{

width:90%;
max-width:400px;

}

}



/* ==========================================================================
   RESPONSIVE - MOBILE
========================================================================== */

@media screen and (max-width:768px){

.ga-modal-overlay{

padding:15px;

align-items:flex-start;

overflow-y:auto;

}

.ga-card{

width:100%;
padding:25px 18px;
border-radius:16px;
margin-top:20px;
margin-bottom:20px;

}

.ga-logo-circle{

width:60px;
height:60px;

}

.ga-title{

font-size:28px;

line-height:38px;

}

.ga-subtitle{

font-size:15px;

margin-top:10px;

}

.ga-form-row{

flex-direction:column;

gap:12px;

margin-bottom:12px;

}

.ga-form-group{

width:100%;

}

.ga-input-wrap{

height:52px;

}

.ga-input-wrap input,
.ga-input-wrap select{

font-size:15px;

}

.ga-submit-btn{

height:52px;

font-size:17px;

}

.ga-secure-note{

font-size:13px;
text-align:center;

}

.ga-or-divider{

margin:20px 0;

}

.ga-intl-box{

padding:18px;
flex-direction:column;
align-items:center;
text-align:center;

}

.ga-intl-text{

text-align:center;

}

.ga-intl-btn{

width:100%;

margin-top:15px;

}

.ga-close-btn{

width:40px;
height:40px;

top:15px;

right:15px;

}

/* SUCCESS POPUP */

.ga-success-card{

width:92%;

padding:30px 20px;

}

.ga-success-icon{

width:70px;

height:70px;

font-size:34px;

}

.ga-success-card h2{

font-size:22px;

}

.ga-success-card p{

font-size:14px;

line-height:24px;

}

.ga-success-btn{

width:100%;

}

}



/* ==========================================================================
   RESPONSIVE - SMALL PHONES
========================================================================== */

@media screen and (max-width:480px){

.ga-card{

padding:20px 15px;

}

.ga-title{

font-size:24px;

line-height:34px;

}

.ga-logo-circle{

width:55px;

height:55px;

}

.ga-subtitle{

font-size:14px;

}

.ga-input-wrap{

height:48px;

}

.ga-input-wrap input,
.ga-input-wrap select{

font-size:14px;

padding:10px;

}

.ga-submit-btn{

height:48px;

font-size:16px;

}

.ga-secure-note{

font-size:12px;

}

.ga-intl-box{

padding:15px;

}

.ga-intl-text strong{

font-size:20px;

}

.ga-intl-text p{

font-size:13px;

}

.ga-intl-btn{

font-size:14px;

padding:12px;

}

/* Success */

.ga-success-card{

padding:25px 18px;

}

.ga-success-icon{

width:65px;

height:65px;

font-size:32px;

}

.ga-success-card h2{

font-size:20px;

}

.ga-success-card p{

font-size:13px;

}

}



/* ==========================================================================
   EXTRA SMALL DEVICES
========================================================================== */

@media screen and (max-width:360px){

.ga-title{

font-size:21px;

line-height:30px;

}

.ga-card{

padding:18px 12px;

}

.ga-submit-btn{

font-size:15px;

}

.ga-success-card{

width:95%;

padding:20px 15px;

}

.ga-success-card h2{

font-size:18px;

}

.ga-success-card p{

font-size:12px;

line-height:20px;

}

}

/*=========================================
SUCCESS POPUP
=========================================*/

.ga-success-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

animation:fadeIn .3s ease;

}

.ga-success-card{

width:360px;

background:#fff;

border-radius:18px;

padding:35px 30px;

text-align:center;

box-shadow:0 20px 50px rgba(0,0,0,.25);

animation:popup .35s ease;

}

.ga-success-icon{

width:75px;

height:75px;

margin:auto;

border-radius:50%;

background:#6D1B1B;

color:#fff;

font-size:42px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:18px;

}

.ga-success-card h2{

font-size:24px;

margin-bottom:12px;

color:#6D1B1B;

}

.ga-success-card p{

font-size:15px;

line-height:25px;

color:#555;

margin-bottom:25px;

}

.ga-success-btn{

background:#6D1B1B;

color:#fff;

border:none;

padding:12px 35px;

border-radius:8px;

font-size:15px;

cursor:pointer;

transition:.3s;

}

.ga-success-btn:hover{

background:#531111;

transform:translateY(-2px);

}

@keyframes popup{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}