/* ===================================================================
   AuronSMM — qorong'i mavzu
   Bootstrap 3 komponentlarini qayta bo'yaydi, shuning uchun mavjud
   shablonlarga tegmasdan butun panel yangi ko'rinishga o'tadi.
   =================================================================== */

:root{
  --bg:        #14111c;
  --bg2:       #17131f;
  --surface:   #1e1a29;
  --surface2:  #262133;
  --surface3:  #2d2740;
  --line:      #2f2940;
  --line2:     #3a3350;
  --tx:        #e9e7f0;
  --dim:       #9a94ad;
  --dim2:      #6f6982;
  --acc:       #7c5cff;
  --acc-hi:    #9376ff;
  --acc-dim:   rgba(124,92,255,.14);
  --ok:        #22c55e;
  --ok-dim:    rgba(34,197,94,.14);
  --warn:      #f59e0b;
  --warn-dim:  rgba(245,158,11,.14);
  --err:       #ef4444;
  --err-dim:   rgba(239,68,68,.14);
  --sidebar:   264px;
  --radius:    14px;
  --radius-sm: 10px;
}

*{ -webkit-tap-highlight-color: transparent }

html,body{
  background: var(--bg);
  color: var(--tx);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}
body{ padding: 0; margin: 0 }

a{ color: var(--acc-hi); text-decoration: none }
a:hover,a:focus{ color: var(--acc); text-decoration: none }
hr{ border-color: var(--line) }
small,.small{ color: var(--dim) }
code{ background: var(--surface2); color: #ffb4a2; border: 1px solid var(--line) }
pre{ background: var(--bg2); color: var(--tx); border: 1px solid var(--line); border-radius: var(--radius-sm) }
::selection{ background: var(--acc-dim); color: #fff }

h1,h2,h3,h4,h5,h6{ color: var(--tx); font-weight: 600 }
h1{ font-size: 24px } h2{ font-size: 21px } h3{ font-size: 18px }
h4{ font-size: 16px } h5{ font-size: 15px } h6{ font-size: 14px }

/* ------------------------------------------------------- karkas */
.au-shell{ display: flex; min-height: 100vh; align-items: stretch }

.au-side{
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--bg2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0;
  overflow-y: auto; z-index: 1030;
}
.au-side::-webkit-scrollbar{ width: 6px }
.au-side::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 3px }

.au-main{ flex: 1 1 auto; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column }

/* ------------------------------------------------------- brend */
.au-brand{
  padding: 20px 18px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line);
}
.au-brand img{ max-height: 34px; max-width: 168px }
.au-brand .au-brand-tx{ font-size: 19px; font-weight: 800; letter-spacing: .4px; color: #fff }
.au-brand .au-brand-tx span{ color: var(--acc-hi) }

/* ------------------------------------------------------- profil */
.au-me{ margin: 14px; padding: 15px 12px; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); text-align: center }
.au-me-av{
  width: 44px; height: 44px; margin: 0 auto 9px; border-radius: 50%;
  background: var(--acc-dim); border: 1px solid var(--acc);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--acc-hi);
}
.au-me-name{ font-weight: 600; font-size: 14.5px }
.au-me-mail{ font-size: 11.5px; color: var(--dim2); word-break: break-all; margin-top: 2px }
.au-me-bal{
  margin-top: 11px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--ok-dim); border: 1px solid rgba(34,197,94,.35);
  color: #6ee7a0; font-weight: 700; font-size: 15px;
}
.au-me-bal small{ display: block; color: var(--dim); font-weight: 500; font-size: 10.5px;
                  text-transform: uppercase; letter-spacing: .5px }

