/* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ===== VARIABLES ===== 2026-07 დამატება: საერთო დიზაინ-ტოკენები — ფერები/რადიუსები/ჩრდილები, რომ საიტის ყველა შიდა ფანჯარამ/ღილაკმა ერთიანი, თანამედროვე იერსახე მიიღოს. ეს ცვლადები გამოიყენება ქვემოთა განახლებულ საერთო კომპონენტებში (.pending-detail-box, .offer-detail-box, .back-btn, .status-tile და ა.შ.) — მათი შეცვლა ავტომატურად აისახება ყველგან. */ :root { --brand-green: #2ea36e; --brand-green-dark: #1d6f42; --brand-blue: #3f6cb5; --brand-orange: #d98324; --brand-red: #d9463b; --ink-900: #16211c; --ink-700: #333; --ink-500: #666; --ink-300: #999; --surface-0: #ffffff; --surface-1: #f7f9f8; --surface-2: #eef2f0; --border-subtle: #e4e8e6; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(20, 40, 30, 0.06); --shadow-md: 0 10px 28px rgba(20, 40, 30, 0.12); --shadow-lg: 0 20px 48px rgba(20, 40, 30, 0.20); --backdrop: rgba(15, 22, 19, 0.55); --transition-fast: 0.15s ease; --transition-base: 0.25s ease; } /* ============================================================ 2026-09 დამატება — "⚙️ პარამეტრები → 🎨 გარეგნობა → 🌙 მუქი რეჟიმი" ------------------------------------------------------------ არსებული CSS variable არქიტექტურის (ზემოთ) იგივე ცვლადების override — არ არის ახალი, პარალელური ფერის სისტემა. მთელი საიტი, რომელიც უკვე ამ var(--...)-ებს იყენებს, ავტომატურად, ცვლილების გარეშე გადადის მუქ რეჟიმზე, როცა დაისმის (JS-იდან, Personal-data.js-ის applyThemeToDom()-ის მეშვეობით). ============================================================ */ :root[data-theme="dark"] { --ink-900: #eef2f0; --ink-700: #d4dbd7; --ink-500: #a8b2ad; --ink-300: #7c8983; --surface-0: #1b211e; --surface-1: #222a26; --surface-2: #2a332e; --border-subtle: #3a453f; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45); --backdrop: rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] body { background: var(--surface-1); color: var(--ink-900); } /* მთელი გვერდი */ html, body { width: 100%; min-height: 100%; font-family: Arial, sans-serif; } /* ფონის სრული ვიზუალი */ body { margin: 0; font-family: sans-serif; min-height: 100vh; background-color: #e6e6e6; /* 2026-07: ხის ტექსტურის ნაცვლად მყარი, ღია რუხი ფონი */ display: flex; justify-content: center; align-items: center; position: relative; } /* გამუქებული ფენა რომ ტექსტი კარგად ჩანდეს */ body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 0; pointer-events: none; } /* ============================================================ მთავარი კონტეინერი ============================================================ */ .main-container { position: relative; z-index: 1; width: 90%; max-width: 1200px; min-height: 80vh; display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 40px; } /* მარცხენა მხარე */ .left-side { flex: 1; display: flex; justify-content: center; align-items: center; color: white; background: transparent; } /* ლოგო */ .logo-wrapper { text-align: center; } .main-logo { font-size: clamp(90px, 14vw, 180px); font-weight: 900; color: white; line-height: 1; letter-spacing: 4px; text-shadow: 0 8px 25px rgba(0, 0, 0, 0.35); } .y-letter { color: #2ECC71; } .logo-text { margin-top: 10px; color: #2ECC71; font-size: clamp(24px, 3vw, 42px); font-weight: bold; text-align: center; letter-spacing: 8px; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* მარჯვენა მხარე */ .right-side { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; background: transparent; } /* ღილაკები */ .btn { width: min(320px, 90%); text-decoration: none; color: white; border: 2px solid rgba(255,255,255,0.25); background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 18px 24px; border-radius: 18px; font-size: clamp(18px, 2vw, 24px); text-align: center; font-weight: bold; transition: 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 35px rgba(0,0,0,0.25); } /* ტაბლეტი / პატარა ლეპტოპი */ @media (max-width: 900px) { .main-container { flex-direction: column; justify-content: center; text-align: center; min-height: 100vh; padding: 30px 20px; gap: 50px; } .left-side, .right-side { width: 100%; } .right-side { gap: 18px; } .btn { width: 100%; max-width: 340px; } } /* მობილურისთვის */ @media (max-width: 480px) { .main-container { padding: 20px 15px; gap: 35px; } .logo-text { letter-spacing: 4px; } .btn { padding: 16px 18px; font-size: 17px; border-radius: 16px; } } /*==============/* ავტორიზაციის გვერდის სტილები */===================================================*/ /* მთავარი კონტეინერი */ .auth-container { width: 100%; max-width: 470px; padding: 24px; position: relative; z-index: 1; } /* ლოგინ ბოქსი */ .login-box { width: 100%; background: #f6f6f6; border: 1px solid #dddddd; border-radius: 26px; padding: 34px 26px 28px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; } /* სათაურები */ .auth-title { font-size: 28px; font-weight: 800; text-align: center; color: #173153; letter-spacing: -0.5px; } .auth-subtitle { text-align: center; color: #6a6a6a; font-size: 14px; margin-top: -6px; margin-bottom: 6px; } /* Input-ები */ .input-field, .phone-input, .code-input { width: 100%; height: 54px; background: #ffffff; border: 1.5px solid #d8d8d8; border-radius: 16px; padding: 0 16px; font-size: 15px; outline: none; transition: all 0.22s ease; color: #222; position: relative; z-index: 4; } .input-field::placeholder, .phone-input::placeholder, .code-input::placeholder { color: #9b9b9b; } .input-field:focus, .phone-input:focus, .code-input:focus { border-color: #2ECC71; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.12); } /* შეცდომის სტილი */ .error-msg { color: #d63031; font-size: 12px; display: none; font-weight: 700; margin-top: -4px; margin-bottom: -4px; padding-left: 4px; } .input-error { border-color: #d63031 !important; box-shadow: 0 0 0 4px rgba(214, 48, 49, 0.08) !important; } /* ტელეფონის ბლოკი */ .phone-verify { display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 10px; align-items: center; } .phone-wrap { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1.5px solid #d8d8d8; border-radius: 16px; height: 54px; padding: 0 14px; transition: all 0.22s ease; } .phone-wrap:focus-within { border-color: #2ECC71; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.12); } .prefix { color: #3e3e3e; font-size: 14px; font-weight: 700; white-space: nowrap; } .phone-input { border: none; background: transparent; height: 100%; padding: 0; box-shadow: none !important; } /* კოდის ღილაკი */ .code-btn { height: 54px; min-width: 88px; border: none; border-radius: 16px; background: #dff5e8; color: #1f8d4b; font-weight: 800; font-size: 14px; cursor: pointer; transition: all 0.22s ease; box-shadow: 0 6px 16px rgba(46, 204, 113, 0.12); } .code-btn:hover:not(:disabled) { background: #2ECC71; color: white; transform: translateY(-1px); } .code-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* მთავარი ღილაკები */ .main-action-btn { width: 100%; height: 54px; border-radius: 18px; border: none; font-weight: 800; font-size: 15px; cursor: pointer; transition: all 0.22s ease; } /* შესვლა */ .enter { background: linear-gradient(135deg, #2ECC71, #28b765); color: white; box-shadow: 0 10px 24px rgba(46, 204, 113, 0.25); margin-top: 6px; } .enter:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(46, 204, 113, 0.32); } .enter:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; } /* რეგისტრაცია */ .reg-link { text-decoration: none; width: 100%; } .register { background: #ffffff; color: #1e1e1e; border: 1.5px solid #d8d8d8; } .register:hover { background: #f3f3f3; transform: translateY(-1px); } /* მობილური */ @media (max-width: 540px) { body { align-items: flex-start; padding: 90px 14px 24px; } .auth-container { max-width: 100%; padding: 0; } .top-nav { top: 14px; left: 14px; right: 14px; justify-content: space-between; } .login-box { border-radius: 22px; padding: 28px 18px 22px; } .auth-title { font-size: 24px; } .phone-verify { grid-template-columns: 1fr; } .code-btn, .code-input, .phone-wrap { width: 100%; } } /* ძალიან პატარა ეკრანები */ @media (max-width: 360px) { .login-box { padding: 24px 14px 20px; } .nav-btn { font-size: 12px; padding: 8px 12px; } .input-field, .phone-input, .code-input, .phone-wrap, .code-btn, .main-action-btn { height: 50px; } } /* ============================================================================================================== REGISTRATION PAGE (რეგისტრაციის გვერდი) ============================================================================================================ */ .registration-container { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.9); padding: 30px; border-radius: 15px; max-width: 1250px; /* იყო 1000, გავხადეთ 1250 */ width: 95%; /* მცირე დაშორება გვერდებიდან */ box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin: 20px; } #fullName:invalid { border-color: #ff4d4d; } /* ველი გახდება მწვანე, როცა 9 ან 11 ციფრი იქნება */ #personalId:valid { border-color: #93c47d; } /* მეილის ფორმატი*/ #email { transition: all 0.3s ease; } /* როცა მომხმარებელი ველზე დააწკაპუნებს */ #email:focus { border-color: #007bff; /* ლურჯი ფერი */ box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* ნაზი ლურჯი ნათება */ outline: none; } /* თუ არასწორი ფორმატია შეყვანილი, წითლად მონიშნოს */ #email:invalid:not(:placeholder-shown) { border-color: #ff4d4d; } /* კონტეინერი ხატულასთვის */ .password-wrapper { position: relative; width: 100%; } .password-wrapper input { width: 100%; padding-right: 45px; /* ადგილი ხატულისთვის */ } /* თვალის ხატულას სტილი */ .toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 18px; user-select: none; z-index: 2; } /* როცა პაროლები ემთხვევა - მწვანე */ .match { border: 2px solid #93c47d !important; background-color: #f0fff0; } /* როცა პაროლები არ ემთხვევა - წითელი */ .no-match { border: 2px solid #ff4d4d !important; background-color: #fff5f5; } /* ნომრის ვერიფიკაციისთვის*/ /* --- ტელეფონის ვერიფიკაციის სტილები --- */ /* ტელეფონის ინპუტის კონტეინერი (დროშა + ნომერი) */ .phone-input { display: flex; align-items: center; background: white; border: 1px solid #ccc; border-radius: 10px; padding: 0 10px; height: 45px; } .flag-icon { margin-right: 8px; font-size: 18px; display: flex; align-items: center; } #phone { border: none !important; /* ჩარჩო ვუშალოთ შიდა ინპუტს */ padding: 0 !important; flex: 1; } #phone:focus { box-shadow: none !important; /* რომ არ აირიოს */ } /* ველების გაყინვის ეფექტი */ input:disabled { background-color: #f0f0f0 !important; /* ნაცრისფერი ფონი */ color: #888 !important; cursor: not-allowed; opacity: 0.8; } /* ვირტუალური SMS შეტყობინების სტილი (ეკრანის ზემოთ) */ .sms-toast { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 15px 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 10000; transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); text-align: center; border: 1px solid #444; } .sms-toast.show { top: 20px; } .sms-toast strong { color: #93c47d; display: block; margin-bottom: 5px; } /* ღილაკების დამატებითი სტილი */ .action-btn:disabled { cursor: not-allowed; filter: grayscale(1); opacity: 0.6; } /* ტაიმერის ფერი და სტილი */ #timer { pointer-events: none; user-select: none; } /* რუკა*/ /* მთლიანი სექციის გაფართოება */ .map-section { flex: 1.2; /* რუკის მხარე უფრო ფართო იქნება */ display: flex; flex-direction: column; align-items: center; } .map-container { margin-top: 20px; border-radius: 15px; overflow: hidden; width: 100%; height: 500px; border: 5px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); } #map { width: 100% !important; height: 500px !important; border-radius: 15px !important; } .seller-categories-wrapper { background-color: #f3f3f3; padding: 20px; border-radius: 20px; margin: 20px 0; } .category-header { text-align: center; font-weight: bold; margin-bottom: 20px; font-size: 16px; } .category-columns { display: flex; gap: 20px; margin-bottom: 15px; } .cat-column { flex: 1; display: flex; flex-direction: column; gap: 10px; } .cat-banner { padding: 10px; border-radius: 10px; text-align: center; color: white; font-weight: bold; margin-bottom: 10px; } /* ფერები სურათის მიხედვით */ .orange-bg { background-color: #f19c38; } .green-light-bg { background-color: #d9ead3; color: #333; } .brown-bg { background-color: #e6b38a; } .cat-column label, .med-options label { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; } .med-options { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .cat-full-row { margin-top: 10px; } /* რეგისტრაციის ერთი ღილაკი */ .register-btn { display: block; width: 60%; margin: 30px auto 0; background-color: #93c47d; padding: 15px; border-radius: 10px; font-weight: bold; border: none; cursor: pointer; } /* მობილურზე რომ ძალიან დიდი არ იყოს */ @media (max-width: 600px) { .map-container { width: 100%; height: 300px; } } /* ნავიგაციის ღილაკები */ .header-buttons { display: flex; gap: 10px; margin-bottom: 20px; } .nav-btn { border: none; padding: 8px 15px; border-radius: 8px; color: white; cursor: pointer; } .nav-btn.back { background: #e6b3b3; } .nav-btn.home { background: #f2c9c9; } /* კონტენტის განლაგება */ .content-wrapper { display: flex; gap: 40px; flex-wrap: wrap; } .form-section { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px; } /* ინპუტების სტილი */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"] { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 10px; background: #fdfdfd; outline: none; } /* ტელეფონის და კოდის სექცია */ .phone-verification { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .phone-input { display: flex; align-items: center; background: white; border: 1px solid #ccc; border-radius: 10px; padding-left: 10px; } .action-btn { border: none; border-radius: 10px; padding: 10px; cursor: pointer; font-size: 0.9em; color: black; } .pink { background: #f4cccc; } .green { background: #b7e1cd; } /* ჩეკბოქსები */ .agreements { margin: 20px 0; display: flex; flex-direction: column; gap: 15px; } .checkbox-container { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #4a4a4a; cursor: pointer; } /* რეგისტრაციის ღილაკი */ .register-btn { background: #93c47d; border: none; padding: 15px; border-radius: 10px; cursor: pointer; font-weight: bold; width: 50%; align-self: center; } /* რუკის სექცია */ .map-section { flex: 1; text-align: center; } .map-placeholder { width: 100%; height: 100%; object-fit: cover; } /*მორგება მოწყობილობებზე*/ /* --- ADAPTIVE DESIGN (RESPONSIVE) --- */ /* პლანშეტებისთვის და პატარა ეკრანებისთვის (1024px-მდე) */ @media (max-width: 1024px) { .registration-container { max-width: 90%; padding: 20px; } .content-wrapper { gap: 20px; } .map-container { width: 250px; height: 250px; } } /* მობილური მოწყობილობებისთვის (768px-მდე) */ @media (max-width: 768px) { body { overflow-y: auto; /* მობილურზე სქროლი ჩაირთოს */ align-items: flex-start; /* ფორმა ზემოდან დაიწყოს */ } .content-wrapper { flex-direction: column-reverse; /* მობილურზე რუკა ავიდეს ზემოთ, ან პირიქით */ } .registration-container { margin: 10px; border-radius: 10px; } .form-section { width: 100%; } .phone-verification { grid-template-columns: 1fr; /* მობილურზე ღილაკები ჩამოეწყოს ერთმანეთის ქვეშ */ } .map-section h2 { font-size: 1.2rem; } .map-container { width: 180px; height: 180px; margin-bottom: 20px; } .register-btn { width: 100%; /* მობილურზე ღილაკი გაიწელოს მთელ სიგანეზე */ } } /* ძალიან პატარა ეკრანებისთვის (480px-მდე) */ @media (max-width: 480px) { .header-buttons { justify-content: space-between; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"] { font-size: 14px; /* ტექსტი ცოტა დაპატარავდეს */ } .agreements { font-size: 12px; } } /*=================================================/* აქედან იწყება მომხმარებლის მთავარი გვერდი========*/ /* ========================= DASHBOARD BODY ========================= */ .dash-body { justify-content: flex-start; align-items: flex-start; overflow-y: auto; overflow-x: hidden; padding: 90px 20px 40px; } /* ყველა ელემენტი overlay-ს ზემოთ იყოს */ .dash-body > * { position: relative; z-index: 1; } /* ========================= TOP NAV ========================= */ .fixed-nav { position: fixed; top: 14px; left: 14px; display: flex; gap: 10px; z-index: 1000; } .nav-btn { border: 1px solid #d6bcbc; background: rgba(250, 219, 216, 0.95); color: #2f2f2f; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.25s ease; box-shadow: 0 6px 16px rgba(0,0,0,0.12); backdrop-filter: blur(6px); } .nav-btn:hover { transform: translateY(-2px); background: rgba(245, 183, 177, 0.98); } .nav-btn:active { transform: translateY(0); } /* ========================= MAIN WRAPPER ========================= */ .dash-main-wrapper { width: 100%; max-width: 1280px; margin: 0 auto; } /* ========================= HEADER SECTION ========================= */ .dash-header { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; margin-bottom: 34px; align-items: stretch; } /* ========================= PROFILE CARD ========================= */ .dash-profile-card { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 10px 30px rgba(0,0,0,0.12); backdrop-filter: blur(10px); min-height: 150px; } .dash-logo-placeholder { width: 120px; min-width: 120px; height: 95px; border-radius: 18px; background: rgba(180, 180, 180, 0.65); border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; text-align: center; color: #232323; font-size: 14px; font-weight: 700; line-height: 1.4; } .dash-user-details { flex: 1; min-width: 0; } .dash-user-name { font-size: clamp(20px, 2vw, 30px); font-weight: 800; color: #111; margin-bottom: 10px; line-height: 1.2; word-break: break-word; } .dash-user-id { color: #d81f1f; font-size: clamp(14px, 1.2vw, 18px); font-weight: 800; word-break: break-word; } /* ========================= PRIVATE BUTTON ========================= */ .dash-private-btn { min-width: 130px; height: 95px; border-radius: 18px; border: 1px solid #909090; background: rgba(248, 248, 248, 0.88); color: #222; font-size: 15px; font-weight: 800; padding: 12px; cursor: pointer; transition: 0.25s ease; box-shadow: 0 8px 18px rgba(0,0,0,0.08); } /* ========================= STATUS GRID ========================= */ .dash-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .status-tile { min-height: 68px; border-radius: 16px; border: 1px solid rgba(90, 185, 136, 0.55); background: linear-gradient(180deg, rgba(114, 212, 162, 0.96), rgba(89, 194, 140, 0.96)); color: #173222; font-size: 15px; font-weight: 800; text-align: center; padding: 16px; cursor: pointer; transition: 0.25s ease; box-shadow: 0 10px 22px rgba(45, 133, 91, 0.16); } /* ========================= COLUMNS CONTAINER ========================= */ .dash-columns-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .dash-column { display: flex; flex-direction: column; gap: 16px; } /* ========================= COLUMN TITLES ========================= */ .dash-col-title { text-align: center; font-size: clamp(20px, 1.8vw, 28px); font-weight: 800; padding: 20px 18px; border-radius: 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.10); backdrop-filter: blur(6px); } .trading { background: linear-gradient(180deg, rgba(216, 153, 94, 0.96), rgba(198, 133, 71, 0.96)); color: #2c1807; } .service { background: linear-gradient(180deg, rgba(224, 179, 142, 0.96), rgba(205, 153, 111, 0.96)); color: #2e1b0d; } .medical { background: linear-gradient(180deg, rgba(217, 166, 132, 0.96), rgba(198, 141, 104, 0.96)); color: #2f1c10; } .individual { background: linear-gradient(180deg, rgba(180, 156, 214, 0.96), rgba(140, 110, 180, 0.96)); color: #211433; } /* ========================= ITEM LIST ========================= */ .dash-items-list { display: flex; flex-direction: column; gap: 14px; } .dash-item { min-height: 66px; border-radius: 18px; border: 1px solid rgba(145, 170, 195, 0.75); background: linear-gradient(180deg, rgba(216, 228, 238, 0.95), rgba(198, 213, 225, 0.95)); color: #1f2c36; font-size: 17px; font-weight: 700; text-align: center; padding: 16px 18px; cursor: pointer; transition: 0.25s ease; line-height: 1.35; box-shadow: 0 8px 20px rgba(80, 105, 125, 0.12); } /* ========================= UNIVERSAL BUTTON EFFECT ========================= */ .action-btn { outline: none; border: none; } .action-btn:hover, .dash-private-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,0.16); } .action-btn:active, .dash-private-btn:active { transform: translateY(0); } .action-btn:focus-visible, .dash-private-btn:focus-visible, .nav-btn:focus-visible { outline: 3px solid rgba(46, 204, 113, 0.35); outline-offset: 2px; } /* ========================= SCROLLBAR ========================= */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); } ::-webkit-scrollbar-thumb { background: rgba(80, 80, 80, 0.35); border-radius: 20px; } /* ========================= RESPONSIVE - TABLET ========================= */ @media (max-width: 1100px) { .dash-header { grid-template-columns: 1fr; } .dash-columns-container { grid-template-columns: repeat(2, 1fr); } } /* ========================= RESPONSIVE - SMALL TABLET ========================= */ @media (max-width: 780px) { .dash-body { padding: 88px 16px 28px; } .dash-profile-card { flex-direction: column; align-items: stretch; text-align: center; } .dash-logo-placeholder { width: 100%; min-width: 100%; height: 130px; } .dash-private-btn { width: 100%; min-width: 100%; height: 60px; } .dash-status-grid { grid-template-columns: 1fr; } .dash-columns-container { grid-template-columns: 1fr; } .dash-col-title { font-size: 22px; } .dash-item, .status-tile { font-size: 16px; } } /* ========================= RESPONSIVE - MOBILE ========================= */ @media (max-width: 480px) { .fixed-nav { top: 10px; left: 10px; gap: 8px; } .nav-btn { padding: 9px 14px; font-size: 13px; border-radius: 10px; } .dash-user-name { font-size: 20px; } .dash-user-id { font-size: 14px; } .dash-item, .status-tile { min-height: 58px; padding: 14px; font-size: 15px; } .dash-col-title { padding: 16px; } } /* ============================================================ SELLER DASHBOARD (გამყიდველის პანელი) ============================================================ */ /* ================= MAIN ================= */ .seller-body { width: 100%; max-width: 1280px; margin: 40px auto; padding: 20px; } /* ================= BACK BUTTON ================= */ .back-btn { background: #f4cccc; border: none; padding: 8px 14px; border-radius: 10px; cursor: pointer; margin-bottom: 15px; } .back-btn:hover { background: #e6b8b7; } /* ================= HEADER ================= */ .seller-header { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 10px 30px rgba(0,0,0,0.12); backdrop-filter: blur(10px); padding: 18px 20px; border-radius: 24px; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; } .logo-box { width: 90px; height: 76px; background: rgba(180, 180, 180, 0.65); border: 1px solid rgba(255,255,255,0.25); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #232323; font-weight: 700; flex-shrink: 0; } .uid { color: red; font-weight: bold; font-size: 14px; } .profile-btn { background: #ffffff; border: 1px solid #ccc; padding: 10px 14px; border-radius: 12px; cursor: pointer; } .profile-btn:hover { background: #f0f0f0; } /* ================= STATS ================= */ .seller-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .seller-stats button { background: linear-gradient(180deg, rgba(114, 212, 162, 0.96), rgba(89, 194, 140, 0.96)); border: 1px solid rgba(90, 185, 136, 0.55); color: #173222; padding: 16px 12px; min-height: 68px; border-radius: 16px; cursor: pointer; font-weight: 800; font-size: 15px; box-shadow: 0 10px 22px rgba(45, 133, 91, 0.16); transition: 0.25s ease; } .seller-stats button:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,0.16); } /* ბალანსის ღილაკი — თანხა ჩანს დაკლიკების გარეშეც */ .balance-stat-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; } .balance-stat-amount { font-size: 14px; font-weight: 900; } .balance-stat-label { font-size: 12px; font-weight: 600; opacity: 0.85; } /* ================= WARNING ================= */ .warning { text-align: center; color: #f39c12; font-size: 32px; margin: 25px 0; } /* ================= MESSAGE BOX ================= */ .messages-box { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 10px 30px rgba(0,0,0,0.12); backdrop-filter: blur(10px); padding: 20px; border-radius: 24px; } /* BLUE HEADER — დაშბორდის მწვანე გრადიენტში, ერთგვაროვნებისთვის */ .blue-header { background: linear-gradient(180deg, rgba(114, 212, 162, 0.96), rgba(89, 194, 140, 0.96)); color: #173222; padding: 16px; border-radius: 18px; text-align: center; font-size: 19px; font-weight: 800; margin-bottom: 15px; box-shadow: 0 10px 22px rgba(45, 133, 91, 0.16); } .msg-header { position: relative; display: flex; align-items: center; justify-content: center; } .msg-badge { position: absolute; top: -8px; right: -8px; background: #e74c3c; color: #fff; font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 8px rgba(231,76,60,0.5); } /* ================= MSG WRAPPER ================= */ .msg-wrapper { display: flex; gap: 20px; flex-wrap: wrap; } /* 2026-09 გასწორება — .msg-list ერთსვეტიანი, სრულ სიგანეზე გაწელილი იყო ყოველთვის — ფართო მონიტორზე (1300px+ ხელმისაწვდომი სიგანე) თითოეული მოთხოვნის ბარათი უაზროდ იჭიმებოდა, შემცველობა კი მარცხნივ იყო ჩალაგებული, დარჩენილი სივრცე კი ცარიელი — ანუ "არ იყო განაწილებული" ეკრანზე. ახლა auto-fill grid-ია: რამდენი სვეტიც თავსდება (მინ. 380px თითო ბარათზე), იმდენი გამოჩნდება — ფართო მონიტორზე 2-3 სვეტი, ტაბლეტზე 1-2, მობილურზე ავტომატურად 1. */ .msg-list { flex: 2; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; } @media (max-width: 820px) { .msg-list { grid-template-columns: 1fr; } } /* თითოეული მესიჯი — სრული დეტალების ბარათი */ .msg-item { background: #ffffff; padding: 14px 16px; border-radius: 14px; margin-bottom: 0; font-size: 14px; cursor: default; } .msg-card-top { display: flex; align-items: flex-start; gap: 10px; } .msg-card-num { margin-left: auto; font-weight: 900; color: #3f6cb5; font-size: 15px; white-space: nowrap; padding-left: 8px; } .msg-card-title { font-weight: 700; color: #222; } .msg-card-meta { font-size: 11px; color: #888; margin-top: 2px; } .msg-edited-badge { color: #a85d00; font-weight: 700; } .msg-card-comment { margin: 10px 0 4px; color: #333; line-height: 1.5; white-space: pre-wrap; } .msg-extra-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: 12.5px; color: #555; } .msg-extra-list span b { color: #333; } .msg-photo-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .msg-photo-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; cursor: pointer; } .msg-card-footer { display: flex; justify-content: flex-end; margin-top: 8px; } .msg-reply-btn { background: #27ae60; color: #fff; border: none; padding: 9px 22px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.2s; } .msg-reply-btn:hover { background: #219150; } /* ================= ACTION BUTTONS ================= */ .actions { display: flex; gap: 12px; } .actions button { padding: 15px; border-radius: 15px; border: none; cursor: pointer; font-weight: bold; transition: 0.2s; flex: 1; } .green { background: #27ae60; color: white; } .green:hover { background: #219150; } .orange { background: #f39c12; color: white; } .orange:hover { background: #d68910; } /* ================= REPLY MODAL ================= */ .reply-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.55); align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .reply-overlay.open { display: flex; } .reply-modal { position: relative; background: #fff; border-radius: 18px; padding: 26px 24px 22px; max-width: 900px; width: 100%; } .reply-close-x { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; } .reply-close-x:hover { color: #333; } .reply-modal-title { font-weight: 800; font-size: 17px; color: #222; margin-bottom: 16px; padding-right: 24px; } /* ================= ITEMIZED TABLE / ინვოისი ================= */ .items-section { margin-top: 18px; background: #f4f6f8; border-radius: 12px; padding: 12px 14px; } .items-header { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #666; font-weight: 700; margin-bottom: 8px; } .items-add-btn { background: #3f6cb5; color: #fff; border: none; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; } .item-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; } /* 2026-09 დამატება — ამ ველს საერთოდ არ ჰქონდა მობილურის override, 4 სვეტი ვიწრო ეკრანზე უკიდურესად ვიწროვდებოდა */ @media (max-width: 480px) { .item-row { grid-template-columns: 1fr 1fr; } .item-row input:first-child { grid-column: 1 / -1; } } .item-row input { padding: 8px 9px; border-radius: 7px; border: 1px solid #ddd; font-size: 13px; width: 100%; } .item-row button { background: #e74c3c; color: #fff; border: none; border-radius: 7px; width: 30px; cursor: pointer; font-weight: 700; } .items-total { text-align: right; font-weight: 800; font-size: 14px; color: #003d1a; margin-top: 6px; } /* ================= PHOTO ================= */ .photo-section { margin-top: 20px; } .photo-section button { background: #bcd2e8; border: none; padding: 8px 12px; border-radius: 10px; cursor: pointer; } #preview { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; } #preview img { width: 100px; height: 100px; object-fit: cover; border-radius: 10px; border: 1.5px solid #ddd; } /* ================= COMMENT ================= */ /* 2026-07: წაშლილია background:#69bc7d/color:white — ეს გლობალური, კლასის გარეშე textarea-ს წესი ყოველ ახალ დაუკლასო textarea-ზეც ვრცელდებოდა საიტის ნებისმიერ გვერდზე (სელერის კომენტარი, დინამიური ველები), თეთრი ტექსტი მწვანეზე ცუდად იკითხებოდა. */ textarea { width: 100%; height: 110px; margin-top: 4px; border-radius: 20px; border: 1.5px solid #ddd; padding: 15px; background: #fff; color: #222; font-size: 14px; font-family: inherit; } /* ================= CLOSE ================= */ .close-btn { display: block; margin: 20px auto; background: #4a7c2c; color: white; padding: 10px 40px; border-radius: 10px; border: none; cursor: pointer; } .close-btn:hover { background: #3d6624; } /* ================= RESPONSIVE ================= */ /* ტაბლეტი */ @media (max-width: 900px) { .seller-stats { grid-template-columns: repeat(2, 1fr); } } /* მობილური */ @media (max-width: 600px) { .seller-header { flex-direction: column; text-align: center; } .msg-wrapper { flex-direction: column; } .seller-stats { grid-template-columns: 1fr; } .actions { flex-direction: row; } .actions button { flex: 1; padding: 10px; font-size: 12px; } textarea { height: 120px; } } /* ===== მომხმარებლის ბალანსის დიზაინი ======================================================= */ /* ===== PAGE WRAPPER ===== */ .page-wrapper { position: relative; z-index: 1; width: 100%; max-width: 560px; padding: 24px 20px; } /* ===== BACK BUTTON ===== */ .back-btn { background: rgba(255, 192, 192, 0.5); border: 1px solid rgba(255, 150, 150, 0.4); border-radius: 8px; padding: 8px 18px; font-family: Arial, sans-serif; font-size: 14px; color: #5a2a2a; cursor: pointer; margin-bottom: 28px; display: inline-block; transition: background 0.2s; } .back-btn:hover { background: rgba(255, 160, 160, 0.7); } /* ===== BALANCE CARD ===== */ .balance-card { background: rgba(255, 255, 255, 0.88); border-radius: 18px; padding: 28px 32px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); backdrop-filter: blur(10px); } /* 2026-07 დამატება: balance.html/payment.html — დაშბორდის ვიზუალურ ენაზე მორგებული კარტი (იგივე page-wrapper/status-tile ესთეტიკა) */ .balance-page-card { max-width: 480px; margin: 40px auto; background: #fff; border-radius: 18px; padding: 32px 28px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); text-align: center; } .balance-page-title { font-size: 20px; font-weight: 800; color: #173222; margin-bottom: 18px; } .balance-page-card .balance-display { background: linear-gradient(180deg, rgba(114, 212, 162, 0.96), rgba(89, 194, 140, 0.96)); color: #173222; font-size: 32px; font-weight: 900; padding: 24px; border-radius: 16px; box-shadow: 0 10px 22px rgba(45, 133, 91, 0.16); margin-bottom: 24px; } .balance-actions-row { display: flex; gap: 14px; flex-wrap: wrap; } .balance-actions-row .status-tile { flex: 1; min-width: 160px; } /* ===== TOP ACTIONS ===== */ .top-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .balance-display { background: #00e676; color: #003d1a; font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 10px; flex: 1; min-width: 180px; text-align: center; box-shadow: 0 2px 12px rgba(0, 230, 118, 0.3); } .btn-deposit { background: #00e676; color: #003d1a; border: none; border-radius: 10px; padding: 12px 22px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 12px rgba(0, 230, 118, 0.3); transition: background 0.2s, transform 0.15s; } .btn-deposit:hover { background: #00c853; transform: translateY(-1px); } /* ===== DEPOSIT SECTION ===== */ .deposit-section { display: block; } /* ===== FORM ===== */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; } .form-input { width: 100%; border: 1.5px solid #ddd; border-radius: 8px; padding: 11px 14px; font-family: Arial, sans-serif; font-size: 14px; color: #222; outline: none; background: #fff; transition: border-color 0.2s; } .form-input:focus { border-color: #00e676; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ===== CARD NUMBER INPUT ===== */ .card-input-wrap { position: relative; } .card-input-wrap .form-input { padding-right: 140px; } .card-icons { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; } .card-icon { font-size: 9px; font-weight: 900; padding: 3px 5px; border-radius: 3px; letter-spacing: 0.3px; } .card-icon.mc { background: #eb001b; color: #fff; } .card-icon.visa { background: #1a1f71; color: #fff; } .card-icon.amex { background: #007bc1; color: #fff; } .card-icon.disc { background: #f76f20; color: #fff; } /* ===== CVC WRAP ===== */ .cvc-wrap { position: relative; } .cvc-wrap .form-input { padding-right: 40px; } .cvc-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #aaa; } /* ===== PAY BUTTON ===== */ .btn-pay { display: block; width: 180px; margin: 8px auto 0; background: #00e676; color: #003d1a; border: none; border-radius: 50px; padding: 13px 0; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 230, 118, 0.35); transition: background 0.2s, transform 0.15s; } .btn-pay:hover { background: #00c853; transform: translateY(-2px); } .btn-pay:active { transform: scale(0.97); } /* ===== SUCCESS OVERLAY ===== */ .success-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .success-overlay.show { opacity: 1; pointer-events: all; } .success-box { background: #fff; border-radius: 18px; padding: 40px 48px; text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,0.2); animation: popIn 0.3s cubic-bezier(.22,.68,0,1.3); } .success-icon { font-size: 52px; margin-bottom: 12px; } .success-title { font-size: 18px; font-weight: 700; color: #003d1a; } @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ===== WITHDRAW MODAL ===== */ .withdraw-box { position: relative; text-align: left; width: 100%; max-width: 380px; padding: 32px 28px 24px; } .withdraw-close-x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; line-height: 1; color: #999; cursor: pointer; } .withdraw-close-x:hover { color: #333; } .withdraw-header { font-size: 16px; font-weight: 700; color: #003d1a; margin-bottom: 18px; text-align: center; } .withdraw-note { font-size: 11.5px; color: #888; text-align: center; margin-top: 14px; line-height: 1.5; } /* ===== RESPONSIVE ===== */ @media (max-width: 480px) { .balance-card { padding: 20px 16px; } .top-actions { flex-direction: column; align-items: stretch; } .form-row { grid-template-columns: 1fr; } .card-input-wrap .form-input { padding-right: 14px; } .card-icons { display: none; } .withdraw-box { padding: 26px 18px 20px; } } /*==========რეიტინგი ======================================================*/ /* ── გვერდი ─────────────────────────────────────────────── */ .rating-body { min-height: 100vh; background: #f0f0f0; display: block; align-items: unset; justify-content: unset; } .rating-wrapper { max-width: 800px; margin: 0 auto; padding: 24px 16px 48px; } /* ── ნავიგაცია ───────────────────────────────────────────── */ .rating-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .rating-title { font-size: 22px; font-weight: 700; color: #333; } .back-btn { background: #e6b3b3; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 15px; color: #333; } /* ── ფილტრი ─────────────────────────────────────────────── */ .rating-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .filter-btn { padding: 8px 18px; border: 2px solid #ccc; border-radius: 20px; background: #fff; cursor: pointer; font-size: 14px; transition: all 0.2s; } .filter-btn.active, .filter-btn:hover { background: #f19c38; border-color: #f19c38; color: #fff; } /* ── ბარათი ─────────────────────────────────────────────── */ .seller-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: transform 0.15s; } .seller-card:hover { transform: translateY(-2px); } /* ── რანგი ──────────────────────────────────────────────── */ .rank-col { min-width: 44px; text-align: center; } .medal { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 16px; } .rank-num { font-size: 18px; font-weight: 700; color: #aaa; } /* ── ინფო ───────────────────────────────────────────────── */ .seller-info { flex: 1; } .seller-name { font-size: 16px; font-weight: 700; color: #222; margin-bottom: 6px; } .seller-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .sk-badge { background: #eee; padding: 3px 10px; border-radius: 20px; font-size: 12px; color: #555; } .cat-badge { padding: 3px 12px; border-radius: 20px; font-size: 12px; color: #fff; font-weight: 600; } /* ── ვარსკვლავები ───────────────────────────────────────── */ .seller-rate-row { display: flex; align-items: center; gap: 6px; } .star { font-size: 16px; } .star.full { color: #f5a623; } .star.half { color: #f5a623; opacity: 0.6; } .star.empty { color: #ddd; } .score-num { font-weight: 700; font-size: 14px; color: #444; } .sales-info { font-size: 13px; color: #888; } /* ── ჩატის ღილაკი ───────────────────────────────────────── */ .chat-btn { background: #6db98a; color: #fff; border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; white-space: nowrap; transition: background 0.2s; } .chat-btn:hover { background: #5aa578; } /* ── ჩატის მოდალი ───────────────────────────────────────── */ .chat-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; align-items: flex-end; justify-content: center; padding: 16px; } .chat-overlay.active { display: flex; } .chat-box { background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-width: 500px; display: flex; flex-direction: column; max-height: 70vh; } .chat-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 15px; } .chat-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #888; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { padding: 10px 14px; border-radius: 12px; font-size: 14px; max-width: 80%; } .chat-msg.system { background: #f0f0f0; color: #666; align-self: center; text-align: center; } .chat-msg.user { background: #6db98a; color: #fff; align-self: flex-end; } .chat-msg.seller { background: #eee; color: #333; align-self: flex-start; } .chat-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #eee; } .chat-input { flex: 1; padding: 10px 14px; border: 1px solid #ccc; border-radius: 10px; font-size: 14px; outline: none; } .chat-send { background: #f19c38; color: #fff; border: none; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; } /* ── მობილური ───────────────────────────────────────────── */ @media (max-width: 600px) { .seller-card { flex-wrap: wrap; } .chat-btn { width: 100%; text-align: center; } } /*==========შესრულებული შეკვეთები ======================================================*/ /* RESET */ /* ===== PAGE WRAPPER ===== */ .page-wrapper { position: relative; z-index: 1; width: 100%; max-width: 640px; } /* ===== BACK BUTTON ===== */ .back-btn { background: rgba(255, 192, 192, 0.55); border: 1px solid rgba(255, 150, 150, 0.4); border-radius: 8px; padding: 8px 18px; font-family: Arial, sans-serif; font-size: 14px; color: #5a2a2a; cursor: pointer; margin-bottom: 22px; display: inline-block; transition: background 0.2s; } .back-btn:hover { background: rgba(255, 160, 160, 0.75); } /* ===== PAGE TITLE ===== */ .page-title { font-size: 16px; font-weight: 600; color: #222; margin-bottom: 24px; background: rgba(255,255,255,0.82); padding: 10px 18px; border-radius: 10px; backdrop-filter: blur(6px); } /* ===== ORDERS LIST ===== */ .orders-list { display: flex; flex-direction: column; gap: 10px; } /* ===== ORDER ROW ===== */ .order-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.88); border-radius: 10px; padding: 14px 16px; backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,0.10); transition: box-shadow 0.2s, transform 0.15s; animation: fadeInUp 0.35s ease forwards; opacity: 0; } .order-row:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.15); transform: translateX(3px); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* სახელი */ .order-name { flex: 1; font-size: 14px; font-weight: 600; color: #222; text-decoration: underline; text-underline-offset: 3px; } /* სტატუსი */ .order-status { font-size: 12px; font-weight: 600; color: #555; white-space: nowrap; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,0.05); } .order-status.completed { color: #1a7a3a; background: rgba(46,204,113,0.12); } .order-status.cancelled { color: #a00; background: rgba(200,0,0,0.08); } /* უკან დაბრუნება ღილაკი */ .btn-return { background: rgba(255, 192, 192, 0.6); border: 1.5px solid rgba(220, 100, 100, 0.35); border-radius: 10px; padding: 8px 16px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #7a1a1a; cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.15s; } .btn-return:hover { background: rgba(255, 160, 160, 0.8); transform: scale(1.03); } .btn-return:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* ===== EMPTY STATE ===== */ .empty-state { text-align: center; padding: 60px 20px; color: #888; font-size: 15px; background: rgba(255,255,255,0.7); border-radius: 14px; backdrop-filter: blur(6px); } .empty-icon { font-size: 42px; margin-bottom: 12px; } /* ===== MODAL ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-box { background: #fff; border-radius: 18px; padding: 30px 28px; width: 100%; max-width: 420px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); animation: popIn 0.3s cubic-bezier(.22,.68,0,1.2); } @keyframes popIn { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-title { font-size: 17px; font-weight: 700; color: #222; margin-bottom: 8px; } .modal-sub { font-size: 13px; color: #777; margin-bottom: 16px; } .modal-textarea { width: 100%; border: 1.5px solid #ddd; border-radius: 10px; padding: 10px 14px; font-family: Arial, sans-serif; font-size: 13px; min-height: 80px; resize: vertical; outline: none; margin-bottom: 18px; transition: border-color 0.2s; } .modal-textarea:focus { border-color: #e57373; } .modal-actions { display: flex; gap: 10px; } .btn-confirm { flex: 1; background: rgba(255,150,150,0.7); border: none; border-radius: 10px; padding: 11px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; color: #7a1a1a; cursor: pointer; transition: background 0.2s; } .btn-confirm:hover { background: rgba(255,120,120,0.85); } .btn-cancel-modal { flex: 1; background: #f0f0f0; border: none; border-radius: 10px; padding: 11px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; color: #555; cursor: pointer; transition: background 0.2s; } .btn-cancel-modal:hover { background: #e0e0e0; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: #333; color: #fff; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; padding: 11px 26px; border-radius: 50px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; z-index: 200; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== RESPONSIVE ===== */ @media (max-width: 500px) { .order-row { flex-wrap: wrap; } .order-name { min-width: 100%; } } /*=============გამყიდველის შეფასება======================================================================*/ /* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; min-height: 100%; font-family: Arial, sans-serif; } body { margin: 0; font-family: sans-serif; min-height: 100vh; background-color: #e6e6e6; /* 2026-07: ხის ტექსტურის ნაცვლად მყარი, ღია რუხი ფონი */ display: flex; justify-content: center; align-items: flex-start; position: relative; padding: 32px 20px 60px; } body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 0; pointer-events: none; } /* ===== PAGE WRAPPER ===== */ .page-wrapper { position: relative; z-index: 1; width: 100%; max-width: 640px; } /* ===== BACK BUTTON ===== */ .back-btn { background: rgba(255, 192, 192, 0.55); border: 1px solid rgba(255, 150, 150, 0.4); border-radius: 8px; padding: 8px 18px; font-family: Arial, sans-serif; font-size: 14px; color: #5a2a2a; cursor: pointer; margin-bottom: 22px; display: inline-block; transition: background 0.2s; } .back-btn:hover { background: rgba(255, 160, 160, 0.75); } /* ===== PAGE TITLE ===== */ .page-title { font-size: 14px; font-weight: 500; color: #222; margin-bottom: 28px; background: rgba(255,255,255,0.82); padding: 10px 18px; border-radius: 10px; backdrop-filter: blur(6px); line-height: 1.5; } /* ===== SELLERS LIST ===== */ .sellers-list { display: flex; flex-direction: column; gap: 12px; } /* ===== SELLER CARD ===== */ .seller-card { background: rgba(255, 255, 255, 0.88); border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.09); backdrop-filter: blur(8px); animation: fadeInUp 0.35s ease forwards; opacity: 0; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .seller-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .seller-name { font-size: 14px; font-weight: 700; color: #222; flex: 1; text-decoration: underline; text-underline-offset: 3px; } /* ===== SCORE CHIPS ===== */ .score-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .score-chip { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #ddd; background: #f5f5f5; color: #666; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s; } .score-chip:hover { background: rgba(0, 200, 100, 0.15); border-color: #00c853; color: #007a30; transform: scale(1.1); } .score-chip.selected { background: #00e676; border-color: #00c853; color: #003d1a; transform: scale(1.12); } /* ===== COMMENT ROW ===== */ .comment-row { display: flex; gap: 10px; align-items: flex-start; } .comment-input { flex: 1; border: 1.5px solid #ddd; border-radius: 8px; padding: 9px 12px; font-family: Arial, sans-serif; font-size: 13px; color: #333; resize: none; outline: none; background: #fafafa; transition: border-color 0.2s; min-height: 38px; max-height: 100px; } .comment-input:focus { border-color: #00e676; } .btn-submit { background: #e0e0e0; border: none; border-radius: 8px; padding: 9px 16px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #444; cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.15s; } .btn-submit:hover { background: #00e676; color: #003d1a; transform: scale(1.03); } .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* ===== SENT STATE ===== */ .sent-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,200,100,0.12); border: 1px solid rgba(0,200,100,0.3); border-radius: 8px; padding: 7px 14px; font-size: 13px; color: #007a30; font-weight: 600; } /* ===== EMPTY STATE ===== */ .empty-state { text-align: center; padding: 60px 20px; color: #888; font-size: 15px; background: rgba(255,255,255,0.7); border-radius: 14px; backdrop-filter: blur(6px); } .empty-icon { font-size: 42px; margin-bottom: 12px; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: #333; color: #fff; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; padding: 11px 26px; border-radius: 50px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; z-index: 200; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 480px) { .score-chip { width: 30px; height: 30px; font-size: 12px; } } /*========================პირადი მონაცემები=================================================*/ /* ===== PAGE WRAPPER ===== */ .page-wrapper { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 10px; } /* ===== BACK BUTTON ===== */ .back-btn { align-self: flex-start; background: rgba(255, 255, 255, 0.42); border: 1.5px solid rgba(255, 255, 255, 0.65); border-radius: 14px; padding: 10px 22px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; margin-bottom: 20px; box-shadow: 2px 2px 6px rgba(0,0,0,0.12), -1px -1px 4px rgba(255,255,255,0.5); transition: background 0.2s, transform 0.15s; } .back-btn:hover { background: rgba(255,255,255,0.6); transform: translateX(-2px); } /* ===== AVATAR ===== */ .avatar-wrap { width: 130px; height: 130px; background: #d4d4d4; border-radius: 28px; border: none; box-shadow: 6px 6px 14px rgba(0,0,0,0.18), -4px -4px 10px rgba(255,255,255,0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; margin-bottom: 20px; overflow: hidden; position: relative; transition: box-shadow 0.2s, transform 0.2s; } .avatar-wrap:hover { transform: scale(1.04); box-shadow: 8px 8px 20px rgba(0,0,0,0.22), -4px -4px 12px rgba(255,255,255,0.75); } .avatar-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; } .avatar-camera { font-size: 26px; filter: grayscale(0.4); } .avatar-text { font-size: 12px; font-weight: 600; color: #aaa; } .avatar-sub { font-size: 11px; color: #bbb; } #avatarImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; } #avatarInput { display: none; } /* hover overlay on avatar */ .avatar-wrap::after { content: 'შეცვლა'; position: absolute; inset: 0; background: rgba(0,0,0,0.35); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 28px; opacity: 0; transition: opacity 0.2s; } .avatar-wrap:hover::after { opacity: 1; } /* ===== MENU LIST ===== */ .menu-list { width: 100%; display: flex; flex-direction: column; gap: 10px; } /* ===== MENU ITEM ===== */ .menu-item { width: 100%; background: #d6d6d6; border: none; border-radius: 14px; padding: 18px 20px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; display: flex; align-items: center; gap: 14px; text-align: left; box-shadow: 4px 4px 10px rgba(0,0,0,0.15), -3px -3px 8px rgba(255,255,255,0.72); transition: box-shadow 0.18s, transform 0.15s, background 0.15s; animation: fadeInUp 0.35s ease forwards; opacity: 0; } .menu-item:nth-child(1) { animation-delay: 0.05s; } .menu-item:nth-child(2) { animation-delay: 0.10s; } .menu-item:nth-child(3) { animation-delay: 0.15s; } .menu-item:nth-child(4) { animation-delay: 0.20s; } .menu-item:nth-child(5) { animation-delay: 0.25s; } .menu-item:nth-child(6) { animation-delay: 0.30s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .menu-item:hover { background: #dcdcdc; transform: translateX(4px); box-shadow: 6px 6px 14px rgba(0,0,0,0.18), -3px -3px 8px rgba(255,255,255,0.75); } .menu-item:active { transform: scale(0.98); box-shadow: 2px 2px 6px rgba(0,0,0,0.12), -1px -1px 4px rgba(255,255,255,0.6); } .menu-icon { font-size: 20px; flex-shrink: 0; } .menu-label { flex: 1; line-height: 1.4; } .menu-arrow { color: #aaa; font-size: 18px; font-weight: 300; } /* ===== MODAL OVERLAY ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .modal-overlay.open { opacity: 1; pointer-events: all; } /* ===== MODAL BOX ===== */ .modal-box { background: #d6d6d6; border-radius: 24px 24px 0 0; padding: 30px 26px 40px; width: 100%; max-width: 480px; position: relative; transform: translateY(40px); transition: transform 0.3s cubic-bezier(.22,.68,0,1.2); box-shadow: 0 -6px 30px rgba(0,0,0,0.18); } .modal-overlay.open .modal-box { transform: translateY(0); } /* drag handle */ .modal-box::before { content: ''; display: block; width: 40px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 2px; margin: 0 auto 20px; } .modal-close { position: absolute; top: 18px; right: 18px; background: rgba(0,0,0,0.1); border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; transition: background 0.2s; } .modal-close:hover { background: rgba(0,0,0,0.18); } .modal-title { font-size: 17px; font-weight: 700; color: #222; margin-bottom: 22px; } /* ===== FORM ELEMENTS ===== */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-bottom: 6px; } .form-input, .form-select, .form-textarea { width: 100%; background: #e0e0e0; border: none; border-radius: 10px; padding: 12px 14px; font-family: Arial, sans-serif; font-size: 14px; color: #333; outline: none; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.7); transition: box-shadow 0.2s; } .form-input:focus, .form-select:focus, .form-textarea:focus { box-shadow: inset 3px 3px 7px rgba(0,0,0,0.15), inset -2px -2px 5px rgba(255,255,255,0.65); } .form-textarea { resize: vertical; min-height: 90px; } /* ===== TYPE TABS ===== */ .type-tabs { display: flex; gap: 8px; margin-bottom: 18px; background: #ccc; border-radius: 12px; padding: 4px; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -1px -1px 4px rgba(255,255,255,0.6); } .type-tab { flex: 1; padding: 10px; background: none; border: none; border-radius: 9px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .type-tab.active { background: #d6d6d6; color: #333; box-shadow: 3px 3px 7px rgba(0,0,0,0.14), -2px -2px 5px rgba(255,255,255,0.7); } /* ===== MODAL BUTTON ===== */ .modal-btn { width: 100%; background: #d0d0d0; border: none; border-radius: 14px; padding: 14px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; color: #444; cursor: pointer; margin-top: 6px; box-shadow: 4px 4px 10px rgba(0,0,0,0.15), -3px -3px 8px rgba(255,255,255,0.72); transition: box-shadow 0.2s, transform 0.15s; } .modal-btn:hover { box-shadow: 6px 6px 14px rgba(0,0,0,0.18), -3px -3px 8px rgba(255,255,255,0.75); transform: translateY(-1px); } .modal-btn:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12); transform: scale(0.98); } /* ===== COLOR PICKER ===== */ .color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; } .color-swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .color-swatch:hover { transform: scale(1.15); box-shadow: 3px 3px 10px rgba(0,0,0,0.25); } .color-swatch.selected { border-color: #333; transform: scale(1.12); } /* ===== LANGUAGE LIST ===== */ .lang-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .lang-item { background: #d8d8d8; border: none; border-radius: 12px; padding: 13px 16px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; display: flex; align-items: center; gap: 12px; box-shadow: 3px 3px 7px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.65); transition: box-shadow 0.18s, background 0.18s; text-align: left; width: 100%; } .lang-item:hover { background: #ddd; } .lang-item.selected { background: #cacaca; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.12), inset -1px -1px 4px rgba(255,255,255,0.6); color: #222; font-weight: 700; } .lang-flag { font-size: 20px; } /* ===== USER LIST ===== */ .user-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .user-item { background: #d8d8d8; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 3px 3px 7px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.65); cursor: pointer; transition: background 0.18s; font-size: 14px; color: #333; font-weight: 500; border: none; width: 100%; text-align: left; font-family: Arial, sans-serif; } .user-item:hover { background: #ddd; } .user-item.active { background: #cacaca; font-weight: 700; } .user-badge { font-size: 11px; background: rgba(0,0,0,0.1); padding: 2px 8px; border-radius: 20px; margin-left: auto; color: #555; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(50,50,50,0.9); color: #fff; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; padding: 12px 28px; border-radius: 50px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; z-index: 300; box-shadow: 0 4px 20px rgba(0,0,0,0.25); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== RESPONSIVE ===== */ @media (max-width: 480px) { .color-grid { grid-template-columns: repeat(5, 1fr); } .modal-box { padding: 24px 18px 32px; } } /*========================სავაჭრო სფერო=================================================*/ /* ===== WRAPPER ===== */ .page-wrapper { position: relative; z-index: 1; width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 14px; } /* ===== BACK ===== */ .back-btn { align-self: flex-start; background: rgba(255,192,192,0.55); border: 1px solid rgba(255,150,150,0.4); border-radius: 8px; padding: 8px 18px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; color: #5a2a2a; cursor: pointer; transition: background 0.2s, transform 0.15s; } .back-btn:hover { background: rgba(255,160,160,0.75); transform: translateX(-2px); } /* ===== AI BANNER ===== */ .ai-banner { width: 100%; background: rgba(70,110,100,0.85); border: 1.5px solid rgba(120,180,160,0.5); border-radius: 12px; padding: 14px 20px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; color: #e0f4ee; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.2s, transform 0.15s; backdrop-filter: blur(6px); text-align: left; } .ai-banner:hover { background: rgba(70,120,110,0.92); transform: translateY(-1px); } .ai-icon { font-size: 18px; } .ai-arrow { margin-left: auto; font-size: 18px; transition: transform 0.2s; } .ai-arrow.open { transform: rotate(90deg); } /* ===== AI BOX ===== */ .ai-box { background: rgba(255,255,255,0.9); border-radius: 12px; padding: 16px; display: none; flex-direction: column; gap: 10px; animation: fadeIn 0.25s ease; backdrop-filter: blur(8px); } .ai-box.open { display: flex; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .ai-textarea { width: 100%; border: 1.5px solid #ccc; border-radius: 10px; padding: 12px 14px; font-family: Arial, sans-serif; font-size: 14px; color: #333; resize: none; min-height: 80px; outline: none; transition: border-color 0.2s; } .ai-textarea:focus { border-color: #7aab9a; } .btn-ai-send { align-self: flex-end; background: #4a8a78; color: #fff; border: none; border-radius: 10px; padding: 10px 22px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.15s; } .btn-ai-send:hover { background: #3a7060; transform: translateY(-1px); } /* ===== FORM CARD ===== */ .form-card { background: rgba(200,220,230,0.82); border-radius: 20px; padding: 20px; backdrop-filter: blur(10px); box-shadow: 0 4px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 16px; } /* ===== TABLE SECTION ===== */ .table-section { background: rgba(180,205,220,0.7); border-radius: 14px; padding: 14px; } /* mode tabs */ .table-header { display: flex; align-items: center; gap: 0; margin-bottom: 12px; background: rgba(160,190,210,0.5); border-radius: 10px; padding: 4px; width: fit-content; } .tab-btn { background: none; border: none; border-radius: 8px; padding: 8px 20px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #5a7080; cursor: pointer; transition: background 0.18s, color 0.18s; } .tab-btn.active { background: rgba(160,190,215,0.9); color: #2a4555; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .diamond { color: #cc6633; font-size: 18px; padding: 0 2px; line-height: 1; } .rows-label { font-size: 13px; font-weight: 700; color: #3a5565; background: rgba(200,220,230,0.6); padding: 6px 12px; border-radius: 8px; margin-bottom: 8px; display: inline-block; } .rows-hint { font-size: 12px; color: #6a8898; margin-bottom: 10px; font-style: italic; } /* ===== ROWS TABLE ===== */ .rows-table { width: 100%; border-collapse: collapse; } .rows-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #5a7888; padding: 6px 8px; border-bottom: 1.5px solid rgba(100,150,180,0.3); } .rows-table td { padding: 5px 5px; } .cell-input { width: 100%; background: rgba(220,235,245,0.85); border: 1.5px solid rgba(150,190,215,0.5); border-radius: 8px; padding: 9px 10px; font-family: Arial, sans-serif; font-size: 20px; color: #2a4050; outline: none; transition: border-color 0.2s, background 0.2s; } .cell-input:focus { border-color: #7aacca; background: rgba(235,245,255,0.95); } .qty-input { width: 70px; text-align: center; } .btn-del { background: none; border: none; color: #c05050; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; } .btn-del:hover { background: rgba(200,80,80,0.1); } .btn-add-row { width: 100%; background: none; border: 1.5px dashed rgba(100,150,185,0.5); border-radius: 8px; padding: 9px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #5a8aa8; cursor: pointer; margin-top: 8px; transition: border-color 0.2s, color 0.2s, background 0.2s; } .btn-add-row:hover { border-color: #5a8aa8; background: rgba(150,200,230,0.15); color: #3a6888; } /* ===== COMMENT ===== */ .comment-section { } .comment-input { width: 100%; background: rgba(220,235,245,0.85); border: 1.5px solid rgba(150,190,215,0.5); border-radius: 12px; padding: 13px 16px; font-family: Arial, sans-serif; font-size: 14px; color: #3a5060; resize: none; min-height: 90px; outline: none; transition: border-color 0.2s, background 0.2s; } .comment-input:focus { border-color: #7aacca; background: rgba(235,245,255,0.95); } .comment-input::placeholder { color: #8aabbc; } /* ===== PHOTOS ===== */ .photos-section { } .photos-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } @media (max-width: 500px) { .photos-grid { grid-template-columns: repeat(4, 1fr); } } .photo-slot { aspect-ratio: 1; background: rgba(200,220,235,0.7); border: 1.5px dashed rgba(130,170,200,0.6); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; transition: border-color 0.2s, background 0.2s, transform 0.15s; } .photo-slot:hover { border-color: #7aacca; background: rgba(210,230,245,0.9); transform: scale(1.04); } .photo-slot .plus { font-size: 22px; color: #7aacca; font-weight: 300; line-height: 1; } .photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .photo-slot .del-photo { position: absolute; top: 3px; right: 3px; background: rgba(200,60,60,0.85); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; cursor: pointer; display: none; align-items: center; justify-content: center; line-height: 1; } .photo-slot:hover .del-photo { display: flex; } /* ===== SEND BUTTON ===== */ .btn-send { align-self: flex-end; background: #5a8a3a; color: #fff; border: none; border-radius: 12px; padding: 14px 38px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(80,130,50,0.35); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; } .btn-send:hover { background: #4a7830; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(80,130,50,0.45); } .btn-send:active { transform: scale(0.97); } /* ===== SOCIAL SIDEBAR ===== */ .social-bar { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 50; } .soc-btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; text-decoration: none; color: #fff; border: none; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; box-shadow: 0 3px 12px rgba(0,0,0,0.25); } .soc-btn:hover { transform: scale(1.12); box-shadow: 0 5px 18px rgba(0,0,0,0.3); } .soc-btn.chat { background: #aaa; font-size: 22px; } .soc-btn.fb { background: #1877f2; } .soc-btn.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); font-size: 20px; } .soc-btn.wa { background: #25d366; font-size: 20px; } /* ===== SUCCESS OVERLAY ===== */ .success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .success-overlay.open { opacity: 1; pointer-events: all; } .success-box { background: rgba(240,248,244,0.97); border-radius: 22px; padding: 40px 44px; text-align: center; max-width: 380px; width: 90%; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); animation: popIn 0.35s cubic-bezier(.22,.68,0,1.2); } @keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .s-icon { font-size: 60px; } .s-title { font-size: 20px; font-weight: 800; color: #3a6a4a; } .s-sub { font-size: 14px; color: #6a8878; } .offer-link { background: rgba(90,140,60,0.12); border: 1.5px solid rgba(90,140,60,0.3); border-radius: 14px; padding: 16px 36px; text-decoration: none; cursor: pointer; transition: background 0.2s; width: 100%; } .offer-link:hover { background: rgba(90,140,60,0.2); } .offer-count { font-size: 48px; font-weight: 900; color: #4a8a38; line-height: 1; } .offer-label { font-size: 13px; color: #6a8878; margin-top: 4px; } /* ===== TOAST ===== */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(40,40,40,0.9); color: #fff; font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; padding: 11px 28px; border-radius: 50px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; z-index: 300; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 600px) { .social-bar { display: none; } .btn-send { align-self: stretch; } } /*==================ბინის ქირაობა, სასტუმრო=======================================*/ .page-wrapper { position:relative; z-index:1; width:100%; max-width:700px; display:flex; flex-direction:column; gap:14px; } /* BACK */ .back-btn { align-self:flex-start; background:rgba(255,192,192,0.55); border:1px solid rgba(255,150,150,0.4); border-radius:8px; padding:8px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#5a2a2a; cursor:pointer; transition:background 0.2s, transform 0.15s; } .back-btn:hover { background:rgba(255,160,160,0.75); transform:translateX(-2px); } /* FILTERS */ .filters-section { background:rgba(255,255,255,0.82); border-radius:16px; padding:18px 20px; backdrop-filter:blur(10px); box-shadow:0 3px 16px rgba(0,0,0,0.10); display:flex; flex-direction:column; gap:14px; } .filter-group { display:flex; flex-direction:column; gap:6px; } .filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; } /* chips */ .chips-row { display:flex; gap:8px; flex-wrap:wrap; } .chip { background:#f0f0f0; border:1.5px solid #ddd; border-radius:8px; padding:8px 16px; font-family:Arial,sans-serif; font-size:13px; font-weight:600; color:#555; cursor:pointer; transition:all 0.18s; } .chip:hover { background:#e8e8e8; border-color:#bbb; } .chip.selected { background:#fff; border-color:#555; color:#222; box-shadow:0 2px 8px rgba(0,0,0,0.1); } /* date */ .date-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .date-input { border:1.5px solid #ddd; border-radius:8px; padding:8px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; background:#f8f8f8; transition:border-color 0.2s; } .date-input:focus { border-color:#aaa; } .date-sep { color:#bbb; font-size:16px; } .date-display { background:#f0f0f0; border:1.5px solid #ddd; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; color:#555; } /* location */ .location-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:480px) { .location-row { grid-template-columns:1fr; } } .filter-select { width:100%; background:#f8f8f8; border:1.5px solid #ddd; border-radius:8px; padding:9px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; cursor:pointer; transition:border-color 0.2s; } .filter-select:focus { border-color:#aaa; } .select-preview { font-size:13px; font-weight:700; color:#333; background:#fff; border:1.5px solid #ccc; border-radius:8px; padding:7px 12px; margin-top:4px; display:inline-block; } /* checkbox */ .checkbox-row { display:flex; align-items:flex-start; gap:10px; font-size:12px; color:#666; cursor:pointer; line-height:1.5; } .checkbox-row input[type="checkbox"] { accent-color:#555; width:16px; height:16px; margin-top:2px; flex-shrink:0; } .checkbox-box { width:20px; height:20px; flex-shrink:0; border:2px solid #ccc; border-radius:4px; margin-top:2px; transition:border-color 0.2s; } /* FORM CARD */ .form-card { background:rgba(200,220,230,0.82); border-radius:20px; padding:20px; backdrop-filter:blur(10px); box-shadow:0 4px 24px rgba(0,0,0,0.12); display:flex; flex-direction:column; gap:14px; } /* TABLE SECTION */ .table-section { background:rgba(175,205,225,0.7); border-radius:14px; padding:14px; } .table-top { display:flex; align-items:flex-end; gap:16px; margin-bottom:12px; flex-wrap:wrap; } /* unit select */ .unit-select-wrap { display:flex; flex-direction:column; gap:5px; flex:1; } .unit-select { background:rgba(220,235,245,0.9); border:1.5px solid rgba(150,190,215,0.6); border-radius:10px; padding:10px 14px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#2a4555; outline:none; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:border-color 0.2s; } .unit-select:focus { border-color:#7aacca; } /* qty toggle */ .qty-toggle { display:flex; align-items:center; gap:8px; flex-shrink:0; } .qty-label { font-size:13px; font-weight:600; color:#3a5565; } .toggle-switch { position:relative; width:44px; height:24px; display:inline-block; } .toggle-switch input { opacity:0; width:0; height:0; } .toggle-slider { position:absolute; inset:0; background:#bbb; border-radius:24px; cursor:pointer; transition:background 0.2s; } .toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 4px rgba(0,0,0,0.2); } .toggle-switch input:checked + .toggle-slider { background:#5a8a78; } .toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); } .rows-hint { font-size:12px; color:#6a8898; margin-bottom:10px; font-style:italic; } /* ROWS TABLE */ .rows-table { width:100%; border-collapse:collapse; } .rows-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#5a7888; padding:6px 8px; border-bottom:1.5px solid rgba(100,150,180,0.3); } .rows-table td { padding:5px 5px; } .cell-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:8px; padding:9px 10px; font-family:Arial,sans-serif; font-size:13px; color:#2a4050; outline:none; transition:border-color 0.2s, background 0.2s; } .cell-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .qty-input { width:70px; text-align:center; } .btn-del { background:none; border:none; color:#c05050; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background 0.15s; } .btn-del:hover { background:rgba(200,80,80,0.1); } .btn-add-row { width:100%; background:none; border:1.5px dashed rgba(100,150,185,0.5); border-radius:8px; padding:9px; font-family:Arial,sans-serif; font-size:13px; font-weight:600; color:#5a8aa8; cursor:pointer; margin-top:8px; transition:border-color 0.2s, color 0.2s, background 0.2s; } .btn-add-row:hover { border-color:#5a8aa8; background:rgba(150,200,230,0.15); color:#3a6888; } /* COMMENT */ .comment-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:12px; padding:13px 16px; font-family:Arial,sans-serif; font-size:14px; color:#3a5060; resize:none; min-height:90px; outline:none; transition:border-color 0.2s, background 0.2s; } .comment-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .comment-input::placeholder { color:#8aabbc; } /* AI BANNER */ .ai-banner { width:100%; background:rgba(65,105,95,0.88); border:1.5px solid rgba(120,180,160,0.4); border-radius:12px; padding:13px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#d8f0e8; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background 0.2s, transform 0.15s; text-align:left; } .ai-banner:hover { background:rgba(65,115,105,0.95); transform:translateY(-1px); } .ai-arr { margin-left:auto; font-size:18px; transition:transform 0.2s; } .ai-arr.open { transform:rotate(90deg); } .ai-box { display:none; flex-direction:column; gap:10px; background:rgba(230,242,248,0.9); border-radius:12px; padding:14px; animation:fadeSlide 0.25s ease; } .ai-box.open { display:flex; } @keyframes fadeSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} } .ai-textarea { width:100%; border:1.5px solid #b0cfe0; border-radius:10px; padding:11px 14px; font-family:Arial,sans-serif; font-size:14px; color:#333; resize:none; min-height:75px; outline:none; background:#fff; transition:border-color 0.2s; } .ai-textarea:focus { border-color:#7aacca; } .btn-ai { align-self:flex-end; background:#4a8a78; color:#fff; border:none; border-radius:10px; padding:10px 22px; font-family:Arial,sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s, transform 0.15s; } .btn-ai:hover { background:#3a7060; transform:translateY(-1px); } /* SEND */ .btn-send { align-self:flex-end; background:#5a8a3a; color:#fff; border:none; border-radius:12px; padding:14px 38px; font-family:Arial,sans-serif; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 4px 18px rgba(80,130,50,0.35); transition:background 0.2s, transform 0.15s, box-shadow 0.2s; } .btn-send:hover { background:#4a7830; transform:translateY(-2px); box-shadow:0 6px 24px rgba(80,130,50,0.45); } .btn-send:active { transform:scale(0.97); } /* SOCIAL */ .social-bar { position:fixed; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:50; } .soc { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; text-decoration:none; color:#fff; box-shadow:0 3px 12px rgba(0,0,0,0.25); transition:transform 0.18s, box-shadow 0.18s; } .soc:hover { transform:scale(1.12); box-shadow:0 5px 18px rgba(0,0,0,0.3); } .soc.chat { background:#aaa; font-size:22px; } .soc.fb { background:#1877f2; } .soc.ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); font-size:20px; } .soc.wa { background:#25d366; font-size:20px; } /* SUCCESS */ .success-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.25s; } .success-overlay.open { opacity:1; pointer-events:all; } .success-box { background:rgba(240,248,244,0.97); border-radius:22px; padding:40px 44px; text-align:center; max-width:380px; width:90%; display:flex; flex-direction:column; align-items:center; gap:16px; box-shadow:0 8px 40px rgba(0,0,0,0.2); animation:popIn 0.35s cubic-bezier(.22,.68,0,1.2); } @keyframes popIn { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} } .s-icon { font-size:60px; } .s-title { font-size:20px; font-weight:800; color:#3a6a4a; } .s-sub { font-size:14px; color:#6a8878; } .offer-wrap { background:rgba(90,140,60,0.12); border:1.5px solid rgba(90,140,60,0.3); border-radius:14px; padding:16px 48px; width:100%; } .offer-num { font-size:48px; font-weight:900; color:#4a8a38; line-height:1; } .offer-lbl { font-size:13px; color:#6a8878; margin-top:4px; } /* TOAST */ .toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(40,40,40,0.9); color:#fff; font-family:Arial,sans-serif; font-size:13px; font-weight:600; padding:11px 28px; border-radius:50px; opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s; white-space:nowrap; z-index:300; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:600px) { .social-bar { display:none; } .btn-send { align-self:stretch; } } /*==================დისტირბუცია=======================================*/ .page-wrapper { position:relative; z-index:1; width:100%; max-width:720px; display:flex; flex-direction:column; gap:14px; } /* BACK */ .back-btn { align-self:flex-start; background:rgba(255,192,192,0.55); border:1px solid rgba(255,150,150,0.4); border-radius:8px; padding:8px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#5a2a2a; cursor:pointer; transition:background 0.2s, transform 0.15s; } .back-btn:hover { background:rgba(255,160,160,0.75); transform:translateX(-2px); } /* FILTERS */ .filters-section { background:rgba(255,255,255,0.85); border-radius:16px; padding:20px 22px; backdrop-filter:blur(10px); box-shadow:0 3px 16px rgba(0,0,0,0.10); display:flex; flex-direction:column; gap:18px; } .filter-group { display:flex; flex-direction:column; gap:6px; } .filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; } .location-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:480px) { .location-row { grid-template-columns:1fr; } } .filter-select { width:100%; background:#f8f8f8; border:1.5px solid #ddd; border-radius:8px; padding:10px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; cursor:pointer; transition:border-color 0.2s, opacity 0.2s; } .filter-select:focus { border-color:#aaa; } .filter-select:disabled { opacity:0.5; cursor:not-allowed; background:#eee; } /* BUY/SELL */ .buysell-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:600px) { .buysell-row { grid-template-columns:1fr; } } .buysell-block { display:flex; flex-direction:column; gap:10px; } .checkbox-row { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#333; cursor:pointer; } .checkbox-row input[type="checkbox"] { width:20px; height:20px; accent-color:#5a8a3a; cursor:pointer; } /* category panel */ .cat-panel { display:none; flex-direction:column; gap:8px; background:#f5f5f5; border-radius:10px; padding:12px; animation:fadeSlide 0.25s ease; } .cat-panel.open { display:flex; } @keyframes fadeSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } .cat-chips { display:flex; flex-wrap:wrap; gap:8px; } .cat-chip { background:#fff; border:1.5px solid #ddd; border-radius:50px; padding:7px 14px; font-size:12px; font-weight:600; color:#666; cursor:pointer; transition:all 0.18s; } .cat-chip:hover { border-color:#aaa; } .cat-chip.selected { background:#5a8a3a; border-color:#5a8a3a; color:#fff; box-shadow:0 2px 8px rgba(90,138,58,0.35); } /* FORM CARD */ .form-card { background:rgba(200,220,230,0.82); border-radius:20px; padding:20px; backdrop-filter:blur(10px); box-shadow:0 4px 24px rgba(0,0,0,0.12); display:flex; flex-direction:column; gap:14px; } /* TABLE SECTION */ .table-section { background:rgba(175,205,225,0.7); border-radius:14px; padding:14px; } .rows-label { font-size:13px; font-weight:700; color:#3a5565; background:rgba(200,220,230,0.6); padding:6px 12px; border-radius:8px; margin-bottom:8px; display:inline-block; } .rows-hint { font-size:12px; color:#6a8898; margin-bottom:10px; font-style:italic; } .rows-table { width:100%; border-collapse:collapse; } .rows-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#5a7888; padding:6px 8px; border-bottom:1.5px solid rgba(100,150,180,0.3); } .rows-table td { padding:5px 5px; } .cell-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:8px; padding:9px 10px; font-family:Arial,sans-serif; font-size:13px; color:#2a4050; outline:none; transition:border-color 0.2s, background 0.2s; } .cell-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .unit-select { cursor:pointer; } .qty-input { text-align:center; } /* hide native number arrows for cleaner look (still functional) */ .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { opacity:1; } .btn-del { background:none; border:none; color:#c05050; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background 0.15s; } .btn-del:hover { background:rgba(200,80,80,0.1); } .btn-add-row { width:100%; background:none; border:1.5px dashed rgba(100,150,185,0.5); border-radius:8px; padding:9px; font-family:Arial,sans-serif; font-size:13px; font-weight:600; color:#5a8aa8; cursor:pointer; margin-top:8px; transition:border-color 0.2s, color 0.2s, background 0.2s; } .btn-add-row:hover { border-color:#5a8aa8; background:rgba(150,200,230,0.15); color:#3a6888; } /* COMMENT */ .comment-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:12px; padding:13px 16px; font-family:Arial,sans-serif; font-size:14px; color:#3a5060; resize:none; min-height:90px; outline:none; transition:border-color 0.2s, background 0.2s; } .comment-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .comment-input::placeholder { color:#8aabbc; } /* AI BANNER */ .ai-banner { width:100%; background:rgba(65,105,95,0.88); border:1.5px solid rgba(120,180,160,0.4); border-radius:12px; padding:13px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#d8f0e8; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background 0.2s, transform 0.15s; text-align:left; } .ai-banner:hover { background:rgba(65,115,105,0.95); transform:translateY(-1px); } .ai-arr { margin-left:auto; font-size:18px; transition:transform 0.2s; } .ai-arr.open { transform:rotate(90deg); } .ai-box { display:none; flex-direction:column; gap:10px; background:rgba(230,242,248,0.9); border-radius:12px; padding:14px; animation:fadeSlide 0.25s ease; } .ai-box.open { display:flex; } .ai-textarea { width:100%; border:1.5px solid #b0cfe0; border-radius:10px; padding:11px 14px; font-family:Arial,sans-serif; font-size:14px; color:#333; resize:none; min-height:75px; outline:none; background:#fff; transition:border-color 0.2s; } .ai-textarea:focus { border-color:#7aacca; } .btn-ai { align-self:flex-end; background:#4a8a78; color:#fff; border:none; border-radius:10px; padding:10px 22px; font-family:Arial,sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s, transform 0.15s; } .btn-ai:hover { background:#3a7060; transform:translateY(-1px); } /* SEND */ .btn-send { align-self:flex-end; background:#5a8a3a; color:#fff; border:none; border-radius:12px; padding:14px 38px; font-family:Arial,sans-serif; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 4px 18px rgba(80,130,50,0.35); transition:background 0.2s, transform 0.15s, box-shadow 0.2s; } .btn-send:hover { background:#4a7830; transform:translateY(-2px); box-shadow:0 6px 24px rgba(80,130,50,0.45); } .btn-send:active { transform:scale(0.97); } /* SOCIAL */ .social-bar { position:fixed; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:50; } .soc { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; text-decoration:none; color:#fff; box-shadow:0 3px 12px rgba(0,0,0,0.25); transition:transform 0.18s, box-shadow 0.18s; } .soc:hover { transform:scale(1.12); box-shadow:0 5px 18px rgba(0,0,0,0.3); } .soc.chat { background:#aaa; font-size:22px; } .soc.fb { background:#1877f2; } .soc.ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); font-size:20px; } .soc.wa { background:#25d366; font-size:20px; } /* SUCCESS */ .success-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.25s; } .success-overlay.open { opacity:1; pointer-events:all; } .success-box { background:rgba(240,248,244,0.97); border-radius:22px; padding:40px 44px; text-align:center; max-width:380px; width:90%; display:flex; flex-direction:column; align-items:center; gap:16px; box-shadow:0 8px 40px rgba(0,0,0,0.2); animation:popIn 0.35s cubic-bezier(.22,.68,0,1.2); } @keyframes popIn { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} } .s-icon { font-size:60px; } .s-title { font-size:20px; font-weight:800; color:#3a6a4a; } .s-sub { font-size:14px; color:#6a8878; } .offer-wrap { background:rgba(90,140,60,0.12); border:1.5px solid rgba(90,140,60,0.3); border-radius:14px; padding:16px 48px; width:100%; } .offer-num { font-size:48px; font-weight:900; color:#4a8a38; line-height:1; } .offer-lbl { font-size:13px; color:#6a8878; margin-top:4px; } /* TOAST */ .toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(40,40,40,0.9); color:#fff; font-family:Arial,sans-serif; font-size:13px; font-weight:600; padding:11px 28px; border-radius:50px; opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s; white-space:nowrap; z-index:300; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:600px) { .social-bar { display:none; } .btn-send { align-self:stretch; } } /*===========================სატრანსპორტო საკურიერო მომსახურება ====================*/ .page-wrapper { position:relative; z-index:1; width:100%; max-width:760px; display:flex; flex-direction:column; gap:14px; } /* BACK */ .back-btn { align-self:flex-start; background:rgba(255,192,192,0.55); border:1px solid rgba(255,150,150,0.4); border-radius:8px; padding:8px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#5a2a2a; cursor:pointer; transition:background 0.2s, transform 0.15s; } .back-btn:hover { background:rgba(255,160,160,0.75); transform:translateX(-2px); } /* FILTERS */ .filters-section { background:rgba(255,255,255,0.85); border-radius:16px; padding:20px 22px; backdrop-filter:blur(10px); box-shadow:0 3px 16px rgba(0,0,0,0.10); display:flex; flex-direction:column; gap:18px; } .filter-group { display:flex; flex-direction:column; gap:6px; } .filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; } /* ROUTE -დან / -მდე */ .route-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:640px) { .route-row { grid-template-columns:1fr; } } .route-block { display:flex; flex-direction:column; gap:8px; position:relative; } .route-tag { align-self:flex-start; background:#e8e0d0; color:#7a6a50; font-size:11px; font-weight:800; letter-spacing:0.5px; padding:3px 10px; border-radius:50px; text-transform:uppercase; } .location-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:480px) { .location-row { grid-template-columns:1fr; } } .filter-select, .filter-input { width:100%; background:#f8f8f8; border:1.5px solid #ddd; border-radius:8px; padding:10px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; cursor:pointer; transition:border-color 0.2s, opacity 0.2s; } .filter-select:focus, .filter-input:focus { border-color:#aaa; } .filter-select:disabled { opacity:0.5; cursor:not-allowed; background:#eee; } .date-input { cursor:text; } /* PHOTOS */ .photos-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } @media (max-width:560px) { .photos-grid { grid-template-columns:repeat(4,1fr); } } .photo-slot { aspect-ratio:1; background:rgba(200,220,235,0.7); border:1.5px dashed rgba(130,170,200,0.6); border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; transition:border-color 0.2s, background 0.2s, transform 0.15s; } .photo-slot:hover { border-color:#7aacca; background:rgba(210,230,245,0.9); transform:scale(1.04); } .photo-slot .plus { font-size:22px; color:#7aacca; font-weight:300; } .photo-slot img { width:100%; height:100%; object-fit:cover; border-radius:10px; } .photo-slot .del-photo { position:absolute; top:3px; right:3px; background:rgba(200,60,60,0.85); color:#fff; border:none; border-radius:50%; width:20px; height:20px; font-size:11px; cursor:pointer; display:none; align-items:center; justify-content:center; line-height:1; } .photo-slot:hover .del-photo { display:flex; } /* FORM CARD */ .form-card { background:rgba(200,220,230,0.82); border-radius:20px; padding:20px; backdrop-filter:blur(10px); box-shadow:0 4px 24px rgba(0,0,0,0.12); display:flex; flex-direction:column; gap:14px; } /* TABLE SECTION */ .table-section { background:rgba(175,205,225,0.7); border-radius:14px; padding:14px; } .rows-label { font-size:13px; font-weight:700; color:#3a5565; background:rgba(200,220,230,0.6); padding:6px 12px; border-radius:8px; margin-bottom:8px; display:inline-block; } .rows-hint { font-size:12px; color:#6a8898; margin-bottom:10px; font-style:italic; } .rows-table { width:100%; border-collapse:collapse; } .rows-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#5a7888; padding:6px 6px; border-bottom:1.5px solid rgba(100,150,180,0.3); } .rows-table td { padding:5px 4px; } .cell-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:8px; padding:9px 8px; font-family:Arial,sans-serif; font-size:13px; color:#2a4050; outline:none; transition:border-color 0.2s, background 0.2s; } .cell-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .unit-select { cursor:pointer; } .qty-input { text-align:center; } .btn-del { background:none; border:none; color:#c05050; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background 0.15s; } .btn-del:hover { background:rgba(200,80,80,0.1); } .btn-add-row { width:100%; background:none; border:1.5px dashed rgba(100,150,185,0.5); border-radius:8px; padding:9px; font-family:Arial,sans-serif; font-size:13px; font-weight:600; color:#5a8aa8; cursor:pointer; margin-top:8px; transition:border-color 0.2s, color 0.2s, background 0.2s; } .btn-add-row:hover { border-color:#5a8aa8; background:rgba(150,200,230,0.15); color:#3a6888; } /* COMMENT */ .comment-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:12px; padding:13px 16px; font-family:Arial,sans-serif; font-size:14px; color:#3a5060; resize:none; min-height:90px; outline:none; transition:border-color 0.2s, background 0.2s; } .comment-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .comment-input::placeholder { color:#8aabbc; } /* AI BANNER */ .ai-banner { width:100%; background:rgba(65,105,95,0.88); border:1.5px solid rgba(120,180,160,0.4); border-radius:12px; padding:13px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#d8f0e8; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background 0.2s, transform 0.15s; text-align:left; } .ai-banner:hover { background:rgba(65,115,105,0.95); transform:translateY(-1px); } .ai-arr { margin-left:auto; font-size:18px; transition:transform 0.2s; } .ai-arr.open { transform:rotate(90deg); } .ai-box { display:none; flex-direction:column; gap:10px; background:rgba(230,242,248,0.9); border-radius:12px; padding:14px; animation:fadeSlide 0.25s ease; } .ai-box.open { display:flex; } @keyframes fadeSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } .ai-textarea { width:100%; border:1.5px solid #b0cfe0; border-radius:10px; padding:11px 14px; font-family:Arial,sans-serif; font-size:14px; color:#333; resize:none; min-height:75px; outline:none; background:#fff; transition:border-color 0.2s; } .ai-textarea:focus { border-color:#7aacca; } .btn-ai { align-self:flex-end; background:#4a8a78; color:#fff; border:none; border-radius:10px; padding:10px 22px; font-family:Arial,sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s, transform 0.15s; } .btn-ai:hover { background:#3a7060; transform:translateY(-1px); } /* SEND */ .btn-send { align-self:flex-end; background:#5a8a3a; color:#fff; border:none; border-radius:12px; padding:14px 38px; font-family:Arial,sans-serif; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 4px 18px rgba(80,130,50,0.35); transition:background 0.2s, transform 0.15s, box-shadow 0.2s; } .btn-send:hover { background:#4a7830; transform:translateY(-2px); box-shadow:0 6px 24px rgba(80,130,50,0.45); } .btn-send:active { transform:scale(0.97); } /* SOCIAL */ .social-bar { position:fixed; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:50; } .soc { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; text-decoration:none; color:#fff; box-shadow:0 3px 12px rgba(0,0,0,0.25); transition:transform 0.18s, box-shadow 0.18s; } .soc:hover { transform:scale(1.12); box-shadow:0 5px 18px rgba(0,0,0,0.3); } .soc.chat { background:#aaa; font-size:22px; } .soc.fb { background:#1877f2; } .soc.ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); font-size:20px; } .soc.wa { background:#25d366; font-size:20px; } /* SUCCESS */ .success-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.25s; } .success-overlay.open { opacity:1; pointer-events:all; } .success-box { background:rgba(240,248,244,0.97); border-radius:22px; padding:40px 44px; text-align:center; max-width:380px; width:90%; display:flex; flex-direction:column; align-items:center; gap:16px; box-shadow:0 8px 40px rgba(0,0,0,0.2); animation:popIn 0.35s cubic-bezier(.22,.68,0,1.2); } @keyframes popIn { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} } .s-icon { font-size:60px; } .s-title { font-size:20px; font-weight:800; color:#3a6a4a; } .s-sub { font-size:14px; color:#6a8878; } .offer-wrap { background:rgba(90,140,60,0.12); border:1.5px solid rgba(90,140,60,0.3); border-radius:14px; padding:16px 48px; width:100%; } .offer-num { font-size:48px; font-weight:900; color:#4a8a38; line-height:1; } .offer-lbl { font-size:13px; color:#6a8878; margin-top:4px; } /* TOAST */ .toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(40,40,40,0.9); color:#fff; font-family:Arial,sans-serif; font-size:13px; font-weight:600; padding:11px 28px; border-radius:50px; opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s; white-space:nowrap; z-index:300; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:600px) { .social-bar { display:none; } .btn-send { align-self:stretch; } } /*===========================სარემონტო მომსახურება ====================*/ .page-wrapper { position:relative; z-index:1; width:100%; max-width:720px; display:flex; flex-direction:column; gap:14px; } /* BACK */ .back-btn { align-self:flex-start; background:rgba(255,192,192,0.55); border:1px solid rgba(255,150,150,0.4); border-radius:8px; padding:8px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#5a2a2a; cursor:pointer; transition:background 0.2s, transform 0.15s; } .back-btn:hover { background:rgba(255,160,160,0.75); transform:translateX(-2px); } /* FILTERS */ .filters-section { background:rgba(255,255,255,0.85); border-radius:16px; padding:20px 22px; backdrop-filter:blur(10px); box-shadow:0 3px 16px rgba(0,0,0,0.10); display:flex; flex-direction:column; gap:16px; } .filter-group { display:flex; flex-direction:column; gap:6px; } .filter-group.hidden { display:none; } .filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; } /* chips */ .chips-row { display:flex; gap:8px; flex-wrap:wrap; } .chip { background:#f0f0f0; border:1.5px solid #ddd; border-radius:8px; padding:8px 16px; font-family:Arial,sans-serif; font-size:13px; font-weight:600; color:#555; cursor:pointer; transition:all 0.18s; } .chip:hover { background:#e8e8e8; border-color:#bbb; } .chip.selected { background:#fff; border-color:#555; color:#222; box-shadow:0 2px 8px rgba(0,0,0,0.1); } /* floor input */ .filter-input { width:100%; background:#f8f8f8; border:1.5px solid #ddd; border-radius:8px; padding:9px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; transition:border-color 0.2s, opacity 0.2s, max-height 0.25s; } .filter-input:focus { border-color:#aaa; } #floorInput { max-width:160px; } /* date */ .date-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .date-input { border:1.5px solid #ddd; border-radius:8px; padding:8px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; background:#f8f8f8; transition:border-color 0.2s; } .date-input:focus { border-color:#aaa; } .date-sep { color:#bbb; font-size:16px; } .date-display { background:#f0f0f0; border:1.5px solid #ddd; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; color:#555; } /* location */ .location-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:480px) { .location-row { grid-template-columns:1fr; } } .filter-select { width:100%; background:#f8f8f8; border:1.5px solid #ddd; border-radius:8px; padding:9px 12px; font-family:Arial,sans-serif; font-size:13px; color:#333; outline:none; cursor:pointer; transition:border-color 0.2s; } .filter-select:focus { border-color:#aaa; } /* FORM CARD */ .form-card { background:rgba(200,220,230,0.82); border-radius:20px; padding:20px; backdrop-filter:blur(10px); box-shadow:0 4px 24px rgba(0,0,0,0.12); display:flex; flex-direction:column; gap:14px; } /* TABLE SECTION */ .table-section { background:rgba(175,205,225,0.7); border-radius:14px; padding:14px; } .rows-label { font-size:13px; font-weight:700; color:#3a5565; background:rgba(200,220,230,0.6); padding:6px 12px; border-radius:8px; margin-bottom:8px; display:inline-block; } .rows-hint { font-size:12px; color:#6a8898; margin-bottom:10px; font-style:italic; } .rows-table { width:100%; border-collapse:collapse; } .rows-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#5a7888; padding:6px 8px; border-bottom:1.5px solid rgba(100,150,180,0.3); } .rows-table td { padding:5px 5px; } .cell-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:8px; padding:9px 10px; font-family:Arial,sans-serif; font-size:13px; color:#2a4050; outline:none; transition:border-color 0.2s, background 0.2s; } .cell-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .btn-del { background:none; border:none; color:#c05050; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background 0.15s; } .btn-del:hover { background:rgba(200,80,80,0.1); } .btn-add-row { width:100%; background:none; border:1.5px dashed rgba(100,150,185,0.5); border-radius:8px; padding:9px; font-family:Arial,sans-serif; font-size:13px; font-weight:600; color:#5a8aa8; cursor:pointer; margin-top:8px; transition:border-color 0.2s, color 0.2s, background 0.2s; } .btn-add-row:hover { border-color:#5a8aa8; background:rgba(150,200,230,0.15); color:#3a6888; } /* COMMENT */ .comment-input { width:100%; background:rgba(220,235,245,0.85); border:1.5px solid rgba(150,190,215,0.5); border-radius:12px; padding:13px 16px; font-family:Arial,sans-serif; font-size:14px; color:#3a5060; resize:none; min-height:90px; outline:none; transition:border-color 0.2s, background 0.2s; } .comment-input:focus { border-color:#7aacca; background:rgba(235,245,255,0.95); } .comment-input::placeholder { color:#8aabbc; } /* PHOTOS */ .photos-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } @media (max-width:560px) { .photos-grid { grid-template-columns:repeat(4,1fr); } } .photo-slot { aspect-ratio:1; background:rgba(200,220,235,0.7); border:1.5px dashed rgba(130,170,200,0.6); border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; transition:border-color 0.2s, background 0.2s, transform 0.15s; } .photo-slot:hover { border-color:#7aacca; background:rgba(210,230,245,0.9); transform:scale(1.04); } .photo-slot .plus { font-size:22px; color:#7aacca; font-weight:300; } .photo-slot img { width:100%; height:100%; object-fit:cover; border-radius:10px; } .photo-slot .del-photo { position:absolute; top:3px; right:3px; background:rgba(200,60,60,0.85); color:#fff; border:none; border-radius:50%; width:20px; height:20px; font-size:11px; cursor:pointer; display:none; align-items:center; justify-content:center; line-height:1; } .photo-slot:hover .del-photo { display:flex; } /* AI BANNER */ .ai-banner { width:100%; background:rgba(65,105,95,0.88); border:1.5px solid rgba(120,180,160,0.4); border-radius:12px; padding:13px 18px; font-family:Arial,sans-serif; font-size:14px; font-weight:600; color:#d8f0e8; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background 0.2s, transform 0.15s; text-align:left; } .ai-banner:hover { background:rgba(65,115,105,0.95); transform:translateY(-1px); } .ai-arr { margin-left:auto; font-size:18px; transition:transform 0.2s; } .ai-arr.open { transform:rotate(90deg); } .ai-box { display:none; flex-direction:column; gap:10px; background:rgba(230,242,248,0.9); border-radius:12px; padding:14px; animation:fadeSlide 0.25s ease; } .ai-box.open { display:flex; } @keyframes fadeSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } .ai-textarea { width:100%; border:1.5px solid #b0cfe0; border-radius:10px; padding:11px 14px; font-family:Arial,sans-serif; font-size:14px; color:#333; resize:none; min-height:75px; outline:none; background:#fff; transition:border-color 0.2s; } .ai-textarea:focus { border-color:#7aacca; } .btn-ai { align-self:flex-end; background:#4a8a78; color:#fff; border:none; border-radius:10px; padding:10px 22px; font-family:Arial,sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s, transform 0.15s; } .btn-ai:hover { background:#3a7060; transform:translateY(-1px); } /* SEND */ .btn-send { align-self:flex-end; background:#5a8a3a; color:#fff; border:none; border-radius:12px; padding:14px 38px; font-family:Arial,sans-serif; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 4px 18px rgba(80,130,50,0.35); transition:background 0.2s, transform 0.15s, box-shadow 0.2s; } .btn-send:hover { background:#4a7830; transform:translateY(-2px); box-shadow:0 6px 24px rgba(80,130,50,0.45); } .btn-send:active { transform:scale(0.97); } /* SOCIAL */ .social-bar { position:fixed; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:50; } .soc { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; text-decoration:none; color:#fff; box-shadow:0 3px 12px rgba(0,0,0,0.25); transition:transform 0.18s, box-shadow 0.18s; } .soc:hover { transform:scale(1.12); box-shadow:0 5px 18px rgba(0,0,0,0.3); } .soc.chat { background:#aaa; font-size:22px; } .soc.fb { background:#1877f2; } .soc.ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); font-size:20px; } .soc.wa { background:#25d366; font-size:20px; } /* SUCCESS */ .success-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.25s; } .success-overlay.open { opacity:1; pointer-events:all; } .success-box { background:rgba(240,248,244,0.97); border-radius:22px; padding:40px 44px; text-align:center; max-width:380px; width:90%; display:flex; flex-direction:column; align-items:center; gap:16px; box-shadow:0 8px 40px rgba(0,0,0,0.2); animation:popIn 0.35s cubic-bezier(.22,.68,0,1.2); } @keyframes popIn { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} } .s-icon { font-size:60px; } .s-title { font-size:20px; font-weight:800; color:#3a6a4a; } .s-sub { font-size:14px; color:#6a8878; } .offer-wrap { background:rgba(90,140,60,0.12); border:1.5px solid rgba(90,140,60,0.3); border-radius:14px; padding:16px 48px; width:100%; } .offer-num { font-size:48px; font-weight:900; color:#4a8a38; line-height:1; } .offer-lbl { font-size:13px; color:#6a8878; margin-top:4px; } /* TOAST */ .toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(40,40,40,0.9); color:#fff; font-family:Arial,sans-serif; font-size:13px; font-weight:600; padding:11px 28px; border-radius:50px; opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s; white-space:nowrap; z-index:300; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:600px) { .social-bar { display:none; } .btn-send { align-self:stretch; } } /*===========================ტექნიკის ქირაობა - დამატებითი კლასები ====================*/ .teqnika-top-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .teqnika-top-row { grid-template-columns: 1fr; } } .teqnika-side { display: flex; flex-direction: column; gap: 14px; } .time-input { border: 1.5px solid #ddd; border-radius: 8px; padding: 8px 12px; font-family: Arial, sans-serif; font-size: 13px; color: #333; outline: none; background: #f8f8f8; transition: border-color 0.2s; } .time-input:focus { border-color: #aaa; } /* ============================================================ რეგისტრაციის ახალი 4-სფეროიანი კატეგორიების აკორდეონი (register/register.html — cat-areas-grid) დამატებულია: 2026-07, ახალი კატეგორიების სისტემის ეტაპი ============================================================ */ .cat-areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .cat-areas-grid { grid-template-columns: 1fr; } } .cat-area { background: #fff; border: 1.5px solid #e6e6e6; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: box-shadow 0.2s, border-color 0.2s; } .cat-area.has-selection { border-color: #b9d6a8; box-shadow: 0 2px 10px rgba(76,175,80,0.15); } .cat-area-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; text-align: left; } .cat-area-emoji { font-size: 18px; line-height: 1; } .cat-area-title { flex: 1; } .cat-area-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,0.25); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .cat-area-arrow { transition: transform 0.2s; font-size: 14px; } .cat-area.open .cat-area-arrow { transform: rotate(180deg); } .cat-area-trade { background: linear-gradient(135deg,#f19c38,#e67e22); } .cat-area-service { background: linear-gradient(135deg,#43a047,#2e7d32); } .cat-area-medical { background: linear-gradient(135deg,#e6734a,#c0392b); } .cat-area-individual { background: linear-gradient(135deg,#7d5fc4,#5b3fa0); } .cat-area-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; } .cat-area.open .cat-area-body { max-height: 3000px; padding: 14px 16px 16px; } .cat-area-body label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #333; cursor: pointer; } .cat-area-body input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: #3f6cb5; cursor: pointer; } .cat-selected-summary { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #f3f3f3; color: #777; font-size: 13px; text-align: center; transition: background 0.2s, color 0.2s; } .cat-selected-summary.has-selection { background: #eaf5e8; color: #2e7d32; font-weight: 600; } /* ============================================================ მყიდველის „შემოთავაზებები“ — ჯგუფური მონიშვნა/დაჯავშნა/წაშლა (dashboard/dashboard.html + dashboard-offers.js) დამატებულია: 2026-07, Offers & Bulk Booking System ეტაპი ============================================================ */ .offers-bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; background: #eef3fb; border: 1px solid #d7e3f5; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; } .bulk-select-all { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; } .bulk-select-all input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3f6cb5; cursor: pointer; } .bulk-selected-count { font-size: 12px; color: #3f6cb5; font-weight: 700; } .bulk-actions { display: flex; gap: 8px; margin-left: auto; } .bulk-btn { padding: 8px 14px; border-radius: 8px; border: none; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .bulk-btn:active { transform: scale(0.97); } .bulk-btn:disabled { opacity: 0.45; cursor: not-allowed; } .bulk-btn.bulk-delete { background: #fbe4e4; color: #c0392b; } .bulk-btn.bulk-book { background: #27ae60; color: #fff; } /* offer-row-ს ემატება checkbox — თანაბარი დაშორება/სწორი გასწორება */ .offer-row { gap: 10px; } .offer-row .offer-name { flex: 1; } .offer-select-cb { width: 17px; height: 17px; flex-shrink: 0; accent-color: #3f6cb5; cursor: pointer; } /* შემოთავაზების დეტალში — გამყიდველის სტრუქტურული ცხრილი (რაოდ./ფასი/ჯამი) */ .offer-items-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; } .offer-items-table th, .offer-items-table td { padding: 7px 8px; border-bottom: 1px solid #eee; text-align: left; } .offer-items-table th { color: #888; font-weight: 700; font-size: 11.5px; text-transform: uppercase; } /* 2026-07 დამატება: ჯამების მწკრივი + გვერდები */ .items-table-totals-row td { border-top: 2px solid #ddd; border-bottom: none; font-weight: 800; color: #222; padding-top: 9px; } .items-table-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 4px; } .items-page-btn { background: #eef3fb; color: #3f6cb5; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px; cursor: pointer; } .items-page-btn:hover:not(:disabled) { background: #dfe9f8; } .items-page-btn:disabled { opacity: 0.4; cursor: default; } .items-page-indicator { font-size: 12.5px; color: #666; font-weight: 600; } .offer-items-table td:nth-child(2), .offer-items-table td:nth-child(3), .offer-items-table td:nth-child(4), .offer-items-table th:nth-child(2), .offer-items-table th:nth-child(3), .offer-items-table th:nth-child(4) { text-align: right; } /* დასახელება/რაოდენობა/ფასი — ხაზგასმით გამოკვეთილი (buyer პრომპტი) */ .offer-items-table td.col-emphasis { font-weight: 800; font-size: 14.5px; color: #1a1a1a; } .offer-items-table th.col-emphasis { color: #444; font-size: 12.5px; } /* ============================================================ გამყიდველის დინამიური საპასუხო ფორმა კატეგორიების მიხედვით (seler-dashboard/seller-dashboard.html + seller-dashboard.js) დამატებულია: 2026-07 ============================================================ */ /* „მაქვს“ / „არ მაქვს“ ტოგლი */ .has-item-toggle { display: flex; gap: 16px; background: #f4f6f8; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; } /* 2026-07 გადაწყობა: "ზუსტად ეს არ მაქვს, მაგრამ მაქვს ანალოგი" ახლა ჩეკბოქსია (ცალკე ღილაკის/ფორმის ნაცვლად) */ .analog-offer-checkbox-label { display: flex; align-items: center; gap: 8px; background: #fff4e0; color: #a85d00; border: 1px dashed #f0c98a; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 13px; cursor: pointer; margin-bottom: 14px; } .analog-offer-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #a85d00; cursor: pointer; } .has-item-option { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; } .has-item-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3f6cb5; cursor: pointer; } /* კატეგორიის მიხედვით დინამიური ველები */ .dynamic-fields-section { margin-top: 14px; } .dynamic-fields-title { font-weight: 800; font-size: 13px; color: #444; margin-bottom: 8px; } .dynamic-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dyn-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #555; } .dyn-field-full { grid-column: 1 / -1; } .dyn-field input, .dyn-field select, .dyn-field textarea { padding: 8px 9px; border-radius: 7px; border: 1px solid #ddd; font-size: 13px; font-weight: 400; color: #222; font-family: inherit; } .dyn-field textarea { min-height: 60px; resize: vertical; } @media (max-width: 560px) { .dynamic-fields-grid { grid-template-columns: 1fr; } } /* PDF ინვოისის მიბმა */ .invoice-pdf-section { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .invoice-pdf-section button { background: #eef3fb; border: 1px solid #d7e3f5; color: #3f6cb5; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 12.5px; } .invoice-pdf-name { font-size: 12px; color: #666; } /* მყიდველის მხარეს — offer-ის დეტალში extra_data ველების ჩვენება */ .offer-extra-fields { background: #f8f9fb; border-radius: 10px; padding: 10px 14px; margin: 10px 0; } .offer-extra-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eee; } .offer-extra-row:last-child { border-bottom: none; } .offer-extra-label { color: #888; font-weight: 600; } .offer-extra-value { color: #222; font-weight: 700; text-align: right; } .invoice-download-btn { display: block; text-align: center; background: #3f6cb5; color: #fff; text-decoration: none; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px; margin: 10px 0; } /* ============================================================ CSS კონსოლიდაცია — HTML ფაილებში ჩაშენებული