/* 
    =====================
    This is the user css file for login page
    ====================== 
*/

 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');


 :root {
     --blue: #0d6efd;
     --blueHover: #0b5ed7;
     --transition-speed: 0.3s;

     /* warning color and its hover */
     --gold-bg: #ffc107;
     --gold-bg2: rgba(255, 193, 7, 0.176);
     --gold-bg-hover: #ffca2c;
     --green-bg: #198754;
     --green-bg2: rgba(25, 135, 84, 0.3);
     --green-bg-hover: #157347;
 }


 /* Removes the blue glow from all interactive elements */
 *:focus,
 *:active {
     outline: none !important;
     box-shadow: none !important;
 }



 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
     background-color: #f5f4f0;
 }


 /* ======== container */
 .container {
     margin-top: 60px;
     margin-bottom: 60px;
 }

 /* ======== card header */
 .card-header {
     border-top: 1.5px solid var(--gold-bg);
     padding: 25px !important;
     border-bottom: 1px solid green !important;
     background-color: #fff !important;
 }

 /* ======== Container */
 .container {
     margin-top: 60px;
     margin-bottom: 60px;
 }


 /* ======== Card Header */
 .card-header {
     background: #fff !important;
     border-bottom: 1px solid #f0ede7 !important;
     border-top: 1.5px solid #ffc107 !important;
     padding: 1.25rem 1.75rem !important;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
 }

 .card-header h6 {
     font-size: 15px;
     font-weight: 700;
     color: #1a1a1a;
     margin: 0;
 }

 .card-header small {
     font-size: 12px;
     color: #888;
 }

 /* ======== Inputs */
 .form-control {
     height: 42px;
     border: 1.5px solid #ece9e2 !important;
     border-radius: 0 !important;
     padding: 0 12px !important;
     font-size: 13.5px !important;
     font-family: inherit;
     background: #fafaf8;
     transition: border-color 0.2s ease, background 0.2s ease;
     outline: none !important;
     box-shadow: none !important;
 }

 input::placeholder {
     opacity: 0.5 !important;
     font-size: 13px;
 }

 /* ======== Input Group — unified bordered box */
 .input-group {
     border: 1.5px solid #ece9e2;
     border-radius: 0 !important;
     background: #fafaf8;
     overflow: hidden;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 /* ======== Amber focus ring on the whole group */
 .input-group:focus-within {
     border-color: #ffc107;
     box-shadow: 0 !important;
     background: #fff;
 }

 /* ======== Icons inside — no border, transparent bg */
 .input-group-text {
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
     outline: 0 !important;
     color: #bbb;
     font-size: 14px;
     padding: 0 10px;
 }

 /* ======== Inner input — no border, transparent */
 .input-group .form-control {
     border: 0 !important;
     border-radius: 0 !important;
     background: transparent !important;
     box-shadow: none !important;
     height: 42px;
 }

 .input-group .form-control:focus {
     box-shadow: none !important;
     border: 0 !important;
 }

 /* ======== Font Awesome icons */
 .fa-envelope,
 .fa-lock,
 .fa-eye {
     font-size: 14px;
     color: #bbb;
 }

 /* ======== font awesome  */
 .fa-sign-in-alt {
     font-size: 12px;
 }

 .fa-google-plus-g,
 .fa-envelope,
 .fa-lock,
 .fa-eye {
     font-size: 14px;
 }

 .input-group-text {
     background-color: #fff;
     border: 0 !important;
     box-shadow: none !important;
     outline: 0 !important;
 }


 /* =========== login alert */
 .alert-danger {
     animation: alertUser 0.6s 2 linear !important;
 }

 @keyframes alertUser {

     0%,
     100% {
         transform: translateX(0);
     }

     10% {
         transform: translateX(-2px);
     }

     20% {
         transform: translateX(2px);
     }

     30% {
         transform: translateX(-3px);
     }

     40% {
         transform: translateX(3px);
     }

     50% {
         transform: translateX(-1px);
     }

     60% {
         transform: translateX(1px);
     }

     70% {
         transform: translateX(-2px);
     }

     90% {
         transform: translateX(2px);
     }
 }




 /* ======================= responsive ======================= */
 /* ======================= responsive ======================= */
 @media (max-width: 768px) {
     .container {
         margin-top: 15px !important;
         margin-bottom: 30px;
     }

     /* ======== Card Header */
     .card-header,
     .card-body,
     .continue-with-ctn,
     .continue-with-ctn2 {
         background: #f5f4f0 !important;
     }

     /* ========== form */
     .card-header {
         align-items: center !important;
         text-align: center !important;

     }

     .card-body {
         padding: 5px !important;
     }
 }