/* =========================
       Base / Tokens
    ========================== */
   :root {
       --bg: #f7fbf9;
       --card: #ffffff;
       --text: #1f2937;
       --muted: #6b7280;

       --border: #e6eef0;
       --border-2: #cdd7e0;

       --brand: #00c479;
       --brand-2: #00aa68;
       --brand-soft: rgba(0, 196, 121, 0.10);

       --danger: #dc2626;
       --warn: #f59e0b;
       --ok: #16a34a;

       --shadow: 0 14px 34px rgba(17, 24, 39, 0.10);
       --shadow-soft: 0 10px 22px rgba(0, 171, 104, 0.18);

       --r-lg: 22px;
       --r-md: 16px;
       --r-sm: 12px;

       --pad: 24px;
   }

   * {
       box-sizing: border-box;
   }

   /* =========================
       Page wrapper
    ========================== */
   .privacy-policy-body,
   .trial-register-page {
       font-family: Calibri, Arial, sans-serif;
       line-height: 1.6;
       color: var(--text);
       margin-top: 100px;
       padding: 18px;
       background: transparent;
   }

   .privacy-policy-header {
       text-align: center;
       margin-bottom: 18px;
   }

   .trial-register-page.home-sub {
       display: block;
       position: static;
       inset: auto;
       background: transparent;
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       justify-content: unset;
       align-items: unset;
       z-index: auto;
   }

   /* container wrapper */
   .trial-register-page .wrapper {
       max-width: 1230px;
       width: 100%;
       margin-inline: auto;

       /* background:
            radial-gradient(1200px 600px at 20% -10%, rgba(0, 196, 121, 0.12), transparent 60%),
            radial-gradient(900px 500px at 90% 0%, rgba(0, 170, 104, 0.10), transparent 55%),
            linear-gradient(180deg, #ffffff 0%, #f6fffb 100%);
        border: 1px solid rgba(230, 238, 240, 0.85); */
       border-radius: 28px;
       padding: clamp(16px, 2.2vw, 30px);
       box-shadow: var(--shadow);
       overflow: hidden;
       position: relative;
   }

   /* subtle top highlight line */
   .trial-register-page .wrapper::before {
       content: "";
       position: absolute;
       inset: 0 0 auto 0;
       height: 3px;
       background: linear-gradient(90deg, transparent, rgba(0, 196, 121, 0.65), transparent);
       opacity: .8;
       pointer-events: none;
   }

   /* =========================
       Title + alert
    ========================== */
   .trial-register-page .trial-register-title {
       text-align: center;
       font-size: clamp(26px, 2.2vw, 40px);
       line-height: 1.15;
       font-weight: 800;
       letter-spacing: -0.2px;
       margin: 0 0 18px;
   }

   .trial-register-page .trial-register-alert {
       width: min(100%, 560px);
       margin: 10px auto 18px;
       padding: 11px 14px;
       border-radius: 14px;
       border: 1px solid #b8e6d2;
       background: linear-gradient(180deg, #f6fffb 0%, #eefcf5 100%);
       color: #11653f;
       font-size: 14px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       box-shadow: 0 8px 18px rgba(0, 171, 104, 0.10);
       position: relative;
       overflow: hidden;
   }

   .trial-register-page .trial-register-alert::after {
       content: "";
       position: absolute;
       inset: 0 auto 0 0;
       width: 4px;
       border-radius: inherit;
       pointer-events: none;
       background: linear-gradient(180deg, #00c479 0%, #00aa68 100%);
   }

   .trial-register-page .trial-register-alert-icon {
       width: 20px;
       height: 20px;
       border-radius: 999px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: #ffffff;
       border: 1px solid #caeadc;
       box-shadow: 0 4px 10px rgba(0, 171, 104, 0.14);
       flex: 0 0 auto;
   }

   .trial-register-page .trial-register-alert-icon svg {
       width: 12px;
       height: 12px;
       stroke: #0f8f58;
       stroke-width: 2.2;
       fill: none;
       stroke-linecap: round;
       stroke-linejoin: round;
   }

   /* =========================
       Card / sections
    ========================== */
   .trial-register-page .trial-register-card {
       border: 1px solid var(--border);
       border-radius: var(--r-lg);
       padding: clamp(14px, 2vw, 18px);
       background: var(--card);
   }

   .trial-register-page .trial-register-section {
       margin-bottom: 0;
       border: none;
       border-radius: 0;
       padding: 0;
       background: transparent;
   }

   .trial-register-page .trial-register-section-title {
       font-size: clamp(17px, 1.2vw, 22px);
       font-weight: 800;
       color: #253138;
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .trial-register-page .trial-register-section-title::before {
       content: "";
       width: 10px;
       height: 10px;
       border-radius: 999px;
       background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
       box-shadow: 0 8px 16px rgba(0, 171, 104, 0.25);
       flex: 0 0 auto;
   }

   .trial-register-page .trial-register-divider {
       border: 0;
       border-top: 1px solid var(--border);
       margin: 10px 0 14px;
   }

   /* =========================
       Grid / fields
    ========================== */
   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px 18px;
       align-items: start;
   }

   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .test-register-field {
       display: flex;
       flex-direction: column;
       gap: 6px;
       min-width: 0;
   }

   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .label {
       margin-bottom: 2px;
       color: #2f3a3f;
       font-weight: 700;
       font-size: 14px;
   }

   .label-span {
       color: var(--danger);
       margin-left: 3px;
       font-weight: 900;
   }

   /* inputs */
   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .input,
   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .form-control,
   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid select.input {
       width: 100%;
       margin-bottom: 0;
       background: #f7faf9;
       font-weight: 400;
       color: #23313a;
       font-size: clamp(15px, 0.9rem + 0.35vw, 18px);
       border: 1px solid var(--border-2);
       border-radius: var(--r-md);
       padding: 11px 16px;
       transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .12s ease;
       min-height: 48px;
   }

   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .input::placeholder,
   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .form-control::placeholder {
       color: #94a3b8;
       font-weight: 500;
       font-size: clamp(13px, 0.78rem + 0.18vw, 15px);
   }

   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .input:focus,
   .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .form-control:focus {
       outline: none;
       border-color: var(--brand);
       background: #ffffff;
       box-shadow: 0 0 0 4px rgba(0, 196, 121, 0.14);
   }

   /* invalid styles (bootstrap 'is-invalid' bor bo‘lsa ham chiroyli ko‘rinsin) */
   .trial-register-page .is-invalid {
       border-color: rgba(220, 38, 38, 0.65) !important;
       box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
       background: #fff7f7 !important;
   }

   /* error text */
   .test-register-error {
       display: block;
       margin-top: 2px;
       color: var(--danger);
       font-size: 12.5px;
       font-weight: 700;
   }

   /* =========================
       Buttons
    ========================== */
   .trial-register-page .test-register-actions {
       margin-top: 10px;
       display: flex;
       justify-content: center;
   }

   .trial-register-page .trial-register-terms {
       margin-top: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap;
   }

   .trial-register-page .trial-register-terms-label {
       display: inline-flex;
       align-items: flex-start;
       gap: 8px;
       color: #2f3a3f;
       font-weight: 600;
       cursor: pointer;
   }

   .trial-register-page .trial-register-terms-label input[type="checkbox"] {
       width: 16px;
       height: 16px;
   }

   .trial-register-page .trial-register-terms-text {
       color: #2563eb;
       text-decoration: underline;
       text-underline-offset: 2px;
   }

   .trial-register-page .trial-register-terms-copy {
       line-height: 1.35;
   }

   .trial-register-page .trial-register-terms-error {
       text-align: center;
       width: 100%;
   }

   .trial-register-page .test-register-actions .btn-send {
       width: min(640px, 100%);
       min-height: 54px;
       border: none;
       border-radius: 14px;
       background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
       color: #ffffff;
       font-size: 18px;
       font-weight: 800;
       letter-spacing: 0.2px;
       box-shadow: var(--shadow-soft);
       transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
       cursor: pointer;
   }

   .trial-register-page .test-register-actions .btn-send:hover {
       transform: translateY(-1px);
       box-shadow: 0 16px 30px rgba(0, 171, 104, 0.28);
       filter: saturate(1.06);
   }

   .trial-register-page .test-register-actions .btn-send:active {
       transform: translateY(0);
       box-shadow: 0 10px 22px rgba(0, 171, 104, 0.22);
   }

   .trial-register-page .test-register-actions .btn-send:disabled {
       opacity: 0.6;
       cursor: not-allowed;
       filter: grayscale(0.2);
       box-shadow: none;
       transform: none;
   }

   /* =========================
       Password toggle (icon)
    ========================== */
   .trial-register-page .password-eye {
       width: 18px;
       height: 18px;
       stroke: #6b7280;
       stroke-width: 1.8;
       fill: none;
       display: block;
   }

   .trial-register-page .password-eye.hidden {
       display: none;
   }

   .input-group-text.cursor-pointer {
       user-select: none;
   }

   /* =========================
       Hint (username + phone)
    ========================== */
   .test-register-hint {
       display: block;
       margin-top: 2px;
       font-size: 12.5px;
       font-weight: 700;
   }

   .test-register-hint.is-ok {
       color: var(--ok);
   }

   .test-register-hint.is-bad {
       color: var(--danger);
   }

   .test-register-hint.is-warn {
       color: var(--warn);
   }

   /* =========================
       Password Rules
    ========================== */
   .password-rules {
       margin-top: 8px;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       gap: 12px;
       align-items: center;
       justify-content: flex-start;
   }

   .password-rule {
       font-size: 13px;
       color: #94a3b8;
       display: flex;
       align-items: center;
       gap: 6px;
       transition: color 0.2s ease;
       font-weight: 600;
       white-space: nowrap;
   }

   .password-rule i {
       font-size: 16px;
       transition: transform 0.2s ease;
       flex-shrink: 0;
   }

   .password-rule.is-valid {
       color: var(--ok);
   }

   .password-rule.is-valid i {
       color: var(--ok);
   }

   .password-rule.is-invalid {
       color: var(--danger);
   }

   /* =========================
       Input-group: all valid focus state
    ========================== */
   .input-group.is-all-valid .form-control:focus {
       outline: none;
       border-color: var(--brand) !important;
       background: #ffffff;
       box-shadow: 0 0 0 4px rgba(0, 196, 121, 0.20) !important;
       border-color: var(--ok) !important;
   }

   .input-group.is-all-valid .form-control {
       border-color: var(--ok);
       box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
   }




   /* =========================
       Phone input-group (perfect match)
    ========================== */
   .phone-group {
       display: flex;
       flex-wrap: nowrap !important;
       align-items: stretch;
       width: 100%;
   }

   .phone-group .phone-input {
       flex: 1 1 auto;
       min-width: 0;
       border-radius: 16px 0 0 16px !important;
   }

   .phone-group .btn-phone-verify {
       flex: 0 0 auto;
       white-space: nowrap;
       padding: 0 14px;
       display: inline-flex;
       align-items: center;
       gap: 8px;

       border: 1px solid var(--border-2);
       border-left: 0;
       border-radius: 0 16px 16px 0 !important;

       background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
       color: #ffffff;
       font-weight: 900;
       letter-spacing: .2px;

       transition: filter .16s ease, transform .16s ease, opacity .16s ease;
   }

   .phone-group .btn-phone-verify:not(:disabled):hover {
       filter: saturate(1.08);
       transform: translateY(-0.5px);
   }

   .phone-group .btn-phone-verify:disabled {
       opacity: .45;
       cursor: not-allowed;
       filter: grayscale(.25);
       box-shadow: none;
       transform: none;
   }

   .phone-group .btn-phone-verify svg {
       width: 18px;
       height: 18px;
   }

   /* =========================
       SMS box
    ========================== */
   .sms-code-box {
       margin-top: 10px;
       padding: 14px;
       border-radius: 16px;
       background:
           radial-gradient(620px 240px at 12% -10%, rgba(0, 196, 121, 0.14), transparent 58%),
           linear-gradient(180deg, #f8fffc 0%, #f3fbf7 100%);
       box-shadow:
           0 10px 22px rgba(0, 171, 104, 0.10),
           inset 0 1px 0 rgba(255, 255, 255, 0.7);
       position: relative;
       overflow: hidden;
   }

   .sms-code-box::before {
       content: "";
       position: absolute;
       inset: 0 0 auto 0;
       height: 2px;
       background: linear-gradient(90deg, transparent 0%, rgba(0, 196, 121, 0.95) 50%, transparent 100%);
       box-shadow: 0 2px 8px rgba(0, 171, 104, 0.30);
       opacity: 1;
       pointer-events: none;
   }

   .sms-code-title {
       position: relative;
       text-align: center;
       font-weight: 900;
       margin-bottom: 10px;
       color: #2f3a3f;
       font-size: 14px;
       line-height: 1.35;
   }

   .sms-code-title::before {
       content: none;
   }

   .sms-code-title span {
       position: relative;
       z-index: 1;
       display: inline-block;
       padding: 0 10px;
       background: transparent;
   }

   .sms-code-hint {
       display: block;
       margin-top: 10px;
       font-size: 12px;
       color: var(--muted);
       font-weight: 700;
   }

   .sms-group {
       display: flex;
       flex-wrap: nowrap !important;
       align-items: stretch;
       width: 100%;
   }

   .sms-group .form-control {
       flex: 1 1 auto;
       min-width: 0;
       border-radius: 16px 0 0 16px !important;
       letter-spacing: 8px;
       text-align: center;
       font-weight: 900;
       border: 1px solid rgba(0, 196, 121, 0.4);
       background: #ffffff;
       box-shadow: 0 4px 12px rgba(0, 171, 104, 0.09);
   }

   .sms-group .form-control:focus {
       border-color: var(--brand);
       box-shadow: 0 0 0 4px rgba(0, 196, 121, 0.14);
   }

   .sms-group .btn-sms-check {
       flex: 0 0 auto;
       white-space: nowrap;
       padding: 0 14px;

       border: 1px solid var(--border-2);
       border-left: 0;
       border-radius: 0 16px 16px 0 !important;

       background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
       color: #fff;
       font-weight: 900;
       letter-spacing: .2px;
       box-shadow: 0 4px 12px rgba(0, 171, 104, 0.2);

       transition: filter .16s ease, transform .16s ease, opacity .16s ease;
   }

   .sms-group .btn-sms-check:not(:disabled):hover {
       filter: saturate(1.08);
       transform: translateY(-0.5px);
   }

   .sms-group .btn-sms-check:disabled {
       opacity: .45;
       cursor: not-allowed;
       filter: grayscale(.25);
       transform: none;
   }

   .btn-sms-resend {
       margin-top: 10px;
       border: 1px solid rgba(0, 196, 121, 0.45);
       background: rgba(255, 255, 255, 0.8);
       color: #11653f;
       font-weight: 900;
       border-radius: 14px;
       padding: 10px 12px;
       width: fit-content;
       transition: filter .16s ease, transform .16s ease, opacity .16s ease;
   }

   .btn-sms-resend:hover {
       filter: saturate(1.06);
       transform: translateY(-0.5px);
   }

   .btn-sms-resend:disabled {
       opacity: .55;
       cursor: not-allowed;
       transform: none;
   }



   /* =========================
       Input-group merge fine-tuning
    ========================== */
   .input-group.input-group-merge .form-control {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }

   .input-group.input-group-merge .input-group-text {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border: 1px solid var(--border-2);
       background: transparent;
       border-left: 0;
       border-radius: 0 16px 16px 0;
       padding-inline: 12px;
   }

   /* =========================
       Responsive
    ========================== */
   @media (max-width: 1100px) {
       .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }

       .password-rule {
           font-size: 12px;
       }

       .password-rules {
           gap: 10px;
       }
   }

   @media (max-width: 768px) {

       .trial-register-page,
       .privacy-policy-body {
           margin-top: 90px;
           padding: 12px;
       }

       .trial-register-page .wrapper {
           border-radius: 22px;
           padding: 14px;
       }

       .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid {
           grid-template-columns: 1fr;
           gap: 14px;
       }

       .trial-register-page .test-register-actions {
           margin-top: 12px;
       }

       .trial-register-page .test-register-actions .btn-send {
           width: 100%;
           font-size: 17px;
       }

       .sms-group .form-control {
           letter-spacing: 6px;
       }

       .password-rules {
           gap: 10px;
           flex-wrap: wrap;
       }

       .password-rule {
           font-size: 12px;
           flex-shrink: 0;
       }
   }

   @media (max-width: 420px) {
       .trial-register-page .trial-register-title {
           font-size: 24px;
       }

       .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .input,
       .trial-register-page.home-sub.test-register-sub .inputs.test-register-grid .form-control {
           padding: 10px 14px;
           border-radius: 14px;
       }

       .phone-group .phone-input {
           border-radius: 14px 0 0 14px !important;
       }

       .phone-group .btn-phone-verify {
           border-radius: 0 14px 14px 0 !important;
       }

       .sms-group .form-control {
           border-radius: 14px 0 0 14px !important;
       }

       .sms-group .btn-sms-check {
           border-radius: 0 14px 14px 0 !important;
       }

       .password-rules {
           gap: 6px;
           flex-wrap: wrap;
       }

       .password-rule {
           font-size: 11px;
           flex-shrink: 0;
       }

       .password-rule i {
           font-size: 14px;
       }
   }

   /* =========================
       Reduced motion (accessibility)
    ========================== */
   @media (prefers-reduced-motion: reduce) {
       * {
           transition: none !important;
           scroll-behavior: auto !important;
       }
   }