.iti {
    width: 100% !important;
}

.iti input {
    width: 100% !important;
}

.iti--separate-dial-code {
    width: 100% !important;
}

/* Keep the country picker above the login overlay on mobile and desktop. */
.iti.iti--container {
    z-index: 1000000;
    width: auto !important;
}

.tp-password-wrap{
    position:relative;
}

.tp-password-wrap input{
    width:100%;
    padding:14px 45px 14px 14px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:16px;
}

.toggle-password{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:20px;
    color:#777;
    user-select:none;
}

.toggle-password:hover{
    color:#000;
}

.tp-success-message{

    background:#d1fae5;

    color:#065f46;

    border:1px solid #10b981;

    padding:12px 15px;

    margin:15px 0;

    border-radius:6px;

    font-size:14px;
    line-height: 16px;
    margin: 15px 5% 30px;

}



.tp-error{

    background:#fee2e2;

    color:#991b1b;

    border:1px solid #ef4444;

    padding:12px 15px;

    margin:15px 0;

    border-radius:6px;

}



.tp-user-icon.button-account-manager {

    font-size: 28px;

}



.tp-overlay{

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

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

    z-index: 999999;

}



.tp-overlay.active{

    display:flex;

}



.tp-overlay{

    display:flex;

}



.tp-account-modal{

    width:100%;

    max-width:440px;

    background:#fff;

    border-radius:25px;

    position:relative;

}



p#subtitle {

    margin-bottom: 0;

}



.tp-error{

    background:#ffe6e6;

    color:#d60000;

    padding:12px;

    border-radius:10px;

    margin:15px 24px;

    font-size:14px;

}



