:root{
         --blue:#04133c;
         --gold:#c8a24a;
         --bg:#f4f6f9;
         }
         body{
         background:var(--bg);
         font-family:Segoe UI, sans-serif;
         }
         .navbar{
         background:var(--blue);
         border-bottom:3px solid var(--gold);
         }
         .section-title{
         color:var(--blue);
         font-weight:700;
         border-left:5px solid var(--gold);
         padding-left:10px;
         margin:25px 0 15px;
         }
         .card-form{
         background:#fff;
         border-radius:12px;
         border:1px solid #e3e6ee;
         box-shadow:0 6px 18px rgba(0,0,0,0.05);
         padding:20px;
         }
         .horse-block{
         background:#fafbff;
         border:1px solid #e3e6ee;
         border-left:4px solid var(--gold);
         border-radius:10px;
         padding:15px;
         margin-bottom:12px;
         }
         label{
         color:var(--blue);
         font-weight:600;
         }
         .form-control,.form-select{
         border-radius:8px;
         }
         /* AUTOCOMPLETE UI */
         .ui-autocomplete{
         background:#fff;
         border-radius:12px;
         box-shadow:0 12px 30px rgba(0,0,0,0.12);
         max-height:260px;
         overflow-y:auto;
         z-index:9999;
         padding:6px;
         }
         .ui-state-active{
         background:var(--blue)!important;
         color:#fff!important;
         }
         /* avatar initials */
         .avatar{
         width:36px;
         height:36px;
         border-radius:50%;
         background:var(--blue);
         color:#fff;
         display:flex;
         align-items:center;
         justify-content:center;
         font-weight:700;
         }
         /* validation */
         .error-field{
         border:2px solid #dc3545 !important;
         }
         .error-msg{
         font-size:12px;
         color:#dc3545;
         display:none;
         margin-top:4px;
         }
         .application{
         display:none;
         }
         /* ================= PREMIUM PAGE LOADER ================= */

/* ================= PREMIUM PAGE LOADER ================= */

#pageLoader{
    position:fixed;
    inset:0;

    background:rgba(4,19,60,0.65);

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

    z-index:99999;
    backdrop-filter: blur(4px);

    /* Hide properly */
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease;
}

/* When active */
#pageLoader.active{
    opacity:1;
    visibility:visible;
}

/* subtle animated glow */
#pageLoader::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(200,162,74,0.15), transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
    border-radius:50%;
}

@keyframes pulseGlow{
    0%,100%{ transform:scale(1); opacity:0.5; }
    50%{ transform:scale(1.2); opacity:0.8; }
}

.loader-box{
    position:relative;
    text-align:center;
    z-index:2;
}
@keyframes rotateGlow{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.loader-box{
    position:relative;
    text-align:center;
    z-index:2;
}

/* animated bouncing bars (like galloping rhythm) */
.horse-loader{
    display:flex;
    gap:10px;
    justify-content:center;
}

.horse-loader div{
    width:12px;
    height:50px;
    background:linear-gradient(180deg,#c8a24a,#e5c77a);
    border-radius:6px;
    animation: bounce 1s infinite ease-in-out;
}

.horse-loader div:nth-child(2){
    animation-delay:0.15s;
}

.horse-loader div:nth-child(3){
    animation-delay:0.3s;
}

@keyframes bounce{
    0%,100%{
        transform:scaleY(0.4);
        opacity:0.5;
    }
    50%{
        transform:scaleY(1.2);
        opacity:1;
    }
}

.loading-text{
    letter-spacing:1px;
    animation: fadePulse 2s ease-in-out infinite;
}

@keyframes fadePulse{
    0%,100%{opacity:0.6;}
    50%{opacity:1;}
}
         /* new */
   .btn-outline-custom {
  color: #04123C;
  border: 1px solid #04123C;
  background-color: transparent;
}

.btn-outline-custom:hover {
  background-color: #04123C;
  color: #fff;
  border-color: #04123C;
}

.btn-outline-custom:focus,
.btn-outline-custom:active {
  background-color: #04123C;
  color: #fff;
  border-color: #04123C;
  box-shadow: 0 0 0 0.2rem rgba(4, 18, 60, 0.25);
}
         /* Fix intl-tel-input layout shift */
         
 .iti {
    width: 100%;
}

.iti__flag-container {
    top: 0 !important;
    bottom: 0 !important;
}

.iti__selected-country {
    display: flex !important;
    align-items: center !important;
    height: auto !important; 
    margin-top: 6px !important;
}
#Trainernumber {
    height: 38px; /* match bootstrap form-control */
}

.action-btn{
    border:none;
    border-radius:12px;
    padding:10px 22px;
    font-weight:600;
    letter-spacing:.3px;
    transition:all .25s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.action-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.add-btn{
    background:#fff;
    color:#04133c;
    border:2px solid #c8a24a;
}

.add-btn:hover{
    background:#c8a24a;
    color:#fff;
}

.submit-btn{
    background:linear-gradient(135deg,#04133c,#0a255f);
    color:#fff;
}

.submit-btn:hover{
    background:linear-gradient(135deg,#0a255f,#04133c);
    color:#fff;
}

.submit-btn:disabled{
    opacity:.75;
    cursor:not-allowed;
    transform:none;
}

.btn-icon{
    font-size:16px;
    line-height:1;
}