/* =============================================================
   Loyihaning umumiy CSS fayli (tartiblangan va takrorlar olib tashlangan) 
   Muallif izohi:
   - Bir xil qoidalar birlashtirildi, takrorlar olib tashlandi.
   - Har bo'lim boshida vazifasi haqida izoh berildi.
   - Ekran o'lchamlari uchun media-querylar yakunida bitta joyga jamlandi.
   - PIN formasi o'lchamlari CSS custom-variables orqali bitta joydan boshqariladi.
   ============================================================= */

/* -------------------------------------------------------------
   0) Asosiy ranglar va sozlamalar (kerak bo'lsa shu yerda markazlash)
   Vazifa: umumiy ranglar, soyalar va h.k. uchun qulay o'zgaruvchilar
   Eslatma: media-querylarda CSS var() qo'llab-quvvatlanmaydi, shu bois
   breakpoint qiymatlari pastda izoh tarzida ko'rsatiladi.
------------------------------------------------------------- */
:root{
  /* Ranglar */
  --c-brand: #008ddb;  /* asosiy brend rangi */
  --c-brand-2: #008ddc; /* ayrim elementlar uchun */
  --c-link: #008ddb;
  --c-text: #333333;
  --c-muted: #999999;
  --c-border: #dddddd;
  --c-border-2: #d1d1d1;
  --c-bg: #ffffff;
  --c-info: #5bc0de;
  --c-success: #41A84B;

  /* Soyalar */
  --shadow-strong: 0px 6px 15px 0px rgba(0,0,0,0.56);
  --shadow-soft: 0 3px 3px rgba(0, 0, 0, .05);

  /* Fixed header parametrlari */
  --header-h: 90px;     /* desktop navbar balandligi */
  --header-gap: 20px;   /* qo'shimcha bo'sh joy (header ostida) */
}

/* -------------------------------------------------------------
   1) HTML/Body va asosiy konteynerlar
   Vazifa: sahifa balandligi va oq fonni sozlash, wrap va container spacing
------------------------------------------------------------- */
html, body{ height:100%; background-color: var(--c-bg); }
/* Fixed header uchun global offset */
body{ padding-top: calc(var(--header-h) + var(--header-gap)); }

.wrap{
  min-height:100%;
  height:auto;
  margin:0 auto -40px;
  padding:0 0 40px;
}
/* Kontentning o'ziga odatiy tepa padding, header ofseti body orqali */
.wrap > .container{ padding:20px 15px 20px; }

/* -------------------------------------------------------------
   2) Footer (pastki qism)
   Vazifa: balandlik, border, dekorativ fon va chap/o'ng blokni boshqarish
------------------------------------------------------------- */
.footer{
  position:relative;
  overflow:hidden;
  height:40px;
  background-color:#ffffff;
  border-top:1px solid #ddd;
  padding:10px 15px 0 15px;
}
.footer .pull-left a{ font-weight:bold; }
.footer .pull-right{ display:none; }
.footer:before{
  content:"";
  height:175px;
  width:540px;
  background:url(../img/bgimg.png) left top no-repeat;
  position:absolute;
  right:0;
  bottom:0;
  transform: rotate(180deg);
}

/* -------------------------------------------------------------
   3) Yuqori qism (navbar) joylashuvi va brend zonasi
   Vazifa: .another_wrap konteyneri va dekorativ s2.png elementini sozlash
------------------------------------------------------------- */
.another_wrap{ position:relative; }
.another_wrap:before{
  content:"";
  width:213px;
  height:149px;
  position:fixed;          /* viewportga birikkan pastki-o'ng dekor */
  right:15px;
  bottom:80px;             /* so'ralgan joylashuv */
  background:url(../img/s2.png) center no-repeat;
  z-index:0;
  opacity:.3;
}
.another_wrap > nav{ padding-right:15px; padding-left:15px; }
.another_wrap .navbar-brand{ padding:5px 15px; height:inherit; }
.another_wrap .navbar-brand img{ width:170px; height:55px; object-fit:contain; margin-top:2px; }