/* Demo background */

    .demo-page {

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      background: linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.6)),

                  url('https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=1600') center/cover;

      text-align: center;

      padding: 20px;

    }

    .demo-page h1 { color: white; font-size: 2rem; margin-bottom: 10px; }

    .demo-page p { color: #cbd5e1; margin-bottom: 28px; }

    .demo-open-btn {

      background: linear-gradient(135deg, #00B4D8, #0096C7);

      color: white;

      border: none;

      padding: 16px 36px;

      font-size: 1.1rem;

      font-weight: 600;

      border-radius: 50px;

      cursor: pointer;

      box-shadow: 0 10px 30px rgba(0,180,216,0.4);

      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

    }

    .demo-open-btn:hover {

      transform: translateY(-4px) scale(1.04);

      box-shadow: 0 15px 35px rgba(0,180,216,0.5);

    }



    /* ===== MODAL ===== */

    .tp-overlay {

      position: fixed;

      inset: 0;

      background: rgba(15,23,42,0.75);

      backdrop-filter: blur(8px);

      display: flex;

      align-items: center;

      justify-content: center;

      z-index: 99999;

      opacity: 0;

      visibility: hidden;

      transition: all 0.4s ease;

      padding: 16px;

    }

    .tp-overlay.active {

      opacity: 1;

      visibility: visible;

    }



    .tp-account-modal {

      background: #ffffff;

      border-radius: 28px;

      width: 100%;

      max-width: 440px;

      max-height: 92vh;

      overflow-y: auto;

      position: relative;

      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);

      transform: translateY(40px) scale(0.94);

      opacity: 0;

      transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);

    }

    .tp-overlay.active .tp-account-modal {

      transform: translateY(0) scale(1);

      opacity: 1;

    }



    /* Floating decorations */

    .tp-float {

      position: absolute;

      pointer-events: none;

      opacity: 0.12;

      z-index: 1;

    }

    .tp-float-1 { top: 20px; left: 18px; animation: floatY 4s ease-in-out infinite; }

    .tp-float-2 { top: 25px; right: 50px; animation: floatY 5s ease-in-out infinite 0.7s; }

    .tp-float-3 { bottom: 90px; left: 20px; animation: floatY 4.5s ease-in-out infinite 1.1s; }

    .tp-float-4 { bottom: 100px; right: 18px; animation: floatY 3.8s ease-in-out infinite 0.3s; }



    @keyframes floatY {

      0%,100% { transform: translateY(0) rotate(0deg); }

      50% { transform: translateY(-12px) rotate(6deg); }

    }



    /* Close */

    .tp-close {

      position: absolute;

      top: 16px;

      right: 16px;

      width: 36px;

      height: 36px;

      border: none;

      background: #f1f5f9;

      border-radius: 50%;

      font-size: 22px;

      color: #64748b;

      cursor: pointer;

      z-index: 20;

      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

    }

    .tp-close:hover {

      background: #e2e8f0;

      transform: rotate(90deg) scale(1.1);

    }



    /* Header */

    .tp-header {

      text-align: center;

      padding: 28px 24px 8px;

      position: relative;

      z-index: 5;

    }

    .tp-logo {

      display: inline-block;

      margin-bottom: 10px;

      animation: bounceIn 0.8s cubic-bezier(0.34,1.56,0.64,1);

    }

    @keyframes bounceIn {

      0% { transform: scale(0.2); opacity: 0; }

      60% { transform: scale(1.1); }

      100% { transform: scale(1); opacity: 1; }

    }

    .tp-header h2 {

      font-size: 1.45rem;

      font-weight: 700;

      color: #0f172a;

      margin-bottom: 4px;

    }

    .tp-header p {

      color: #64748b;

      font-size: 0.93rem;

    }



    /* Tabs */

    .tp-tabs {

      display: flex;

      gap: 8px;

      padding: 12px 24px 18px;

      justify-content: center;

    }

    .tp-tab {

      flex: 1;

      max-width: 130px;

      padding: 10px 12px;

      border: 2px solid #e2e8f0;

      background: white;

      border-radius: 50px;

      font-weight: 600;

      font-size: 0.93rem;

      color: #64748b;

      cursor: pointer;

      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

    }

    .tp-tab.active {

      background: linear-gradient(135deg, #00B4D8, #0096C7);

      border-color: transparent;

      color: white;

      box-shadow: 0 6px 18px rgba(0,180,216,0.35);

      transform: translateY(-2px);

    }



    /* Forms */

    .tp-form {

      display: none;

      padding: 0 24px 24px;

      animation: fadeUp 0.4s ease;

    }

    .tp-form.active { display: block; }

    @keyframes fadeUp {

      from { opacity: 0; transform: translateY(12px); }

      to { opacity: 1; transform: translateY(0); }

    }



    .tp-group { margin-bottom: 14px; }

    .tp-group label {

      display: block;

      font-size: 0.84rem;

      font-weight: 600;

      color: #334155;

      margin-bottom: 5px;

    }

    .tp-group input {

      width: 100%;

      padding: 12px 15px;

      border: 2px solid #e2e8f0;

      border-radius: 14px;

      font-size: 0.95rem;

      background: #f8fafc;

      transition: all 0.25s;

    }

    .tp-group input:focus {

      outline: none;

      border-color: #00B4D8;

      background: white;

      box-shadow: 0 0 0 4px rgba(0,180,216,0.12);

    }



    .tp-row {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 12px;

    }



    /* Role cards */

    .tp-roles {

      display: grid;

      grid-template-columns: repeat(3,1fr);

      gap: 8px;

      margin-bottom: 16px;

    }

    .tp-role {

      cursor: pointer;

    }

    .tp-role input { display: none; }

    .tp-role-box {

      border: 2px solid #e2e8f0;

      border-radius: 16px;

      padding: 12px 6px;

      text-align: center;

      background: #f8fafc;

      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

    }

    .tp-role:hover .tp-role-box {

      border-color: #90e0ef;

      transform: translateY(-3px);

    }

    .tp-role input:checked + .tp-role-box {

      border-color: #00B4D8;

      background: linear-gradient(135deg,#e0f7fa,#f0fdfa);

      box-shadow: 0 6px 16px rgba(0,180,216,0.2);

      transform: translateY(-4px) scale(1.03);

    }

    .tp-role-icon {

      font-size: 1.4rem;

      display: block;

      margin-bottom: 4px;

      transition: transform 0.3s;

    }

    .tp-role input:checked + .tp-role-box .tp-role-icon {

      transform: scale(1.25);

    }

    .tp-role-box strong {

      display: block;

      font-size: 0.78rem;

      color: #0f172a;

    }

    .tp-role-box small {

      font-size: 0.68rem;

      color: #64748b;

    }



    /* Buttons */

    .tp-btn {

      width: 100%;

      padding: 14px;

      border: none;

      border-radius: 50px;

      font-size: 1.02rem;

      font-weight: 600;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 8px;

      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);

    }

    .tp-btn-primary {

      background: linear-gradient(135deg, #00B4D8, #0096C7);

      color: white;

      box-shadow: 0 6px 20px rgba(0,180,216,0.35);

      margin-top: 6px;

    }

    .tp-btn-primary:hover {

      transform: translateY(-3px);

      box-shadow: 0 12px 28px rgba(0,180,216,0.45);

    }



    /* Google Button */

    .tp-divider {

      display: flex;

      align-items: center;

      margin: 18px 0 14px;

      color: #94a3b8;

      font-size: 0.85rem;

    }

    .tp-divider::before,

    .tp-divider::after {

      content: "";

      flex: 1;

      height: 1px;

      background: #e2e8f0;

    }

    .tp-divider span { padding: 0 12px; }



    .tp-google {

      width: 100%;

      padding: 13px;

      border: 2px solid #e2e8f0;

      background: white;

      border-radius: 50px;

      font-size: 0.98rem;

      font-weight: 600;

      color: #334155;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 10px;

      transition: all 0.25s;

    }

    .tp-google:hover {

      background: #f8fafc;

      border-color: #cbd5e1;

      transform: translateY(-2px);

      box-shadow: 0 4px 12px rgba(0,0,0,0.06);

    }

    .tp-google svg { width: 20px; height: 20px; }



    /* Success screen */

    .tp-success {

      display: none;

      text-align: center;

      padding: 10px 10px 20px;

      animation: fadeUp 0.45s ease;

    }

    .tp-success.active { display: block; }

    .tp-success-icon {

      width: 78px;

      height: 78px;

      background: linear-gradient(135deg,#d1fae5,#a7f3d0);

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      margin: 0 auto 16px;

      font-size: 2.4rem;

      animation: bounceIn 0.7s cubic-bezier(0.34,1.56,0.64,1);

    }

    .tp-success h3 {

      font-size: 1.25rem;

      color: #065f46;

      margin-bottom: 8px;

    }

    .tp-success p {

      color: #64748b;

      font-size: 0.95rem;

      line-height: 1.55;

      margin-bottom: 22px;

    }



    .tp-accent {

      height: 6px;

      background: linear-gradient(90deg,#00B4D8,#48cae4,#90e0ef);

      border-radius: 0 0 28px 28px;

    }



    /* Forgot link */

    .tp-forgot-row {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin: 8px 0 16px;

      font-size: 0.88rem;

    }

    .tp-forgot {

      color: #00B4D8;

      cursor: pointer;

      font-weight: 500;

    }

    .tp-forgot:hover { text-decoration: underline; }



    /* Responsive */

    @media (max-width: 768px) {

      .tp-account-modal { border-radius: 22px; }

      .tp-header { padding: 24px 18px 6px; }

      .tp-header h2 { font-size: 1.3rem; }

      .tp-tabs, .tp-form { padding-left: 18px; padding-right: 18px; }

      .tp-roles { grid-template-columns: 1fr; gap: 8px; }

      .tp-role-box {

        display: flex;

        align-items: center;

        gap: 12px;

        text-align: left;

        padding: 11px 14px;

      }

      .tp-role-icon { margin-bottom: 0; font-size: 1.5rem; }

      .tp-row { grid-template-columns: 1fr; }

      .tp-float { opacity: 0.07; }

      .tp-success-message{
        margin: 15px 4% 30px;

      }

    }