/* makonn.css — MAKONN umumiy dizayn (hamma sahifa shuni ulaydi) */
:root {
    --mk-accent: #0084ff;
    --mk-accent-hover: #0070d9;
    --mk-header-h: 56px;
    --mk-btn-size: 40px;
    --mk-content-max: 960px;
    --mk-gutter: 16px;
    --mk-radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
body {
    position: fixed; inset: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.45;
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1c1e21);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
button, input, textarea { font: inherit; color: inherit; }

/* Asosiy qobiq — telefonda ham, kompyuterda ham to'liq ekran */
.mk-app {
    display: flex; flex-direction: column;
    width: 100%; height: 100vh; height: 100dvh;
    background: var(--bg-card, #ffffff);
    overflow: hidden;
}

/* HEADER — hamma sahifada bir xil */
.mk-header {
    flex-shrink: 0; position: relative; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    height: calc(var(--mk-header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(12px, env(safe-area-inset-left), calc((100% - var(--mk-content-max)) / 2));
    padding-right: max(12px, env(safe-area-inset-right), calc((100% - var(--mk-content-max)) / 2));
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, #e4e6eb);
}
.mk-header__title {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--mk-header-h); line-height: var(--mk-header-h);
    margin: 0; padding: 0 72px;
    text-align: center; font-size: 17px; font-weight: 700;
    color: var(--text-primary, #1c1e21);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.mk-icon-btn {
    position: relative; z-index: 1;
    width: var(--mk-btn-size); height: var(--mk-btn-size); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: 50%;
    background: var(--bg-btn, #f0f2f5);
    color: var(--text-primary, #1c1e21);
    text-decoration: none; cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.mk-icon-btn:hover { background: var(--bg-btn-hover, #e4e6eb); }
.mk-icon-btn:active { transform: scale(0.92); }
.mk-icon-btn svg { width: 22px; height: 22px; display: block; }
.mk-icon-btn--spacer { visibility: hidden; pointer-events: none; }

/* Scroll bo'ladigan kontent */
.mk-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-top: 16px; padding-bottom: 16px;
    padding-left: max(var(--mk-gutter), calc((100% - var(--mk-content-max)) / 2));
    padding-right: max(var(--mk-gutter), calc((100% - var(--mk-content-max)) / 2));
    background: var(--content-bg, #f0f2f5);
}

/* Pastki yozish paneli */
.mk-composer {
    flex-shrink: 0;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left), calc((100% - var(--mk-content-max)) / 2));
    padding-right: max(12px, env(safe-area-inset-right), calc((100% - var(--mk-content-max)) / 2));
    background: var(--bg-card, #ffffff);
    border-top: 1px solid var(--border-color, #e4e6eb);
}
.mk-composer__box {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 4px 4px 4px 16px;
    background: var(--search-box-bg, #f0f2f5);
    border-radius: 24px;
}
.mk-composer__input {
    flex: 1; min-width: 0;
    padding: 9px 0; border: none; outline: none; background: transparent;
    font-size: 16px; line-height: 22px;
    color: var(--text-primary, #1c1e21);
    resize: none; -webkit-appearance: none; appearance: none;
}
textarea.mk-composer__input { min-height: 40px; max-height: 120px; field-sizing: content; overflow-y: auto; }
.mk-composer__input::placeholder { color: var(--text-secondary, #65676b); }
.mk-send {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: 50%;
    background: var(--mk-accent); color: #ffffff;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.mk-send:hover { background: var(--mk-accent-hover); }
.mk-send:active { transform: scale(0.92); }
.mk-send:disabled { opacity: 0.5; cursor: default; }
.mk-send svg { width: 20px; height: 20px; display: block; }

.mk-state { margin: 40px auto; text-align: center; font-size: 14px; color: var(--text-secondary, #65676b); }
.mk-scroll::-webkit-scrollbar { width: 8px; }
.mk-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }

/* Pastki qotib turadigan panel (Saqlash tugmasi uchun) */
.mk-footer {
    flex-shrink: 0;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: max(16px, calc((100% - var(--mk-content-max)) / 2));
    padding-right: max(16px, calc((100% - var(--mk-content-max)) / 2));
    background: var(--bg-card, #ffffff);
    border-top: 1px solid var(--border-color, #e4e6eb);
}
/* ===== KLAVIATURA (makonn.js bilan birga ishlaydi) ===== */
/* Sahifa doim ekranning ko'rinib turgan qismiga teng bo'ladi (iPhone'da ham) */
.mk-app {
    position: relative;
    top: var(--mk-vv-top, 0px);
    height: var(--mk-vh, 100dvh);
}
/* Klaviatura ochiq paytda joyni tejaymiz */
.mk-kb-open .mk-footer { display: none; }
.mk-kb-open .fb-summary { max-height: 0; opacity: 0; }
.mk-kb-open .ad-banner { display: none; }
.mk-kb-open .mk-composer,
.mk-kb-open .chat-input-box { padding-bottom: 10px; }

/* =========================================================
   PROFIL SAHIFALARI — Savdo profili va Mutaxassis profili
   Ikkala sahifa bir xil ko'rinadi: <div class="mk-app mk-profile">
   ========================================================= */

/* Header: o'ngda 2 ta tugma (saqlash + menyu) */
.mk-profile .mk-header__title { padding: 0 104px; }
.mk-profile .nav-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.mk-profile .save-btn { font-size: 19px; line-height: 1; }
.mk-profile .save-btn.saved { color: #ff2e4c; }
.mk-profile .menu-wrap { position: relative; }
.mk-profile .menu-dropdown {
    position: absolute; top: 48px; right: 0; z-index: 1000;
    display: none; flex-direction: column; min-width: 190px; padding: 6px;
    background: #ffffff; border: 1px solid #e4e6eb; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.mk-profile .menu-dropdown.active { display: flex; }
.mk-profile .dropdown-item { padding: 12px 14px; border: none; border-radius: 10px; background: none; text-align: left; font-size: 15px; font-weight: 500; color: #333; cursor: pointer; }
.mk-profile .dropdown-item:hover { background: #f0f2f5; }

/* Butun profil scroll bo'ladi */
.mk-profile .profile-scroll { padding: 0 !important; background: #f3f5f8; }
.mk-profile .profile-inner { display: flex; flex-direction: column; min-height: 100%; }

/* Profil kartasi — yuqorida och ko'k fon */
.mk-profile .store-header,
.mk-profile .profile-header {
    display: flex; align-items: center; gap: 14px;
    padding: 20px max(16px, calc((100% - 960px) / 2)) 14px;
    background: linear-gradient(180deg, #e3f0ff 0%, #ffffff 100%);
}
.mk-profile .store-header { justify-content: space-between; }
.mk-profile .store-left-side { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Rasm: oq hoshiya + ko'k halqa */
.mk-profile .store-img,
.mk-profile .profile-avatar {
    width: 78px; height: 78px; flex-shrink: 0; overflow: hidden; object-fit: cover;
    border-radius: 50%; background: #dde3ea;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px #0084ff, 0 6px 16px rgba(0,132,255,0.22);
}
.mk-profile .store-img img { width: 100%; height: 100%; object-fit: cover; }
.mk-profile .store-info,
.mk-profile .profile-info { min-width: 0; }

/* 1-qator: asosiy nom (qalin, to'q) */
.mk-profile .store-info h2,
.mk-profile .profile-info .profile-job {
    margin: 0 0 3px; font-size: 19px; font-weight: 800; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 2-qator: egasi / ismi */
.mk-profile .store-info .owner-name,
.mk-profile .profile-info h2 {
    margin: 0 0 6px; font-size: 14px; font-weight: 500; color: #4b5563;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Faoliyat — ko'k belgi */
.mk-profile .store-info .store-activity {
    display: inline-block; margin: 0 0 6px; padding: 3px 10px;
    border-radius: 999px; background: #e3f0ff; color: #0070d9; font-size: 12px; font-weight: 700;
}
.mk-profile .store-info .store-activity:empty,
.mk-profile .store-info .owner-name:empty { display: none; }
/* Bio */
.mk-profile .profile-info p {
    margin: 0 0 6px; font-size: 13px; color: #6b7280;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Yulduzlar */
.mk-profile .stars,
.mk-profile .rating { font-size: 15px; letter-spacing: 1px; color: #f59e0b; }

.mk-profile .store-insta-btn {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #ffffff; font-size: 20px; text-decoration: none;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 4px 10px rgba(221,42,123,0.3);
}

/* ===== 3 ta tugma — ikkala sahifada bir xil rang ===== */
.mk-profile .action-buttons { display: flex; gap: 8px; padding: 2px max(16px, calc((100% - 960px) / 2)) 16px; background: #ffffff; }
.mk-profile .action-btn {
    flex: 1; min-width: 0; height: 46px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 14px;
    font-size: 14px; font-weight: 700; text-align: center; text-decoration: none;
    white-space: nowrap; cursor: pointer; transition: transform 0.1s;
}
.mk-profile .action-btn:active { transform: scale(0.97); }
/* Bog'lanish — yashil (ichidagi "Qo'ng'iroq qilish" tugmasi bilan bir xil) */
.mk-profile .btn-contact,
.mk-profile .btn-call {
    background: linear-gradient(135deg, #2e7d32, #43a047); color: #ffffff;
    box-shadow: 0 4px 12px rgba(46,125,50,0.28);
}
/* Xarita — ko'k (ichidagi "Chat" tugmasi bilan bir xil) */
.mk-profile .btn-map {
    background: linear-gradient(135deg, #0084ff, #00c6ff); color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,132,255,0.28);
}
/* Fikrlar — oq */
.mk-profile .btn-review,
.mk-profile .btn-reviews {
    background: #ffffff; color: #1f2937;
    border: 1.5px solid #9ca3af;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
@media (max-width: 360px) { .mk-profile .action-btn { font-size: 12px; } }

/* ===== Tablar ===== */
.mk-profile .section-tabs {
    position: sticky; top: 0; z-index: 5;
    display: flex; overflow-x: auto; scrollbar-width: none;
    padding: 0 max(0px, calc((100% - 960px) / 2));
    background: #ffffff; border-top: 1px solid #eef0f3; border-bottom: 1px solid #e4e6eb;
}
.mk-profile .section-tabs::-webkit-scrollbar { display: none; }
.mk-profile .tab-btn {
    flex: 1 0 auto; height: 46px; padding: 0 14px;
    border: none; border-bottom: 3px solid transparent; background: none;
    color: #6b7280; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.mk-profile .tab-btn.active { color: #0084ff; border-bottom-color: #0084ff; }

/* ===== Tovar / Xizmat qatorlari — bir xil ===== */
.mk-profile .product-list-item,
.mk-profile .service-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; margin-bottom: 10px;
    background: #ffffff; border-left: 4px solid #0084ff; border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mk-profile .product-list-item h4,
.mk-profile .service-name { margin: 0; font-size: 15px; font-weight: 600; color: #1f2937; }
.mk-profile .product-list-item span,
.mk-profile .service-price { font-size: 15px; font-weight: 800; color: #16a34a; white-space: nowrap; }

/* =========================================================
   KICHIK TELEFONLAR VA UMUMIY TUZATISHLAR
   ========================================================= */
/* Vaqt/sana maydonlari tor ekranda chetdan chiqib ketmasin */
input[type="time"], input[type="date"] { min-width: 0; }

/* ≤380px: header'dagi matnli tugma (Saqlash / Keyingi) va sarlavha ixchamroq */
@media (max-width: 380px) {
    .mk-header .save-btn:not(.mk-icon-btn) { padding: 0 8px 0 12px; font-size: 14px; }
    .mk-header:has(> .save-btn:not(.mk-icon-btn)) .mk-header__title { padding: 0 100px; font-size: 15px; }
}

/* Profil tablari: 4 tasi ham telefonda bitta qatorga sig'adi (ikonka tepada, nom pastda) */
.mk-profile .tab-btn {
    flex: 1 1 0; min-width: 0; height: 56px; padding: 0 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 12px; overflow: hidden; text-overflow: ellipsis;
}
.mk-profile .tab-btn .tab-ic { font-size: 18px; line-height: 1; }
@media (min-width: 600px) {
    .mk-profile .tab-btn { flex-direction: row; gap: 6px; height: 48px; font-size: 14px; }
    .mk-profile .tab-btn .tab-ic { font-size: 16px; }
}

/* Savdo profili: uzun "Faoliyati" matni ko'k pufakka aylanib ketmasin — 2 qator, keyin "..." */
.mk-profile .store-info .store-activity {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 100%; border-radius: 10px; line-height: 1.35;
}
/* === MANZIL TANLAGICH (location-picker.js) === */
.loc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .loc-grid { grid-template-columns: 1fr 1fr 1fr; } }
.loc-field {
    width: 100%; min-height: 48px; padding: 12px 14px;
    border: 1px solid #dddfe2; border-radius: 12px; outline: none;
    background: #ffffff; font-family: inherit; font-size: 16px; color: #1c1e21;
    -webkit-appearance: none; appearance: none;
}
select.loc-field {
    padding-right: 36px; background-repeat: no-repeat; background-position: right 14px center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'/></svg>");
}
.loc-field:focus { border-color: #0084ff; box-shadow: 0 0 0 3px rgba(0,132,255,0.12); }
.loc-field:disabled { background-color: #f5f6f7; color: #999; }
.loc-geo-btn { width: 100%; margin-top: 10px; }
.geo-btn:disabled { opacity: 0.6; }
.loc-status { margin: 8px 0 0; min-height: 18px; font-size: 13px; color: #666; }
.loc-status.ok { color: #2e7d32; }
.loc-status.warn { color: #b45309; }
.loc-map-box { display: none; margin-top: 12px; }
.loc-map { width: 100%; height: 280px; border: 1px solid #dddfe2; border-radius: 12px; isolation: isolate; }
.form-card > .form-group:has(.loc-grid) { grid-column: 1 / -1; }
/* Sahifalar orasida silliq o'tish — oq ekran chaqnamaydi */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; }

/* Sahifa yuklanguncha ham fon oq-kulrang tursin (qora/oq chaqnash bo'lmasin) */
html { background: #f3f5f8; }