@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../../fonts/glyphicons-halflings-regular.eot');
    src: url('../../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../../../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../../../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../../../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')
}


/ /* ===============================
custom css starts here
================================ */
/* ===============================
   THEME VARIABLES
================================ */
:root {
    --login-gradient-btn: linear-gradient(to right, #4b49ac, #26a69a);
}


/* ===============================
   SYSTEM FONT
================================ */

body#page-top,
body#page-top input,
body#page-top select,
body#page-top button,
body#page-top label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

    /* ===============================
   REGISTER PAGE BACKGROUND
================================ */

    body#page-top [role="main-wrapper"] {
        background: linear-gradient(135deg,#0a1f30,#006064,#0a1f30);
        min-height: 100vh;
    }


/* ===============================
   REGISTER CARD
================================ */
.register-card {
    width: 70%;
    border-radius: 7px;
}

@media (max-width:768px) {
    .register-card {
        width: 92%;
        margin: 20px auto;
    }
}

body#page-top .bg-white {
    width: 100% !important;
    max-width: 850px;
    margin: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    padding: 16px !important;
    position: relative;
}
/* HEADER ROW */

body#page-top .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body#page-top .to--decHolder h5 {
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: #1d1d1f;
    margin-bottom: 20px;
}

body#page-top .header-row img {
    height: 40px;
}

body#page-top .to--decHolder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}
/* ===============================
   INPUTS
================================ */

body#page-top .form-control {
    height: 38px;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
}

    body#page-top .form-control:focus {
        border-color: #4b49ac;
        box-shadow: 0 0 0 3px rgba(75,73,172,0.1);
        background: #fff;
    }

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

body#page-top label {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
}
/* ===============================
   BUTTONS
================================ */

body#page-top .btn-info,
body#page-top .btn-primary {
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right, #4b49ac, #26a69a);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    transition: opacity 0.2s;
}

    body#page-top .btn-info:hover,
    body#page-top .btn-primary:hover {
        opacity: 0.9;
    }
/* ===============================
   BACK BUTTON (SUBTLE STYLE)
================================ */

.btn-gradient-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(75,73,172,0.08);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #4b49ac;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    /* hover effect */

    .btn-gradient-outline:hover {
        background: rgba(75,73,172,0.08);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        color: #4b49ac;
    }


/* Submit button */

#profilesubmit {
    padding: 8px 22px;
}
/* ===============================
   PHONE INPUT FIX
================================ */

body#page-top .iti {
    width: 100%;
}

/* ===============================
   RESPONSIVE FIXES
================================ */
/* --- Surgical Mobile Overrides (Desktop remains untouched) --- */
@media (max-width: 768px) {
    /* 1. Background Visibility: Frame the card with the gradient */
    body#page-top .bg-white {
        width: 88% !important;
        margin: 20px auto;
        padding: 15px !important;
        border-radius: 15px;
    }

    /* 2. Header Re-arrangement using 'Order' */
    body#page-top .to--decHolder {
        flex-wrap: wrap !important; /* Allow items to drop to new rows */
        display: flex !important;
    }

    /* Pin Back button to top left */
    body#page-top .btn-gradient-outline {
        order: 1;
        flex: 0 0 auto; /* Take only needed space */
    }

    /* Pin Logo to top right and scale down */
    body#page-top .logo {
        order: 2;
        flex: 1 0 auto; /* Take remaining space to push to right */
        text-align: right;
    }

        body#page-top .logo img {
            height: 28px !important; /* Scaled down logo */
        }

    /* Force Title to row 2 and center it in the card */
    body#page-top .to--decHolder h5 {
        order: 3;
        flex: 0 0 100%; /* Take full width to force a new line */
        margin-top: 15px !important;
        font-size: 20px !important;
        text-align: center !important;
    }

    /* 3. Compact form rows */
    body#page-top .d-flex {
        /* This prevents other d-flex elements from breaking */
        flex-direction: row;
    }

    .form-group {
        margin-bottom: 5px !important;
    }
}

.otp-verified {
    background: #e8f7ef;
    color: #1e8e5a;
    border: 1px solid #b7e4c7;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: default;
}