/* =========================================================
    HELCU — OTP VERIFICATION POPUP
    BASE — MOBILE FIRST
    0px → 767.98px
 ========================================================= */


 /* =========================================================
    OTP WRAPPER
 ========================================================= */

 .hc-otp-wrapper {

     width: 100%;

     margin: 0 auto;

     text-align: center;

 }


 /* =========================================================
    OTP MESSAGE
 ========================================================= */

 .hc-otp-message {

     margin: 0 0 24px;

     color: #64748B;

     font-size: 14px;

     font-weight: 500;

     line-height: 1.65;

 }


 .hc-email {

     display: inline-block;

     margin-top: 5px;

     color: #0A9396;

     font-size: 14px;

     font-weight: 700;

     letter-spacing: .15px;

 }


 /* =========================================================
    OTP INPUTS
 ========================================================= */

 .hc-otp-inputs {

     width: 100%;

     display: flex;

     justify-content: center;

     align-items: center;

     gap: 7px;

     margin: 0 auto;

 }


 .hc-otp-box {

     width: 40px;

     height: 50px;

     padding: 0;

     border: 1px solid #D8E2E5;

     border-radius: 10px;

     outline: none;

     background: #FFFFFF;

     color: #172033;

     text-align: center;

     font-size: 21px;

     font-weight: 700;

     line-height: 1;

     caret-color: #0A9396;

     box-shadow:
         0 2px 6px rgba(
             15,
             23,
             42,
             .04
         );

     transition:
         border-color .2s ease,
         box-shadow .2s ease,
         transform .2s ease,
         background-color .2s ease;

     -webkit-appearance: none;

     appearance: none;

 }


 .hc-otp-box:hover {

     border-color: #B8DADC;

 }


 .hc-otp-box:focus {

     border-color: #0A9396;

     background: #F8FEFE;

     color: #0A9396;

     transform: translateY(-2px);

     box-shadow:
         0 0 0 3px rgba(
             10,
             147,
             150,
             .10
         );

 }


 .hc-otp-box:disabled {

     cursor: not-allowed;

     border-color: #E2E8F0;

     background: #F8FAFC;

     color: #94A3B8;

     opacity: .75;

     transform: none;

 }


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

 .hc-otp-countdown {

     display: flex;

     justify-content: center;

     align-items: center;

     gap: 5px;

     margin-top: 21px;

     color: #64748B;

     font-size: 13px;

     font-weight: 500;

     line-height: 1.4;

 }


 .hc-otp-countdown strong {

     color: #0A9396;

     font-size: 13px;

     font-weight: 700;

     font-variant-numeric:
         tabular-nums;

 }


 /* =========================================================
    RESEND
 ========================================================= */

 .hc-otp-footer {

     width: 100%;

     margin-top: 16px;

     text-align: center;

 }


 .hc-resend-btn {

     min-height: 34px;

     padding: 5px 10px;

     border: none;

     outline: none;

     background: transparent;

     color: #94A3B8;

     font-family: inherit;

     font-size: 13px;

     font-weight: 600;

     line-height: 1.4;

     cursor: not-allowed;

     transition:
         color .2s ease,
         opacity .2s ease;

 }


 .hc-resend-btn:not(:disabled) {

     color: #0A9396;

     cursor: pointer;

 }


 .hc-resend-btn:not(:disabled):hover {

     color: #087F82;

     text-decoration: underline;

     text-underline-offset: 3px;

 }


 .hc-resend-btn:disabled {

     color: #A8B4C2;

     opacity: .75;

 }


 /* =========================================================
    OTP INVALID STATE
 ========================================================= */

 .hc-otp-box.invalid {

     border-color: #DC2626;

     background: #FFF7F7;

     color: #DC2626;

     animation:
         hcOtpShake .35s ease;

 }


 @keyframes hcOtpShake {

     0% {
         transform: translateX(0);
     }

     25% {
         transform: translateX(-4px);
     }

     50% {
         transform: translateX(4px);
     }

     75% {
         transform: translateX(-4px);
     }

     100% {
         transform: translateX(0);
     }

 }


 /* =========================================================
    OTP POPUP
 ========================================================= */

 .hc-otp-popup {

     width: min(
         calc(100% - 30px),
         420px
     );

     padding: 25px 18px 22px;

     border-radius: 18px;

     background: #FFFFFF;

     box-shadow:
         0 20px 50px rgba(
             15,
             23,
             42,
             .16
         );

 }


 .hc-otp-popup .swal2-title {

     margin: 0 0 7px;

     padding: 0;

     color: #172033;

     font-size: 21px;

     font-weight: 750;

     line-height: 1.3;

 }


 .hc-otp-popup .swal2-html-container {

     margin: 0;

     padding: 0;

 }


 .hc-otp-popup .swal2-confirm {

     min-width: 130px;

     min-height: 42px;

     margin-top: 21px;

     padding: 9px 20px;

     border: none !important;

     border-radius: 9px !important;

     background: #0A9396 !important;

     color: #FFFFFF !important;

     font-family: inherit;

     font-size: 13px !important;

     font-weight: 700 !important;

     line-height: 1.2;

     box-shadow:
         0 5px 12px rgba(
             10,
             147,
             150,
             .18
         );

     transition:
         background-color .2s ease,
         transform .2s ease,
         box-shadow .2s ease;

 }


 .hc-otp-popup .swal2-confirm:hover {

     background: #087F82 !important;

     transform: translateY(-1px);

     box-shadow:
         0 7px 16px rgba(
             10,
             147,
             150,
             .22
         );

 }


 .hc-otp-popup .swal2-confirm:active {

     transform: translateY(0);

 }


 .hc-otp-popup .swal2-confirm:disabled {

     cursor: not-allowed;

     opacity: .55;

     transform: none;

     box-shadow: none;

 }


 /* =========================================================
    TABLET
    768px → 1199.98px
 ========================================================= */

 @media (min-width: 768px) {


     .hc-otp-wrapper {

         max-width: 370px;

     }


     .hc-otp-message {

         margin-bottom: 27px;

     }


     .hc-otp-inputs {

         gap: 10px;

     }


     .hc-otp-box {

         width: 44px;

         height: 54px;

         border-radius: 11px;

         font-size: 23px;

     }


     .hc-otp-countdown {

         margin-top: 22px;

     }


     .hc-otp-footer {

         margin-top: 17px;

     }


     .hc-otp-popup {

         width: 400px;

         padding: 28px 25px 24px;

         border-radius: 19px;

     }


     .hc-otp-popup .swal2-title {

         font-size: 22px;

     }


     .hc-otp-popup .swal2-confirm {

         min-width: 134px;

         min-height: 43px;

     }

 }


 /* =========================================================
    DESKTOP
    1200px+
 ========================================================= */

 @media (min-width: 1200px) {


     .hc-otp-wrapper {

         max-width: 390px;

     }


     .hc-otp-message {

         margin-bottom: 29px;

     }


     .hc-otp-inputs {

         gap: 12px;

     }


     .hc-otp-box {

         width: 48px;

         height: 58px;

         border-radius: 12px;

         font-size: 25px;

     }


     .hc-otp-countdown {

         margin-top: 23px;

         font-size: 14px;

     }


     .hc-otp-countdown strong {

         font-size: 14px;

     }


     .hc-otp-footer {

         margin-top: 18px;

     }


     .hc-otp-popup {

         width: 430px;

         padding: 30px 28px 26px;

         border-radius: 20px;

     }


     .hc-otp-popup .swal2-title {

         font-size: 23px;

     }


     .hc-otp-popup .swal2-confirm {

         min-width: 138px;

         min-height: 44px;

         margin-top: 22px;

     }

 }


 /* =========================================================
    EXTRA SMALL MOBILE
    Below 360px
 ========================================================= */

 @media (max-width: 359.98px) {


     .hc-otp-inputs {

         gap: 5px;

     }


     .hc-otp-box {

         width: 36px;

         height: 47px;

         border-radius: 9px;

         font-size: 20px;

     }


     .hc-otp-message {

         font-size: 13px;

     }


     .hc-email {

         font-size: 13px;

     }


     .hc-otp-popup {

         width: calc(100% - 18px);

         padding-left: 14px;

         padding-right: 14px;

     }

 }