:root{
      --brand:#008E49;           /* mint-ish green from the Continue button and progress */
      --brand-700:#039c52;
      --brand-50:#05a758;
      --text:#1f2937;            /* primary text */
      --muted:#6b7280;           /* secondary text */
      --border:#e5e7eb;          /* card/input borders */
      --bg:#f7f7f9;              /* page background */
      --white:#fff;
      --danger:#e11d48;
      --step-size:40px;
      --container-w:1040px;
      --card-w:520px;
      --radius:10px;
      --shadow:0 10px 24px rgba(0,0,0,.06);
      --shadow-soft:0 4px 12px rgba(0,0,0,.08);
      --focus:0 0 0 3px rgba(29,181,138,.25);
    }

    /* Page */
    *{ 
      font-family: "Noto Sans Georgian", sans-serif;
      box-sizing:border-box
    }
    html,body{height:100%}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:var(--bg);
      line-height:1.45;
    }
    a{color:inherit;text-decoration:none}
    .container{
      max-width:var(--container-w);
      margin:0 auto;
      padding:0 24px;
    }

    /* Top bar */
    .topbar{
      background:var(--white);
      border-bottom:1px solid var(--border);
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      height:64px;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:800;
      letter-spacing:0.5px;
    }
    .brand .cube{
      width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#0ea5e9 0%, #22c55e 60%, #16a34a 100%);
      box-shadow:0 2px 6px rgba(0,0,0,.15);
    }
    .brand span{font-size:22px}
    .nav{
      display:flex;align-items:center;gap:28px;color:#334155;font-weight:500;
    }
    .nav a:hover{
      color:#0f172a
    }
    .lang{
      width:28px;
      height:28px;
      display:grid;
      place-items:center;
    }

    /* Stepper */
    .stepper{
      background:var(--white);
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:var(--shadow-soft);
      margin:24px auto;
      padding:12px 18px 16px;
    }
    .steps{
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:relative;
      padding:6px 8px 0;
      gap:10px;
    }
    .steps::before{
      content:"";
      position:absolute;
      left:18px; right:18px; top:80px;
      height:6px; border-radius:3px; background:#eaecef;
    }
    .progress{
      position:absolute;
      left:18px; top:80px; height:6px; border-radius:3px; background:var(--brand);
      width:20%;
      transition:width .3s ease;
    }
    .step{
      display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1; width:20%;
      color:#475569;
      text-align:center;
    }
    .step .num{
      width:var(--step-size); height:var(--step-size); border-radius:50%;
      display:grid; place-items:center;
      background:#ffffff; color:#666666; font-weight:700; border:2px solid #e8e8e8;
    }
    .step.active .num{
      background:var(--brand); 
      border:2px solid var(--brand);
      color:#fff;
    }
    .step.active-pre .num{
      background:var(--brand);
      border:2px solid var(--brand);
      color:#fff;
    }
    .step .label{font-size:12px}

    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center; /* vertical center */
      align-items: center;     /* horizontal center */
      text-align: center;      /* center text */
      background: #f8f8f8;     /* optional background */
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .hero h1 {
      margin-bottom: 10px;
    }
    .hero p {
      max-width: 500px;        /* optional: limit paragraph width */
    }

    /* Card / Form */
    .card{
      width:min(100%, var(--card-w));
      margin:0 auto 40px;
      background:var(--white);
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:var(--shadow);
      padding:0;
      overflow:hidden;
    }
    .card-header{
      padding:16px 20px;
      border-bottom:1px solid var(--border);
      font-weight:700;
      color:#374151;
      background:#fff;
    }
    .card-body{padding:20px}
    .field{margin-bottom:16px}
    .label{
      display:block;
      font-size:13px;
      color:#374151;
      margin-bottom:8px;
    }
    .input{
      width:100%;
      height:44px;
      border-radius:8px;
      border:1px solid var(--border);
      padding:10px 12px;
      font-size:14px;
      outline:none;
      background:#fff;
      transition:border-color .2s, box-shadow .2s, background .2s;
    }
    .input::placeholder{color:#9aa0a6}
    .input:focus{
      border-color:var(--brand);
      box-shadow:var(--focus);
    }
    .hint{
      font-size:12px;
      color:var(--muted);
      margin-top:8px;
    }

    .list{padding:18px}
    .apartment{display:flex;align-items:center;gap:14px;border:1px solid #e6e8ec;border-radius:10px;padding:12px 14px;margin:10px 0;background:#fff}
    .apartment .meta{flex:1}
    .title{font-weight:600;font-size:14px;margin:0 0 4px}
    .subtitle{font-size:12px;color:#6b7280}
    .badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;border-radius:999px;padding:6px 10px;border:1px solid}
    .green{color:#16a34a;border-color:#a7f3d0;background:#ecfdf5}
    .blue{color:#2563eb;border-color:#bfdbfe;background:#eff6ff}
    .amber{color:#d97706;border-color:#fde68a;background:#fffbeb}

    .actions{
      display:flex;
      gap:12px;
      padding:18px 20px;
      border-top:1px solid var(--border);
      background:#fafafa;
    }
    .btn{
      height:40px;
      padding:0 18px;
      border-radius:8px;
      border:1px solid transparent;
      font-weight:600;
      cursor:pointer;
      transition:transform .02s ease, background .2s, border-color .2s;
      line-height: 35px;
    }
    .btn:active{transform:translateY(1px)}
    .btn-secondary{
      background:#fff;border-color:var(--border);color:#374151;
    }
    .btn-primary{
      margin-left:auto;
      background:var(--brand);
      color:#fff;
      border-color:var(--brand);
      min-width:150px;
    }
    .btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}

    .btn.disabled, .btn:disabled, fieldset:disabled .btn {
        color: #999;
        pointer-events: none;
        background-color: #cccccc;
        border-color: #cccccc;
    }

    .otp{display:flex;gap:12px;justify-content:center;margin:22px 0}
    .otp input{
      width:48px;height:56px;text-align:center;font-size:20px;border:1px solid #d1d5db;border-radius:10px;outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .otp input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,181,138,.25)}
    .resend{color:#6b7280;text-align:center;font-size:14px;margin:8px 0 0}
    .otp-error input{
      border: solid 1px red;
    }
    .otp-error input:focus{
      border: solid 1px red;
    }

    .title{font-weight:700;font-size:14px}
    .subtitle{font-size:12px;color:#6b7280}
    .badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;border-radius:999px;padding:6px 10px;border:1px solid #bfdbfe;background:#eff6ff;color:#2563eb}
    .meta{flex:1}
    .row-header{display:flex;align-items:center;gap:12px;padding:12px 14px;}
    .row-header .box-status { margin-left: auto;}
    .expand{padding:12px}
    .section-title{font-size:12px;color:#475569;margin:0 0 8px}
    .plan-select{width:100%;height:40px;border:1px solid var(--border);border-radius:8px;padding:0 10px;background:#fff}
    .plan-card{border:1px solid #dbe7e1;background:#fff;border-radius:10px;padding:12px;margin-top:10px}
    .plan-header{display:flex;justify-content:space-between;align-items:center}
    .plan-name{font-weight:700}
    .plan-price{font-weight:700;color:#0a8b63}
    .features{margin:8px 0 0;padding-left:0;list-style:none;color:#374151;font-size:13px}
    .features li{display:flex;gap:8px;align-items:center;margin:6px 0}
    .features li::before{content:"✔";color:#16a34a}

    form { margin: 0px;}
    /* Footer */
    footer{
      background:#0f172a;
      color:#cbd5e1;
      padding:26px 0 70px; /* room for fab */
      margin-top:40px;
    }
    .footer-inner{
      display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;
      font-size:14px;
    }
    .footer-inner a{color:#e2e8f0}
    .copyright{
      margin-top:10px;
      text-align:center;
      font-size:12px;color:#94a3b8;
    }

    /* Back-to-top FAB */
    .fab{
      position:fixed; right:18px; bottom:18px;
      width:40px;height:40px;border-radius:10px;
      background:var(--brand); color:#fff; display:grid; place-items:center;
      box-shadow:var(--shadow);
      border:none; cursor:pointer;
    }
    .fab:hover{background:var(--brand-700)}

    .step-mobile { 
      display: none;
    }


    /* Responsive tweaks */
    @media (max-width: 640px){
      .step-mobile { display: flex;justify-content: space-between;margin-top: 20px;font-weight: bold;}
      .step-mobile .progress { top: 115px; }
      .nav{display:none}
      .stepper { display: none;}
      .step .label{display:none}
      .steps {display:none}
      .actions{flex-wrap:wrap}
      .btn-primary{flex:1}
      
    }
    input[type="checkbox"]{width:18px;height:18px;border:1px solid #cbd5e1;border-radius:4px}

.iti {
    width: 100% !important;
}

@media (max-width: 768px) {
  .row-header {
    display: flex!important;
    flex-direction: column!important; 
    align-items: start!important;
  }
  .row-header .box-status { margin-left: 0;}
  .box-status {
    margin-top:5px!important;
  }
  .status-icon {
    margin-right: 1px!important;
  }
  .hero{margin-top:40px;}
}

.transparent-box {
  opacity: .6;
}