/* ------------------------------------------------------- menyu */
.au-nav{ padding: 4px 10px 22px; flex: 1 1 auto }
.au-nav-h{
  padding: 15px 10px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--dim2);
}
.au-nav ul{ list-style: none; padding: 0; margin: 0 }
.au-nav li{ margin-bottom: 2px }
.au-nav li > a{
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--dim); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.au-nav li > a:hover{ background: var(--surface); color: var(--tx) }
.au-nav li.active > a{ background: var(--acc); color: #fff; font-weight: 600 }
.au-nav li.active > a .au-i{ opacity: 1 }
.au-i{ width: 17px; text-align: center; opacity: .75; flex: 0 0 17px }
.au-nav .badge{ margin-left: auto; background: var(--err); color: #fff; font-size: 10.5px }
.au-nav li.active .badge{ background: rgba(0,0,0,.28) }

/* ------------------------------------------------------- yuqori panel */
.au-top{
  height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: var(--bg2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1020;
}
.au-top-title{ font-size: 16.5px; font-weight: 600; margin-right: auto }
.au-burger{
  display: none; background: var(--surface); border: 1px solid var(--line); color: var(--tx);
  width: 38px; height: 38px; border-radius: var(--radius-sm); font-size: 16px; cursor: pointer;
}
.au-chip{
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--ok-dim); border: 1px solid rgba(34,197,94,.4); color: #6ee7a0;
}
.au-ico{
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.au-ico:hover{ color: var(--tx); border-color: var(--line2) }
.au-ico.au-out:hover{ color: var(--err); border-color: var(--err) }

.au-content{ padding: 22px 20px 40px; flex: 1 1 auto }

/* --------------------------------------- Bootstrap konteynerlarini ochamiz */
.container,.container-fluid{ width: auto !important; max-width: 1420px; padding-left: 0; padding-right: 0 }
.navbar{ display: none !important }   /* eski navbar o'rniga yon panel */

/* ------------------------------------------------------- kartochkalar */
.well,.panel,.au-card{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: none; color: var(--tx);
  padding: 18px; margin-bottom: 18px;
}
.panel{ padding: 0 }
.panel-heading{
  background: var(--surface2); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; color: var(--tx);
  padding: 13px 17px; font-weight: 600;
}
.panel-body{ padding: 17px }
.panel-footer{ background: var(--surface2); border-top: 1px solid var(--line);
               border-radius: 0 0 var(--radius) var(--radius); color: var(--dim) }
.panel-default,.panel-primary,.panel-info,.panel-success,.panel-warning,.panel-danger{ border-color: var(--line) }
.panel-title{ font-size: 15px; font-weight: 600 }

.au-card-h{
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--dim2); margin-bottom: 12px;
}

/* ------------------------------------------------------- formalar */
label,.control-label{ color: var(--dim); font-weight: 600; font-size: 12.5px;
                      margin-bottom: 7px; letter-spacing: .2px }
.form-control{
  background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
  border-radius: var(--radius-sm); height: 46px; padding: 10px 14px;
  box-shadow: none; font-size: 14.5px; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus{
  background: var(--bg2); border-color: var(--acc); color: var(--tx);
  box-shadow: 0 0 0 3px var(--acc-dim);
}
.form-control::placeholder{ color: var(--dim2) }
.form-control[readonly],.form-control[disabled]{ background: var(--surface2); color: var(--dim) }
textarea.form-control{ height: auto; min-height: 110px }
select.form-control{ appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239a94ad' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  padding-right: 38px;
}
select.form-control option{ background: var(--surface2); color: var(--tx) }
.form-group{ margin-bottom: 17px }
.input-group-addon{ background: var(--surface2); border-color: var(--line); color: var(--dim) }
.checkbox label,.radio label{ color: var(--dim); font-weight: 500; font-size: 13.5px }
.help-block{ color: var(--dim2); font-size: 12.5px }

/* ------------------------------------------------------- tugmalar */
.btn{
  border-radius: var(--radius-sm); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border: 1px solid transparent; transition: filter .15s, background .15s;
}
.btn:focus,.btn:active:focus{ outline: none; box-shadow: 0 0 0 3px var(--acc-dim) }
.btn-primary{ background: var(--acc); border-color: var(--acc); color: #fff }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background: var(--acc-hi); border-color: var(--acc-hi); color: #fff }
.btn-default{ background: var(--surface2); border-color: var(--line); color: var(--tx) }
.btn-default:hover,.btn-default:focus{ background: var(--surface3); border-color: var(--line2); color: var(--tx) }
.btn-success{ background: var(--ok); border-color: var(--ok); color: #06240f }
.btn-success:hover{ filter: brightness(1.1); color: #06240f }
.btn-danger{ background: var(--err); border-color: var(--err); color: #fff }
.btn-warning{ background: var(--warn); border-color: var(--warn); color: #3b2200 }
.btn-info{ background: var(--surface3); border-color: var(--line2); color: var(--tx) }
.btn-link{ color: var(--acc-hi) }
.btn-xs{ padding: 5px 10px; font-size: 12px }
.btn-sm{ padding: 8px 14px; font-size: 13px }
.btn-lg{ padding: 14px 26px; font-size: 16px }
.btn-block{ width: 100% }

/* ------------------------------------------------------- jadvallar */
.table{ color: var(--tx); margin-bottom: 0 }
.table > thead > tr > th{
  background: var(--surface2); border-bottom: 1px solid var(--line); border-top: 0;
  color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; padding: 12px 14px; white-space: nowrap;
}
.table > tbody > tr > td{ border-top: 1px solid var(--line); padding: 13px 14px; vertical-align: middle }
.table-striped > tbody > tr:nth-of-type(odd){ background: rgba(255,255,255,.017) }
.table-hover > tbody > tr:hover{ background: var(--surface2) }
.table-bordered,.table-bordered > tbody > tr > td,.table-bordered > thead > tr > th{ border-color: var(--line) }
.table-responsive{ border: 0; overflow-x: auto; -webkit-overflow-scrolling: touch }
.au-card > .table-responsive,.panel > .table-responsive{ margin: -18px; width: calc(100% + 36px) }
.panel > .table-responsive{ margin: 0; width: 100% }

/* ------------------------------------------------------- nishonlar */
.label,.badge{ font-weight: 600; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; letter-spacing: .2px }
.label-default,.badge{ background: var(--surface3); color: var(--dim) }
.label-primary{ background: var(--acc-dim); color: var(--acc-hi) }
.label-success{ background: var(--ok-dim); color: #6ee7a0 }
.label-warning{ background: var(--warn-dim); color: #fbbf24 }
.label-danger{ background: var(--err-dim); color: #fca5a5 }
.label-info{ background: rgba(56,189,248,.14); color: #7dd3fc }

/* ------------------------------------------------------- ogohlantirishlar */
.alert{ border-radius: var(--radius); border: 1px solid; padding: 14px 17px; font-size: 14px }
.alert-success{ background: var(--ok-dim); border-color: rgba(34,197,94,.4); color: #6ee7a0 }
.alert-danger,.alert-error{ background: var(--err-dim); border-color: rgba(239,68,68,.4); color: #fca5a5 }
.alert-warning{ background: var(--warn-dim); border-color: rgba(245,158,11,.4); color: #fbbf24 }
.alert-info{ background: var(--acc-dim); border-color: rgba(124,92,255,.4); color: #c4b5fd }
.alert .close{ color: inherit; opacity: .55; text-shadow: none }
.alert .close:hover{ opacity: 1 }
.alert strong{ color: inherit }

/* ------------------------------------------------------- modal */
.modal-content{ background: var(--surface); border: 1px solid var(--line);
                border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.55) }
.modal-header{ border-bottom: 1px solid var(--line); padding: 16px 20px }
.modal-title{ font-weight: 600 }
.modal-body{ padding: 20px }
.modal-footer{ border-top: 1px solid var(--line); padding: 14px 20px }
.modal-backdrop.in{ opacity: .7 }
.close{ color: var(--dim); text-shadow: none; opacity: .8 }
.close:hover{ color: var(--tx); opacity: 1 }

/* ------------------------------------------------------- sahifalash */
.pagination > li > a,.pagination > li > span{
  background: var(--surface); border-color: var(--line); color: var(--dim); margin: 0 3px;
  border-radius: var(--radius-sm) !important; padding: 8px 13px;
}
.pagination > li > a:hover{ background: var(--surface2); border-color: var(--line2); color: var(--tx) }
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover,.pagination > .active > span:hover{
  background: var(--acc); border-color: var(--acc); color: #fff;
}
.pagination > .disabled > span{ background: var(--surface); border-color: var(--line); color: var(--dim2) }

/* ------------------------------------------------------- tablar */
.nav-tabs{ border-bottom: 1px solid var(--line) }
.nav-tabs > li > a{ color: var(--dim); border: 0; border-bottom: 2px solid transparent;
                    border-radius: 0; padding: 11px 16px; font-weight: 600 }
.nav-tabs > li > a:hover{ background: transparent; color: var(--tx); border-bottom-color: var(--line2) }
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{
  background: transparent; color: var(--acc-hi); border: 0; border-bottom: 2px solid var(--acc);
}
.tab-content{ padding-top: 18px }

.dropdown-menu{ background: var(--surface2); border: 1px solid var(--line);
                border-radius: var(--radius-sm); box-shadow: 0 12px 34px rgba(0,0,0,.5); padding: 6px }
.dropdown-menu > li > a{ color: var(--dim); padding: 9px 13px; border-radius: 7px }
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus{ background: var(--surface3); color: var(--tx) }
.dropdown-menu > .active > a{ background: var(--acc); color: #fff }
.dropdown-max-height{ max-height: 320px; overflow-y: auto }

.list-group-item{ background: var(--surface); border-color: var(--line); color: var(--tx) }
.list-group-item.active{ background: var(--acc); border-color: var(--acc) }
.progress{ background: var(--surface2); border-radius: 999px; height: 9px; box-shadow: none }
.progress-bar{ background: var(--acc); box-shadow: none }
.well-sm{ padding: 12px }

/* =============================================== YANGI BUYURTMA sahifasi */
.au-order-grid{ display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 18px; align-items: start }

.au-tabs{ display: flex; gap: 9px; margin-bottom: 16px; flex-wrap: wrap }
.au-tab{
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px;
  border-radius: var(--radius-sm); background: var(--surface2); border: 1px solid var(--line);
  color: var(--dim); font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.au-tab.on{ background: var(--acc-dim); border-color: var(--acc); color: var(--acc-hi) }

/* xizmat tafsilotlari kartochkalari */
.au-det{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 11px }
.au-det-i{
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 13px;
  display: flex; align-items: center; gap: 10px; min-height: 62px;
}
.au-det-ico{
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--acc-dim); color: var(--acc-hi);
}
.au-det-ico.g{ background: var(--ok-dim); color: #6ee7a0 }
.au-det-ico.w{ background: var(--warn-dim); color: #fbbf24 }
.au-det-ico.r{ background: var(--err-dim); color: #fca5a5 }
.au-det-tx{ min-width: 0 }
.au-det-k{ font-size: 10.5px; color: var(--dim2); text-transform: uppercase;
           letter-spacing: .6px; font-weight: 700 }
.au-det-v{ font-size: 13.5px; font-weight: 600; color: var(--tx);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.au-note{
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px; font-size: 13.5px;
  color: var(--dim); max-height: 320px; overflow-y: auto; line-height: 1.6;
}
.au-note::-webkit-scrollbar{ width: 6px }
.au-note::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 3px }

.au-side-btn{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; margin-bottom: 11px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--acc);
  color: var(--tx); font-weight: 600; font-size: 14px;
}
.au-side-btn:hover{ background: var(--acc-dim); color: #fff }
.au-side-btn .au-i{ color: var(--acc-hi) }

.au-minmax{ font-size: 12.5px; color: var(--acc-hi); font-weight: 600; margin-top: -8px; margin-bottom: 15px }

/* ===================================================================
   OMMAVIY SAYT (mehmon)
   =================================================================== */
.au-pub{ min-height: 100vh; display: flex; flex-direction: column }
.au-pub-in{ width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px }
.au-pub-main{ flex: 1 1 auto }

/* ---------------------------------------------- yuqori panel */
.au-pub-top{
  position: sticky; top: 0; z-index: 1030;
  background: rgba(20,17,28,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.au-pub-top .au-pub-in{ display: flex; align-items: center; gap: 16px; height: 68px }
.au-pub-logo{ font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .3px; flex-shrink: 0 }
.au-pub-logo:hover{ color: #fff }
.au-pub-logo img{ max-height: 40px; max-width: 190px }

.au-pub-nav{ display: flex; align-items: center; gap: 6px; margin-left: auto }
.au-pub-nav > a{
  padding: 9px 13px; border-radius: var(--radius-sm);
  color: var(--dim); font-size: 14px; font-weight: 500;
}
.au-pub-nav > a:hover{ background: var(--surface); color: var(--tx) }
.au-pub-nav > a.on{ color: var(--acc-hi) }

.au-pub-cta{
  padding: 10px 18px !important; border-radius: var(--radius-sm);
  background: var(--acc); color: #fff !important; font-weight: 600; font-size: 14px;
  margin-left: 4px;
}
.au-pub-cta:hover{ background: var(--acc-hi); color: #fff !important }
.au-pub-cta.ghost{ background: transparent; border: 1px solid var(--line2); color: var(--tx) !important }
.au-pub-cta.ghost:hover{ background: var(--surface); border-color: var(--acc) }

.au-pub-burger{
  display: none; margin-left: auto; width: 42px; height: 42px;
  background: var(--acc); border: 0; border-radius: var(--radius-sm);
  color: #fff; font-size: 17px; cursor: pointer;
}

/* ---------------------------------------------- hero */
.au-hero{ padding: 56px 0 44px; position: relative; overflow: hidden }
.au-hero::before{
  content: ""; position: absolute; top: -180px; left: 50%; width: 780px; height: 480px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(124,92,255,.20), transparent 68%);
}
.au-hero-in{ display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 44px; align-items: center; position: relative }
.au-hero-tx h1{ font-size: 40px; line-height: 1.2; font-weight: 800; margin: 0 0 16px }
.au-hero-tx h1 span{ color: var(--acc-hi) }
.au-hero-p{ font-size: 16px; color: var(--dim); line-height: 1.65; margin: 0 0 26px; max-width: 560px }

.au-stats{ display: flex; gap: 12px; flex-wrap: wrap }
.au-stat{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 20px; min-width: 130px;
}
.au-stat b{ display: block; font-size: 25px; font-weight: 800; color: var(--acc-hi); line-height: 1.2 }
.au-stat span{ font-size: 11.5px; color: var(--dim2); text-transform: uppercase;
               letter-spacing: .6px; font-weight: 600 }

.au-hero-form .au-card{ padding: 24px; margin: 0 }

.au-auth-tabs{ display: flex; gap: 6px; margin-bottom: 20px; background: var(--bg2);
               padding: 5px; border-radius: var(--radius-sm) }
.au-auth-tabs a{
  flex: 1; text-align: center; padding: 10px; border-radius: 8px;
  color: var(--dim); font-weight: 600; font-size: 14px;
}
.au-auth-tabs a:hover{ color: var(--tx) }
.au-auth-tabs a.on{ background: var(--acc); color: #fff }
.au-mini{ font-size: 12.5px; color: var(--acc-hi) }

/* ---------------------------------------------- bo'limlar */
.au-sec{ padding: 52px 0 }
.au-sec.alt{ background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.au-sec-t{ font-size: 27px; font-weight: 800; text-align: center; margin: 0 0 32px }

.au-steps{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px }
.au-step{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 18px; text-align: center;
}
.au-step-n{
  width: 38px; height: 38px; margin: 0 auto 13px; border-radius: 50%;
  background: var(--acc-dim); border: 1px solid var(--acc); color: var(--acc-hi);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
}
.au-step-t{ font-size: 15.5px; font-weight: 700; margin-bottom: 6px }
.au-step-c{ font-size: 13px; color: var(--dim); line-height: 1.5 }

.au-svc{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px }
.au-svc-i{
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.au-svc-id{
  background: var(--acc-dim); color: var(--acc-hi); border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.au-svc-tx{ min-width: 0; flex: 1 }
.au-svc-n{ font-size: 14px; font-weight: 600; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap }
.au-svc-c{ font-size: 12px; color: var(--dim2); margin-top: 2px }
.au-svc-p{ text-align: right; flex-shrink: 0 }
.au-svc-p b{ display: block; font-size: 15px; font-weight: 700; color: #6ee7a0 }
.au-svc-p span{ font-size: 10.5px; color: var(--dim2) }

.au-pay{ display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px }
.au-pay-i{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 14px; text-align: center; color: var(--dim); font-weight: 600; font-size: 14px;
}
.au-pay-i i{ display: block; font-size: 24px; color: var(--acc-hi); margin-bottom: 9px }

.au-why{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px }
.au-why-i{
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; font-size: 14px; color: var(--tx);
}
.au-why-i i{ color: var(--ok); flex-shrink: 0 }

/* ---------------------------------------------- pastki qism */
.au-pub-foot{ border-top: 1px solid var(--line); background: var(--bg2); padding: 32px 0 }
.au-pub-foot .au-pub-in{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
.au-foot-brand{ font-size: 17px; font-weight: 800; color: #fff }
.au-foot-brand img{ max-height: 32px }
.au-foot-nav{ display: flex; gap: 16px; flex-wrap: wrap; margin: 0 auto }
.au-foot-nav a{ color: var(--dim); font-size: 13.5px }
.au-foot-nav a:hover{ color: var(--tx) }
.au-foot-c{ font-size: 12.5px; color: var(--dim2) }

/* ---------------------------------------------- pastki qat'iy panel (telefon) */
.au-bar{
  display: none; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 1040;
  background: rgba(30,26,41,.97); backdrop-filter: blur(10px);
  border: 1px solid var(--acc); border-radius: 16px; padding: 6px;
}
.au-bar a{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border-radius: 11px; color: var(--dim); font-size: 11px; font-weight: 600;
}
.au-bar a i{ font-size: 17px }
.au-bar a.on{ color: var(--acc-hi) }

.au-up{
  position: fixed; right: 16px; bottom: 16px; z-index: 1035;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--acc); color: #fff; font-size: 19px; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  box-shadow: 0 8px 22px rgba(124,92,255,.4);
}
.au-up.on{ opacity: 1; pointer-events: auto }

@media (max-width: 940px){
  .au-hero-in{ grid-template-columns: minmax(0,1fr); gap: 30px }
  .au-hero-tx h1{ font-size: 31px }
  .au-steps{ grid-template-columns: repeat(2,minmax(0,1fr)) }
  .au-svc{ grid-template-columns: minmax(0,1fr) }
  .au-why{ grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media (max-width: 768px){
  .au-pub-burger{ display: inline-flex; align-items: center; justify-content: center }
  .au-pub-nav{
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 12px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
  }
  .au-pub-nav.on{ display: flex }
  .au-pub-nav .au-lang{ margin: 6px 0 }
  .au-pub-cta{ text-align: center }
  .au-bar{ display: flex }
  .au-pub-foot{ padding-bottom: 92px }
  .au-up{ bottom: 84px }
  .au-hero{ padding: 34px 0 30px }
  .au-sec{ padding: 38px 0 }
  .au-sec-t{ font-size: 22px; margin-bottom: 24px }
  .au-foot-nav{ margin: 0 }
  .au-pub-foot .au-pub-in{ flex-direction: column; text-align: center }
}
@media (max-width: 480px){
  .au-steps,.au-why{ grid-template-columns: minmax(0,1fr) }
  .au-hero-tx h1{ font-size: 26px }
  .au-stat{ flex: 1; min-width: 0 }
}

/* ------------------------------------------------------- mobil */
.au-ovl{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1029 }
.au-ovl.on{ display: block }

@media (max-width: 1100px){
  .au-order-grid{ grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 991px){
  .au-side{ transform: translateX(-100%); transition: transform .22s ease }
  .au-side.on{ transform: translateX(0) }
  .au-main{ margin-left: 0 }
  .au-burger{ display: inline-flex; align-items: center; justify-content: center }
  .au-top{ padding: 0 14px }
  .au-content{ padding: 16px 14px calc(104px + env(safe-area-inset-bottom, 0px)) }   /* pastki panel uchun joy */
  .au-top-title{ font-size: 15px }
  .au-tabbar{ display: flex }
}
@media (max-width: 560px){
  .au-det{ grid-template-columns: minmax(0,1fr) }
  .au-chip{ padding: 0 11px; font-size: 13px }
  .au-top{ gap: 8px }
  .btn{ padding: 10px 16px }
}

/* ------------------------------------------------------- chiroyli ro'yxat */
.au-sel{ position: relative }
.au-sel-native{
  position: absolute !important; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}
.au-sel-btn{
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
  border-radius: var(--radius-sm); min-height: 46px; padding: 11px 14px;
  font-size: 14.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.au-sel-btn:hover{ border-color: var(--line2) }
.au-sel.on .au-sel-btn{ border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-dim) }
.au-sel-lbl{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.au-sel-car{ color: var(--dim2); font-size: 15px; transition: transform .18s; flex-shrink: 0 }
.au-sel.on .au-sel-car{ transform: rotate(180deg); color: var(--acc-hi) }

.au-sel-menu{
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--surface2); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
}
.au-sel.on .au-sel-menu{ display: block }
.au-sel-menu::-webkit-scrollbar{ width: 7px }
.au-sel-menu::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 4px }

.au-sel-i{
  width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  background: transparent; border: 0; border-radius: 9px;
  padding: 11px 12px; color: var(--dim); font-size: 13.5px; line-height: 1.45;
  cursor: pointer; border-left: 3px solid transparent;
}
.au-sel-i:hover{ background: var(--surface3); color: var(--tx) }
/* DIQQAT: `:not(.au-sel-pre)` shart — aks holda bu qoida nishoncha
   spanini ham ushlab, uni butun kenglikka cho'zib yuboradi. */
.au-sel-i > span:not(.au-sel-pre){ flex: 1; min-width: 0; word-break: break-word }
.au-sel-i i{ opacity: 0; color: var(--acc-hi); font-size: 12px; margin-top: 3px; flex-shrink: 0 }
.au-sel-i.on{
  background: var(--acc-dim); color: var(--acc-hi);
  border-left-color: var(--acc); font-weight: 600;
}
.au-sel-i.on i{ opacity: 1 }

/* ------------------------------------------------------- tez tugmalar */
.au-quick{ display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }
.au-quick-b{
  flex: 1 1 190px; display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--acc);
  color: var(--tx); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: background .15s;
}
.au-quick-b:hover{ background: var(--acc-dim) }
.au-quick-b i{ color: var(--acc-hi); font-size: 15px }
.au-quick-n{
  margin-left: auto; background: var(--acc); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
}

/* ------------------------------------------------------- xizmat qidiruvi */
.au-search-row{ display: flex; gap: 10px; margin-bottom: 16px; align-items: stretch }
.au-search-row .au-search{ flex: 1; margin-bottom: 0 }
.au-filter{
  flex: 0 0 48px; width: 48px; border: 0; border-radius: var(--radius-sm);
  background: var(--acc); color: #fff; font-size: 17px; cursor: pointer;
}
.au-filter:hover{ background: var(--acc-hi) }

.au-search{ position: relative; margin-bottom: 16px }
.au-search .form-control{ padding-left: 42px; padding-right: 42px; height: 48px }
.au-search-i{
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--dim2); font-size: 15px; pointer-events: none;
}
.au-search-x{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim2); cursor: pointer; display: none;
}
.au-search-x:hover{ background: var(--surface3); color: var(--tx) }
.au-search.has .au-search-x{ display: inline-flex; align-items: center; justify-content: center }

.au-hit{
  float: right; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--acc-hi); text-transform: none;
}
.au-hit.none{ color: var(--err) }

/* ------------------------------------------------------- yangiliklar */
.au-side-btn-n{
  margin-left: auto; background: var(--acc); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
}
.au-news{ max-height: 340px; overflow-y: auto }
.au-news::-webkit-scrollbar{ width: 6px }
.au-news::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 3px }
.au-news-i{
  display: flex; gap: 11px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.au-news-i:last-child{ border-bottom: 0; padding-bottom: 0 }
.au-news-i:first-child{ padding-top: 0 }
.au-news-ico{
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  background: var(--acc-dim); color: var(--acc-hi);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.au-news-tx{ min-width: 0 }
.au-news-t{ font-size: 13.5px; font-weight: 600; color: var(--tx); margin-bottom: 3px }
.au-news-c{ font-size: 12.5px; color: var(--dim); line-height: 1.5; word-break: break-word }
.au-news-d{ font-size: 11px; color: var(--dim2); margin-top: 5px }

/* ------------------------------------------------------- til tanlash */
.au-lang{ position: relative; margin-top: 10px }
.au-lang-btn{
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.au-lang-btn:hover{ color: var(--tx); border-color: var(--line2) }
.au-lang-btn span{ flex: 1; text-align: left; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap }
.au-lang-caret{ transition: transform .18s; font-size: 14px }
.au-lang.on .au-lang-caret{ transform: rotate(180deg) }
.au-lang.on .au-lang-btn{ border-color: var(--acc); color: var(--tx) }

.au-lang-menu{
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--surface2); border: 1px solid var(--line2);
  border-radius: var(--radius-sm); padding: 5px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  display: none; max-height: 260px; overflow-y: auto;
}
.au-lang.on .au-lang-menu{ display: block }
.au-lang-menu a{
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--dim); font-size: 13px; font-weight: 500;
}
.au-lang-menu a:hover{ background: var(--surface3); color: var(--tx) }
.au-lang-menu a.on{ background: var(--acc); color: #fff; font-weight: 600 }
.au-lang-tick{ opacity: 0; font-size: 11px; width: 12px; flex: 0 0 12px }
.au-lang-menu a.on .au-lang-tick{ opacity: 1 }
.au-lang-menu::-webkit-scrollbar{ width: 6px }
.au-lang-menu::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 3px }

/* ------------------------------------------------------- pastki panel (kirgan holat) */
.au-tabbar{
  display: none; position: fixed; left: 8px; right: 8px; z-index: 1040;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(30,26,41,.97); backdrop-filter: blur(12px);
  border: 1px solid var(--line2); border-radius: 18px;
  padding: 6px 6px 5px; align-items: flex-end;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.au-tabbar > a{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px; border-radius: 12px; min-width: 0;
  color: var(--dim); font-size: 10.5px; font-weight: 600; text-align: center;
}
.au-tabbar > a i{ font-size: 17px }
.au-tabbar > a span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.au-tabbar > a.on{ color: var(--acc-hi) }
.au-tabbar > a:active{ background: var(--surface2) }

.au-tabbar-c{
  flex: 0 0 58px !important; width: 58px; height: 58px; margin: -22px 4px 0;
  border-radius: 50%; background: var(--acc); color: #fff !important;
  display: flex !important; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(124,92,255,.55); border: 3px solid var(--bg);
}
.au-tabbar-c i{ font-size: 22px !important }
.au-tabbar-c:hover{ background: var(--acc-hi); color: #fff !important }

/* Bu qoida yuqoridagi `display: none` dan KEYIN turishi SHART: ikkalasining
   ogirligi bir xil, shuning uchun keyingisi golib keladi. Avval bu qoida
   546-satrdagi media blokda edi va panel telefonda umuman korinmasdi. */
@media (max-width: 991px){ .au-tabbar{ display: flex } }

/* ------------------------------------------------------- yon panelni yig'ish */
.au-fold{
  background: var(--surface); border: 1px solid var(--line); color: var(--dim);
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  font-size: 17px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: color .15s, border-color .15s;
}
.au-fold:hover{ color: var(--tx); border-color: var(--line2) }
.au-fold i{ transition: transform .2s }

.au-side{ transition: transform .22s ease }
.au-main{ transition: margin-left .22s ease }

/* Yig'ish faqat kompyuterda — telefonda burger tugma ishlatiladi */
@media (min-width: 992px){
  body.au-folded .au-side{ transform: translateX(-100%) }
  body.au-folded .au-main{ margin-left: 0 }
  body.au-folded .au-fold i{ transform: rotate(180deg) }
}
@media (max-width: 991px){
  .au-fold{ display: none }
}

/* ------------------------------------------------------- yordamchilar */
.au-mt0{ margin-top: 0 } .au-mb0{ margin-bottom: 0 }
.au-muted{ color: var(--dim) }
.au-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.au-spacer{ margin-left: auto }
.text-muted{ color: var(--dim) !important }
.text-success{ color: #6ee7a0 !important }
.text-danger{ color: #fca5a5 !important }
.text-warning{ color: #fbbf24 !important }
.text-info{ color: #7dd3fc !important }
.text-primary{ color: var(--acc-hi) !important }

/* ------------------------------------- forma boyitmalari (Paste, Min/Max) */
/* Link qatori: maydon + Paste tugmasi yonma-yon */
.au-link-row{ display: flex; gap: 8px; align-items: stretch }
.au-link-row > input{ flex: 1 1 auto; min-width: 0 }
.au-paste{
  flex: 0 0 auto; padding: 0 16px; white-space: nowrap;
  background: var(--surface2); border: 1px solid var(--line2);
  border-radius: var(--radius-sm); color: var(--tx);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.au-paste:hover{ border-color: var(--acc); color: var(--acc-hi) }
.au-paste:active{ background: var(--surface) }

/* Min/Max raqamlari bosiladi -> Quantity ga tushadi */
.au-mm{
  color: var(--acc-hi); font-weight: 700; cursor: pointer;
  border-bottom: 1px dashed var(--acc);
}
.au-mm:hover{ color: #fff; border-bottom-color: #fff }

/* Ro'yxatdagi nishonchalar: platforma belgisi va xizmat raqami */
.au-sel-pre{ flex: 0 0 auto; display: flex; align-items: center; gap: 7px }
.au-sel-pre:empty{ display: none }
.au-sel-ic{ color: var(--acc-hi); font-size: 15px }
.au-sel-em{ font-size: 15px; line-height: 1 }   /* emoji belgi */
.au-sel-img{ width: 18px; height: 18px; object-fit: contain; border-radius: 4px }
.au-sel-id{
  display: inline-flex; align-items: center; padding: 1px 7px;
  background: var(--surface2); border: 1px solid var(--line2);
  border-radius: 6px; color: var(--dim);
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
}
.au-sel-i .au-sel-pre{ margin-top: 1px }

/* Faol pastki tugma aniq ko'rinsin */
.au-tabbar > a.on{ background: var(--acc-dim) }

/* ------------------------------------------------ balans valyutasi */
/* Almashtirish faqat KO'RSATISH uchun: hisob-kitob va to'lovlar
   hamon sayt valyutasida (settings.site_currency) boradi. */
.au-cur{ position: relative }
.au-cur-btn{ cursor: pointer; font-family: inherit; line-height: 1 }
.au-cur-btn:hover{ border-color: rgba(34,197,94,.75) }
.au-cur-car{ font-size: 13px; opacity: .75; transition: transform .18s }
.au-cur.on .au-cur-car{ transform: rotate(180deg) }

.au-cur-menu{
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 180px; z-index: 1060;
  background: var(--surface2); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.au-cur.on .au-cur-menu{ display: block }
.au-cur-h{
  padding: 8px 10px 10px; font-size: 15px; font-weight: 800; color: var(--tx);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.au-cur-list{ max-height: 260px; overflow-y: auto; overscroll-behavior: contain }
.au-cur-list::-webkit-scrollbar{ width: 7px }
.au-cur-list::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 4px }
.au-cur-menu::-webkit-scrollbar{ width: 7px }
.au-cur-menu::-webkit-scrollbar-thumb{ background: var(--line2); border-radius: 4px }

.au-cur-i{
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; background: none; border-radius: 8px;
  color: var(--tx); font-size: 13.5px; font-family: inherit;
  text-align: left; cursor: pointer;
}
.au-cur-i:hover{ background: var(--surface) }
.au-cur-code{ flex: 1; min-width: 0; font-weight: 700; letter-spacing: .3px }
.au-cur-sym{ flex: 0 0 auto; color: var(--dim); font-size: 13px }
.au-cur-tick{ flex: 0 0 auto; opacity: 0; color: var(--acc-hi) }
.au-cur-i.on{ background: var(--acc-dim); color: var(--acc-hi) }
.au-cur-i.on .au-cur-tick{ opacity: 1 }

/* telefonda menyu ekrandan chiqib ketmasin */
@media (max-width: 560px){
  .au-cur-menu{ min-width: 160px }
}