/* -------------------------------------------------------------
   4) Navbar ko'rinishi va hover holatlari
   Vazifa: ranglar, tugmalar, active/hover uslublari, toggle ko'rinishi
------------------------------------------------------------- */
.navbar-inverse{ background-color:#ffffff; border-color:var(--c-border-2); color:var(--c-text); }

.another_wrap .navbar-nav button{ padding-top:25px; padding-bottom:25px; outline:none; margin:0; border:none; }
.another_wrap .nav > li > form{ padding:0; }
.another_wrap .navbar-nav > li > a{ padding-top:25px; padding-bottom:25px; }

.another_wrap .navbar-inverse button,
.another_wrap .navbar-inverse .navbar-nav > li > a{ color:var(--c-link); font-weight:bold; }

.another_wrap .navbar-inverse .navbar-toggle{ border:none!important; margin-top:16px; outline:none!important; }
.another_wrap .navbar-inverse .navbar-toggle .icon-bar{ background-color:var(--c-brand-2); }

.another_wrap .navbar-inverse .navbar-nav button:hover,
.another_wrap .navbar-inverse .navbar-nav button:focus,
.another_wrap .navbar-inverse .navbar-nav > .active > a,
.another_wrap .navbar-inverse .navbar-nav > .active > a:hover,
.another_wrap .navbar-inverse .navbar-nav > li > a:hover,
.another_wrap .navbar-inverse .navbar-nav > .active > a:focus{
  color:#fff; background-color:var(--c-brand)!important; text-decoration:none;
}
.another_wrap .navbar-inverse .navbar-toggle:hover,
.another_wrap .navbar-inverse .navbar-toggle:focus{ background-color:var(--c-brand); }
.another_wrap .navbar-inverse .navbar-toggle:hover .icon-bar,
.another_wrap .navbar-inverse .navbar-toggle:focus .icon-bar{ background-color:#fff; }

/* -------------------------------------------------------------
   5) Jumbotron, hintlar, xatolik bloklari va umumiy mayda uslublar
   Vazifa: tipografiya va ko'makchi ko'rinishlar
------------------------------------------------------------- */
.jumbotron{ text-align:center; background-color:transparent; }
.jumbotron .btn{ font-size:21px; padding:14px 24px; }
.not-set{ color:#c55; font-style:italic; }
.hint-block{ display:block; margin-top:5px; color:var(--c-muted); }
.error-summary{ color:#a94442; background:#fdf7f7; border-left:3px solid #eed3d7; padding:10px 20px; margin:0 0 15px 0; }

/* -------------------------------------------------------------
   6) GridView va sort belgilari
   Vazifa: matn bo'sh joyi, filterlar o'lchamlari va sort ikonlarini ko'rsatish
------------------------------------------------------------- */
.grid-view td{ white-space:nowrap; }
.grid-view .filters input,
.grid-view .filters select{ min-width:50px; }

/* Sort ikonlari (Glyphicons Halflings) */
a.asc:after, a.desc:after{
  position:relative; top:1px; display:inline-block;
  font-family:'Glyphicons Halflings'; font-style:normal; font-weight:normal; line-height:1; padding-left:5px;
}
a.asc:after{ content:"\e151"; }
a.desc:after{ content:"\e152"; }
.sort-numerical a.asc:after{ content:"\e153"; }
.sort-numerical a.desc:after{ content:"\e154"; }
.sort-ordinal a.asc:after{ content:"\e155"; }
.sort-ordinal a.desc:after{ content:"\e156"; }

/* Ayrim ustunlarda matnni o'rash */
.container_in .grid-view tr > td:nth-child(1),
.container_in .grid-view tr > td:nth-child(2),
.container_in .grid-view tr > td:nth-child(3),
.container_in .grid-view tr > td:nth-child(4){ white-space:normal; }

/* -------------------------------------------------------------
   7) Ichki container (kartochka/box ko'rinishi)
   Vazifa: oq fon, yengil soya, ichki padding
------------------------------------------------------------- */
.container_in{ background-color:#ffffff; padding:15px 15px 5px 20px!important; box-shadow:var(--shadow-soft); margin:15px auto 0; }
.container_in .customTable{ margin-bottom:10px; }

/* Index (page-hero) ichida kartochka/shadow NI O'CHIRISH: input va hujjat ortidagi to'rtburchak ko'rinmasin */
.page-hero.container_in{ background:transparent!important; box-shadow:none!important; }
.page-hero.container_in .paper{ background:transparent!important; box-shadow:none!important; border:0!important; }
.page-hero .vcenter img{ filter:none!important; box-shadow:none!important; }
.page-hero .pinForm{ background:transparent!important; border:0!important; box-shadow:none!important; height:auto!important; position:static!important; padding:0!important; }
.page-hero .pinForm .btn,
.page-hero .pinForm .btn-primary,
.page-hero .pinForm .btn-success{ position:static!important; transform:none!important; margin:0 auto!important; }

/* -------------------------------------------------------------
   8) Turli yordamchi klasslar
   Vazifa: markazlash, chiziqli sarlavha, drop-shadow tasvirga
------------------------------------------------------------- */
.pull-center{ display:table; margin:0 auto; }
.lined_text{ text-align:center; position:relative; margin:20px 0; }
.lined_text span{ background:#fff; position:relative; padding:0 5px; font-size:16px; color:#3b3b3b; z-index:3; }
.lined_text:before{ content:""; border-top:1px solid #ccc; position:absolute; width:100%; height:1px; left:0; top:50%; }

.m_mobile{ display:none!important; }
.darkHeader{ box-shadow:var(--shadow-strong); }

.repo_qr_info{ font-weight:500; line-height:16px; font-size:14px; margin-bottom:25px; color:black; text-align:left; width:100%; margin-top:0; }
.repo_qr_info.qr_blue{ color:#3877B0; }
.dflex_repo_row{ display:flex; display:-webkit-flex; }
.dflex_repo_row .vcenter img{ filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.25)); backdrop-filter: blur(5px); }

/* -------------------------------------------------------------
   9) Fayl GUID input va import tugmasi
   Vazifa: fayl identifikatori uchun input; import tugmasi hover bilan
------------------------------------------------------------- */
#file-guid{
  height:55px; padding:6px 12px; font-size:16px; background-color:#fff;
  border:1px solid #a3c5d8; border-radius:0;
}
#file-guid:focus{
  border-color:#66afe9; outline:0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.jumbo .control-label{ font-size:20px; color:#333333; padding-bottom:8px; padding-top:12px; }

.import{ outline:none!important; border:none; background-color:var(--c-info); color:#ffffff; font-size:40px; padding:8px 20px; transition:all .3s ease; }
.import i{ margin:0 0 0 10px; }
.import:hover{ background-color:#4ea5bf; }

/* -------------------------------------------------------------
   10) PIN forma (markazlash va o'lchamlarni bitta joydan boshqarish)
   Vazifa: tashqi kartochka, input va tugma o'lchamlari custom-variables bilan
------------------------------------------------------------- */
.pinForm{
  /* Tashqi kartochka (ramka) */
  --pin-card-border: 1px;
  --pin-card-radius: 5px;
  --pin-card-width: 280px;  /* 280 px karta eni */
  --pin-card-height:100px;  /* qat'iy balandlik */


  /* Input o'lchamlari */
  --pin-input-width: 250px; /* 280 px input eni */
  --pin-input-max:   280px; /* cap */
  --pin-input-height:44px;     /* so'ralgan balandlik */
  --pin-gap:12px;              /* input va tugma oralig'i */
  --pin-input-pad-v:10px;
  --pin-input-pad-h:12px;
  --pin-input-radius:5px;

  /* Tugma o'lchamlari */
  --pin-btn-width:250px;
  --pin-btn-max:  280px;
  --pin-btn-height:44px;
  --pin-button-radius:5px;

  /* Moslik uchun eski nomlar (fallback) */
  --pin-control-width: var(--pin-input-width);
  --pin-control-max-width: var(--pin-input-max);
  --pin-control-height: var(--pin-input-height);
  --pin-control-gap: var(--pin-gap);

  border: var(--pin-card-border) solid #bdbdbd !important;
  border-radius: var(--pin-card-radius) !important;
  width: var(--pin-card-width);
  height: var(--pin-card-height);
  padding:30px; /* mavjud layoutga mos */
  border-radius:5px; /* tarixiy moslik */
  margin:0 auto; float:none;       /* markazlash */
  position:relative;               /* tugmani pastga biriktirish uchun */
}
.pinForm .form-group{ margin-bottom:8px; }
.pinForm .field-repopinmodel-pin_code{ margin-top:4px !important; }

.pinForm #repopinmodel-pin_code{
  display:block!important;
  width:var(--pin-input-width, var(--pin-control-width))!important;
  max-width:var(--pin-input-max, var(--pin-control-max-width))!important;
  height:var(--pin-input-height, var(--pin-control-height))!important;
  margin:0 auto var(--pin-gap, var(--pin-control-gap))!important;
  padding:var(--pin-input-pad-v) var(--pin-input-pad-h)!important;
  border-radius:var(--pin-input-radius)!important;
  box-sizing:border-box!important;
  text-align:left!important;
}

.pinForm .btn,
.pinForm .btn-primary,
.pinForm .btn-success{
  display:block!important;
  width:var(--pin-btn-width, var(--pin-control-width))!important;
  max-width:var(--pin-btn-max, var(--pin-control-max-width))!important;
  height:var(--pin-btn-height, var(--pin-control-height))!important;
  margin:0 auto!important;
  border-radius:var(--pin-button-radius)!important;
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
}

/* -------------------------------------------------------------
   11) Sarlavha ko'rinishi
   Vazifa: ko'k fonli chiziqli sarlavha
------------------------------------------------------------- */
.title{ font-size:22px; color:#ffffff; background:var(--c-info); display:inline-block; padding:5px 10px; border:1px dashed #53b0cb; }

/* -------------------------------------------------------------
   12) Til (language) droplist va navbar o'lchamlari (desktop default)
   Vazifa: til tugmasi blokini markazlash va dropdown pozitsiyasi
------------------------------------------------------------- */
.lang_part{
  border-radius:4px; position:relative; background:#EDF5FF; padding:0 10px;
  display:flex!important; align-items:center; justify-content:center;
  cursor:pointer; width:auto; min-width:58px; height:70px;
}
.lang_part .col-xs-8{ width:100%; padding:0; height:100%; }
.lang_part a{
  display:flex!important; align-content:center; justify-content:center;
  margin:0; font-size:16px; font-weight:700; text-transform:uppercase; line-height:1; text-decoration:none;
  height:70px; padding-top:26px; padding-left:12px; padding-right:12px; background:transparent;
}
#a_label{ background:transparent; }
.lang_part a span{ margin-top:5px; }
.navbar-right .dropdown-menu{ right:0; left:auto; top:69px; }
.dropdown-menu a{ margin:0; height:auto; padding-top:0; }

/* -------------------------------------------------------------
   13) Media Queries (EKRAN O'LCHAMLARI BIR JOYDA)
   Foydalaniladigan breakpointlar:
   - Telefonlar:        max-width: 575px
   - Kichik planshet:   min-width: 576px va max-width: 767px
   - Mobil umumiy:      max-width: 767px (telefon+kichik planshet uchun umumiy qoidalar)
------------------------------------------------------------- */

/* 13.1) Mobil UMUMIY (<=767px) */
@media (max-width: 767px){
  :root{ --header-h: 56px; --header-gap: 16px; }
  .pinForm{ margin-bottom:25px; border:none!important; box-shadow:none!important; background:transparent!important;
            width:100%!important; max-width:100%!important; height:auto!important; border-radius:0!important; padding:0!important; position:static!important; }
  .pinForm .btn, .pinForm .btn-primary, .pinForm .btn-success{
    position:static!important; transform:none!important; width:100%!important; max-width:100%!important; height:44px!important; margin:0!important; box-sizing:border-box!important;
  }
  /* Input va button kengligi doim teng (<=767px) */
  .pinForm #repopinmodel-pin_code{
    /* Chap tomonni biroz ongga surish uchun */
    width:calc(97% - 8px)!important; max-width:calc(97% - 8px)!important;
    margin-left:15px!important; margin-right:0!important;
    height:44px!important; box-sizing:border-box!important;
    text-align:left!important;
  }
  /* Alert, input va button kengliklari bir xil bo'lsin */
  .page-hero .alert{ width:100%!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; padding-left:12px!important; padding-right:12px!important; }
  /* Alert yopish tugmasini (x) biroz chaproqqa surish */
  .page-hero .alert.alert-dismissible .close{ right:10px!important; top:8px!important; }
  /* Matnlar input chap chetidan boshlansin */
  .page-hero .control-label,
  .page-hero .pin-hint,
  .page-hero #result{ text-align:left!important; margin-left:0!important; padding-left:12px!important; }

  .m_mobile{ display:block!important; }

  /* Desktop navbarni yashirish, faqat mobil navbarni ko'rsatish */
  .another_wrap > nav.navbar-fixed-top:not(.m_mobile){ display:none!important; }

  /* Til menyusi ixchamligi */
  .navbar-nav.navbar-right{ display:block; }
  .lang_part, .lang_part a{ height:56px; padding-top:18px; font-size:14px; }
  .navbar-right .dropdown-menu{ right:0; left:auto; top:56px; }

  /* Rasm va grid joylashuvini markazlash */
  .container_in .col-md-6.vcenter img{ margin:25px auto 0!important; display:block!important; }
  .container_in .row{ display:flex!important; align-items:center!important; justify-content:center!important; flex-direction:column!important; flex-wrap:wrap!important; }
  .container_in .row::before{ display:none!important; }

  /* Brend belgisi va toggle ixchamlash */
  .another_wrap .navbar-brand{ padding:5px 0!important; }
  .another_wrap .navbar-brand img{ width:45px!important; height:auto!important; }
  .another_wrap .navbar-inverse{ min-height:56px; padding-top:0; padding-bottom:0; border:none; }
  .another_wrap .navbar-inverse .navbar-toggle{ margin-right:8px; margin-top:10px; padding:8px 10px; border:none!important; outline:none!important; background:transparent; }
  .another_wrap .navbar-inverse .navbar-toggle .icon-bar{ background-color:var(--c-brand-2); height:3px; }

  /* Kontent yuqori navbar ostida ko'rinishi uchun padding */
  .wrap > .container{ padding-top:14px; padding-left:24px; padding-right:24px; }

  /* Footer va dekorlarni o'chirish */
  footer.footer{ display:none; }
  .wrap{ margin-bottom:0; }
  .container_in{ box-shadow:none; }
  .another_wrap:before{ display:none; }

  .field-repopinmodel-pin_code{ margin-bottom:25px; }
}


/* 13.2) Kichik planshet (576px?767px) */
@media (min-width: 576px) and (max-width: 767px){
  :root{ --header-h: 56px; --header-gap: 16px; }
  /* Make document/image smaller on small tablets (match mobile compact look) */
  .container_in .col-md-6.vcenter img{
    margin:88px auto 0!important; display:block!important; width:220px!important; height:auto!important; max-width:100%!important;
  }
}

/* Narrow range right below desktop breakpoint: make document larger at ~767px */
@media (min-width: 760px) and (max-width: 767px){
  .container_in .col-md-6.vcenter img{
    margin:10px 0 0 0!important; display:block!important;
    width:1440px!important; height:auto!important; max-width:none!important;
    box-shadow: none !important; /* remove shadow to match no-frame look */
  }
  /* remove paper/card background so document shows without frame */
  .page-hero.container_in .paper{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    padding:0 !important;
  }
}

/* 13.3) Telefonlar (<=575px) */
@media (max-width: 575px){
  :root{ --header-h: 56px; --header-gap: 16px; }
  .container_in .col-md-6.vcenter img{
    margin: 88px auto 0!important; display:block!important; width:220px!important; height:auto!important;
  }
}

/* ============================  FAYL OXIRI  ============================ */
/* 13.4) Keng ekranlar (>=768px) uchun header balandligi va qo'shimcha bo'sh joy */
@media (min-width: 768px){
  :root{ --header-h: 90px; --header-gap: 20px; }
  /* Desktopda: input blok (pinForm) atrofida yumaloq burchakli ramka ko'rinsin */
  .page-hero .pinForm{
    background:#fff !important;
    border:1px solid #bdbdbd !important;
    border-radius:5px !important;
    padding:16px !important;
  }
  /* PIN bo'limi matnlarini (sarlavha va hint) karta bilan markazda tekislash */
  .page-hero .repo_qr_info,
  .page-hero .pin-hint{
    text-align:center !important;
    /* Karta kontent eni + 60px padding (30px chap/o'ng) */
    width: calc(var(--pin-card-width) + 60px) !important;
    max-width: 100% !important;
    margin-bottom: 8px !important; /* heading va karta orasidagi bo'shliqni kichraytirish */
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* PIN izoh matni rangini ko'k qilish */
  .page-hero .pin-hint{
    color: #598ebe !important;
  }

/* Alert ichidagi avtorizatsiya havolasini ko'k rangga o'zgartirish */
.page-hero .alert .alert-link,
#authLink{
  color: #598ebe !important;
}
  /* Increase bottom spacing of the button inside pinForm on desktop for better visual spacing */
  .page-hero .pinForm .btn,
  .page-hero .pinForm .btn-primary,
  .page-hero .pinForm .btn-success{
    bottom:24px !important;
  }
}

/* Ensure desktop document/card styling also applies up to 991px so 768-991px shows the large document */
@media (min-width: 768px) and (max-width: 991px){
  /* do not show a framed white paper behind the document; keep document larger */
  .page-hero.container_in .paper{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    padding:0 !important;
  }
  .container_in .col-md-6.vcenter img{
    margin:0px 0 0 0!important; display:block!important;
    width:450px!important; height:auto!important; max-width:none!important;
    box-shadow: none !important; /* no shadow when no frame */
  }
}

/* 13.1) Mobil UMUMIY (<=767px) */
@media (min-width: 768px) and (max-width: 991px){
  :root{ --header-h: 56px; --header-gap: 16px; }
  .pinForm{ margin-bottom:25px; border:none!important; box-shadow:none!important; background:transparent!important;
            width:100%!important; max-width:100%!important; height:auto!important; border-radius:0!important; padding:0!important; position:static!important; }
  .pinForm .btn, .pinForm .btn-primary, .pinForm .btn-success{
    position:static!important; transform:none!important; width:100%!important; max-width:100%!important; height:44px!important; margin:0!important; box-sizing:border-box!important;
  }
  /* Input va button kengligi doim teng (<=767px) */
  .pinForm #repopinmodel-pin_code{
    /* Chap tomonni biroz ongga surish uchun */
    width:calc(97% - 8px)!important; max-width:calc(97% - 8px)!important;
    margin-left:15px!important; margin-right:0!important;
    height:44px!important; box-sizing:border-box!important;
    text-align:left!important;
  }
  /* Alert, input va button kengliklari bir xil bo'lsin */
  .page-hero .alert{ width:100%!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; padding-left:12px!important; padding-right:12px!important; }
  /* Alert yopish tugmasini (x) biroz chaproqqa surish */
  .page-hero .alert.alert-dismissible .close{ right:10px!important; top:8px!important; }
  /* Matnlar input chap chetidan boshlansin */
  .page-hero .control-label,
  .page-hero .pin-hint,
  .page-hero #result{ text-align:left!important; margin-left:0!important; padding-left:12px!important; }

  .m_mobile{ display:block!important; }

  /* Desktop navbarni yashirish, faqat mobil navbarni ko'rsatish */
  .another_wrap > nav.navbar-fixed-top:not(.m_mobile){ display:none!important; }

  /* Til menyusi ixchamligi */
  .navbar-nav.navbar-right{ display:block; }
  .lang_part, .lang_part a{ height:56px; padding-top:18px; font-size:14px; }
  .navbar-right .dropdown-menu{ right:0; left:auto; top:56px; }

  /* Rasm va grid joylashuvini markazlash */
  .container_in .col-md-6.vcenter img{ margin:25px auto 0!important; display:block!important; }
  .container_in .row{ display:flex!important; align-items:center!important; justify-content:center!important; flex-direction:column!important; flex-wrap:wrap!important; }
  .container_in .row::before{ display:none!important; }

  /* Brend belgisi va toggle ixchamlash */
  .another_wrap .navbar-brand{ padding:5px 0!important; }
  .another_wrap .navbar-brand img{ width:45px!important; height:auto!important; }
  .another_wrap .navbar-inverse{ min-height:56px; padding-top:0; padding-bottom:0; border:none; }
  .another_wrap .navbar-inverse .navbar-toggle{ margin-right:8px; margin-top:10px; padding:8px 10px; border:none!important; outline:none!important; background:transparent; }
  .another_wrap .navbar-inverse .navbar-toggle .icon-bar{ background-color:var(--c-brand-2); height:3px; }

  /* Kontent yuqori navbar ostida ko'rinishi uchun padding */
  .wrap > .container{ padding-top:14px; padding-left:24px; padding-right:24px; }

  /* Footer va dekorlarni o'chirish */
  footer.footer{ display:none; }
  .wrap{ margin-bottom:0; }
  .container_in{ box-shadow:none; }
  .another_wrap:before{ display:none; }

  .field-repopinmodel-pin_code{ margin-bottom:25px; }
}


/* For large desktop screens (>=992px): push alert+input area slightly lower and center vertically */
@media (min-width: 992px){
  /* Make the page-hero area take most of the viewport so we can vertically center its columns */
  .page-hero.container_in{
    min-height: calc(100vh - var(--header-h) - 80px);
    display: flex;
    align-items: center; /* vertical center columns */
    justify-content: center; /* keep columns centered horizontally within container */
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }

  /* Ensure the grid columns stack as two columns but center their content vertically */
  .page-hero.container_in .row{
    display:flex;
    align-items:center;
    width:100%;
  }
  .page-hero.container_in .row > [class*="col-"]{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Center the alert and pin form horizontally within the left column and nudge slightly down */
  .page-hero .alert{ margin:60px auto 10px auto; max-width:620px; } /*  elon oynasini uzunligi */
  .page-hero .pinForm{ margin:12px auto 0 auto; float:none; }
  /* Slightly lower the control label/result text to match visual centering */
  .page-hero .control-label,
  .page-hero .pin-hint,
  .page-hero #result{ margin-top:6px; } /* input pastdagi yozuv */

  /* Move the PIN label up so its baseline aligns better with the input start */
  .page-hero .pinForm .control-label{
    margin-top: 0 !important;
    /* Label start = input chap cheti (padding hisobga olinmaydi) */
    margin-left: calc((var(--pin-card-width) - var(--pin-input-width)) / 2) !important;
    padding-left:0 !important;
  }




  /* Keep the left column content centered but push the document (right column) higher */
  .page-hero.container_in .col-md-6.vcenter{ align-self:flex-start !important; margin-top:-140px !important; }
}

/* Add a subtle outer shadow around the document image on larger screens so
   the vertical PIN/name area stands out (matches visual in attachment). */
  @media (min-width: 760px){
  .container_in .col-md-6.vcenter img{
    /* smaller, softer shadow per request */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06) !important;
    border-radius: 4px !important;
    /* keep image crisp when large */
    image-rendering: auto;
  }
}