/* General reset and typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  width: 100%;
}

.container, .main-container {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  /* Use a modern sans-serif font (Segoe UI) to more closely match the
     desired appearance shown in the example. Fallbacks ensure consistent
     rendering across platforms. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #2c3e50;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Admin Panel Layout */
.admin-container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.admin-nav {
  width: 250px;
  background-color: #2c3e50;
  color: #fff;
  padding: 20px 0;
}

.admin-nav h2 {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
  font-size: 20px;
}

.admin-nav ul {
  list-style: none;
}

.admin-nav li {
  padding: 12px 20px;
  transition: background-color 0.2s;
}

.admin-nav li:hover {
  background-color: rgba(255,255,255,0.1);
}

.admin-nav li.active {
  background-color: #3498db;
  position: relative;
}

.admin-nav li.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #fff transparent transparent;
}

.admin-nav a {
  color: #fff;
  display: block;
}

.admin-content {
  flex: 1;
  padding: 30px;
  overflow: auto;
}

/* Notes Page Styles */
.note-form {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 25px;
}

.note-form h3 {
  margin: 0 0 20px 0;
  color: #495057;
  font-size: 18px;
}

.notes-filters {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}

.filter-group label {
  font-weight: 500;
  color: #495057;
  font-size: 14px;
}

.filter-group select,
.filter-group input {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}

.filter-group input[type="text"] {
  min-width: 250px;
}

.notes-container {
  display: grid;
  gap: 20px;
}

.note-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.note-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.note-title-section {
  flex: 1;
}

.note-title {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.note-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.note-category {
  background: #e9ecef;
  color: #495057;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.note-priority {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.priority-low {
  background: #28a745;
}

.priority-medium {
  background: #ffc107;
  color: #212529;
}

.priority-high {
  background: #fd7e14;
}

.priority-critical {
  background: #dc3545;
}

.note-actions {
  display: flex;
  gap: 8px;
}

.note-actions button {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.note-actions button:hover {
  background: rgba(0,0,0,0.1);
}

.note-content {
  color: #495057;
  line-height: 1.6;
  margin-bottom: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
  color: #6c757d;
  font-size: 12px;
}

/* Notification styles */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #28a745;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  font-weight: 500;
}

.notification.show {
  transform: translateX(0);
}

/* Responsive design for notes */
@media (max-width: 768px) {
  .notes-filters {
    flex-direction: column;
    gap: 15px;
  }
  
  .filter-group {
    min-width: auto;
  }
  
  .filter-group input[type="text"] {
    min-width: auto;
    width: 100%;
  }
  
  .note-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .note-actions {
    align-self: flex-end;
  }
  
  .note-footer {
    flex-direction: column;
    gap: 5px;
  }
}

/* Storage management panel */
.storage-panel {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.storage-panel h3 {
  margin: 0 0 1rem 0;
  color: #495057;
  font-size: 1.1rem;
}

.storage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: white;
  border-radius: 0.375rem;
  border: 1px solid #e9ecef;
}

.stat-label {
  font-weight: 500;
  color: #6c757d;
}

.stat-value {
  font-weight: 600;
  color: #495057;
}

.storage-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.btn-secondary {
  padding: 0.5rem 1rem;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

.btn-secondary:hover {
  background: #5a6268;
}

.storage-progress {
  margin-top: 1rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 100%);
  transition: width 0.3s ease;
  width: 0%;
}

.progress-fill.warning {
  background: #ffc107;
}

.progress-fill.danger {
  background: #dc3545;
}

#progressText {
  color: #6c757d;
  font-size: 0.875rem;
}

/* Admin Header with Title and Add Button */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Client Management Styles */
.clients-table-container {
  margin-top: 20px;
  overflow-x: auto;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.clients-table th,
.clients-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e6e6e6;
}

.clients-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.clients-table tr:hover {
  background-color: #f5f6fa;
}

.clients-table .actions {
  display: flex;
  gap: 8px;
}

.clients-table .edit-btn,
.clients-table .delete-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.clients-table .edit-btn {
  background-color: #3498db;
  color: white;
}

.clients-table .edit-btn:hover {
  background-color: #2980b9;
}

.clients-table .delete-btn {
  background-color: #e74c3c;
  color: white;
}

.clients-table .delete-btn:hover {
  background-color: #c0392b;
}

/* Status Badge Styles */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.status-badge.новий {
  background-color: #3498db;
  color: white;
}

.status-badge.в-процесі {
  background-color: #f39c12;
  color: white;
}

.status-badge.купив {
  background-color: #2ecc71;
  color: white;
}

.status-badge.відмовився {
  background-color: #95a5a6;
  color: white;
}

/* Client Form Styles */
.client-form {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.client-form h3 {
  margin-bottom: 15px;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid rgba(102, 126, 234, 0.1);
  border-radius: 12px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 1);
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.submit-btn,
.cancel-btn,
.add-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.submit-btn {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.5);
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.submit-btn:hover::before {
  left: 100%;
}

.cancel-btn {
  background-color: #e74c3c;
  color: white;
}

.cancel-btn:hover {
  background-color: #c0392b;
}

.add-btn {
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-btn:hover {
  background-color: #2980b9;
}

header {
  background: linear-gradient(135deg, #a8bdd8 0%, #b8cde8 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  /* Provide vertical spacing around the header content.  Horizontal padding
     keeps the content away from the edges of the viewport.  We do not set
     a fixed left padding here; instead, the inner wrapper will handle
     centering and alignment. */
  /* Match the horizontal padding of the main content (20px) so that the
     header contents align with filters and listings. */
  padding: 16px 20px;
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Wrap the logo and primary navigation together so they sit on the left side of
   the header.  This group uses flexbox to align items vertically and add
   spacing between the logo and the nav links. */
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Primary navigation (e.g., Головна, Авто в дорозі) to the right of the logo.
   Uses flex to arrange links horizontally. */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 16px;
}

/* Secondary navigation holds actions such as "Додати оголошення" and "Адмін
   панель" aligned to the far right.  It inherits styles from the generic
   header nav but can be customised separately if needed. */
.secondary-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Vertical separator used between the primary navigation links.  A thin line
   with light grey colour matching the example.  Adjust height to align
   visually with the text. */
.primary-nav .separator {
  width: 1px;
  height: 20px;
  background-color: #e6e6e6;
}

/* Base styling for navigation links.  Remove underlines and set colour. */
header nav a,
.primary-nav a,
.secondary-nav a {
  text-decoration: none;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

header nav a::before,
.primary-nav a::before,
.secondary-nav a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: left 0.3s ease;
}

/* Keep original blue colour for secondary navigation actions to distinguish
   them from the primary navigation. */
.secondary-nav a {
  color: #2980b9;
}

/* Hover effect for primary and secondary navigation links: apply the same
   shadow as the logo to create a subtle depth. */
/* Apply a more pronounced shadow on hover for navigation links to imitate
   the effect shown on the logo.  The shadow appears below the text and
   creates a sense of depth when the user hovers. */
.primary-nav a:hover,
.secondary-nav a:hover {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.primary-nav a:hover::before,
.secondary-nav a:hover::before {
  left: 100%;
}

header .logo {
  display: flex;
  align-items: center;
  font-size: 32px;
  font-weight: 800;
  color: white;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  letter-spacing: -1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

header .logo:hover {
  transform: scale(1.05);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Remove default logo image styling since we no longer use an image. */
header .logo img {
  display: none;
}

/* Text styling for logo.  The brand name is split into two spans: the
   first part uses a dark colour, the second part uses a purple gradient. */
header .logo .logo-text {
  color: #2c3e50;
}
header .logo .logo-highlight {
  background: linear-gradient(90deg, #8e67ff, #a06bff, #c483ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8e67ff; /* fallback for browsers without background-clip */
}

/* Apply a subtle drop shadow to the logo characters so that the words stand out
   even when not hovered.  The shadow is barely noticeable but gives depth.
   When hovered, the shadow becomes stronger to create a striking effect as
   shown in the reference image. */
header .logo .logo-text,
header .logo .logo-highlight {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Hover effect: add a subtle shadow underneath the letters to create depth. */
header .logo:hover .logo-text,
header .logo:hover .logo-highlight {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* Style only links inside the secondary navigation (right side).  These links
   behave like buttons: blue text and a light background on hover.  Primary
   navigation links use a different styling defined above. */
.secondary-nav a {
  margin-left: 20px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.secondary-nav a:hover {
  background-color: #ecf0f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hide admin login link from public view */
.secondary-nav a[href="admin-login.html"] {
  display: none;
}

/* Style for the green "Додати оголошення" button shown on the main page */
.secondary-nav .add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: #fff !important;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.secondary-nav .add-btn .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1;
  color: #fff;
  /* ensure the plus sign is centered */
}

.secondary-nav .add-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* Inner wrapper for the header content.  This constrains the width of the
   logo and navigation to match the main content area and centres it in
   the viewport.  Using flexbox allows the logo and navigation groups to
   distribute space properly. */
header .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Pagination styles.  Display page controls centred below the listings.  Buttons
   are lightly styled with rounded corners and a subtle border.  The active
   page uses a blue background to stand out. */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #d0d7e5;
  background-color: #fff;
  color: #2c3e50;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.pagination button:hover:not(.active):not(:disabled) {
  background-color: #f0f2f7;
}

.pagination button.active {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: default;
}



/* User listing cards */
.user-listings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.user-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  padding: 16px;
  align-items: flex-start;
}
.user-image img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
.user-info {
  flex: 1;
  margin-left: 16px;
}
.user-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.user-price {
  font-size: 18px;
  color: #27ae60;
  margin-bottom: 4px;
}
.user-status {
  font-size: 14px;
  margin-bottom: 8px;
  color: #7f8c8d;
}
.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.user-actions button {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid #d0d7e5;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.user-actions button:hover {
  background-color: #f0f2f7;
}

/* Remove orphaned closing brace as it has no matching opening brace */

.user-card {
  margin-bottom: 16px;
/* Remove the orphaned closing brace as it has no matching opening brace */
  .user-card {
    flex-direction: column;
  }
  .user-image img {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
  }
  .user-info {
    margin-left: 0;
  }
}

/* ===== RESPONSIVE DESIGN ===== */

/* Extra small mobile devices */
@media (max-width: 360px) {
  body {
    font-size: 13px;
  }
  
  main {
    padding: 8px;
  }
  
  header {
    padding: 10px 8px;
  }
  
  header .logo {
    font-size: 20px;
  }
  
  .card-body {
    padding: 10px;
  }
  
  .card-title {
    font-size: 16px;
  }
  
  .card-price {
    font-size: 18px;
  }
}

/* Mobile First - Base styles for mobile devices */
@media (max-width: 480px) {
  /* General layout adjustments */
  body {
    font-size: 14px;
  }
  
  main {
    padding: 10px;
  }
  
  /* Header adjustments for mobile */
  header {
    padding: 12px 10px;
  }
  
  header .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  header .logo {
    font-size: 24px;
    justify-content: center;
  }
  
  .header-left {
    justify-content: center;
  }
  
  .primary-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .primary-nav .separator {
    display: none;
  }
  
  .secondary-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .secondary-nav a {
    margin-left: 0;
    font-size: 14px;
    padding: 6px 10px;
  }
  
  .secondary-nav .add-btn {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  /* Filters for mobile */
  .filters {
    flex-direction: column;
    gap: 8px;
  }
  
  .filters select {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Card layout for mobile - Modern centered design */
  .listing-container {
    gap: 20px;
    padding: 0 5px;
  }
  
  .card {
    flex-direction: column;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  
  .card .image-wrap {
    width: 100%;
    height: 280px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
  }
  
  .card .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .card:hover .image-wrap img {
    transform: scale(1.05);
  }
  
  .card-body {
    padding: 15px 20px 10px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%);
  }
  
  .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2c3e50;
    line-height: 1.3;
  }
  
  .card-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #34495e;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 1px 2px rgba(52, 152, 219, 0.2);
    text-align: center;
  }
  
  .card-price {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
    text-align: center;
  }
  
  .card-details .detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
  }
  
  .card-details .detail-item .icon {
    font-size: 18px;
    margin-bottom: 5px;
    color: #667eea;
  }
  
  .card-details .detail-item .value {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
  }
  
  .card-footer {
    padding: 10px 20px 12px 20px;
    background: rgba(102, 126, 234, 0.05);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    text-align: center;
  }
  
  .card-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7f8c8d;
    font-size: 14px;
    font-weight: 500;
  }
  
  .card-location .location-icon {
    color: #e74c3c;
    font-size: 16px;
  }
  
  /* User listings for mobile */
  .user-card {
    flex-direction: column;
    padding: 12px;
  }
  
  .user-image img {
    width: 100%;
    height: 150px;
    margin-bottom: 12px;
  }
  
  .user-info {
    margin-left: 0;
  }
  
  .user-actions {
    justify-content: center;
    margin-top: 12px;
  }
  
  /* Forms for mobile */
   .form-group input,
   .form-group select,
   .form-group textarea {
     font-size: 16px; /* Prevent zoom on iOS */
     padding: 12px;
   }
   
   /* Photo preview for mobile */
   .photo-preview {
     grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
     gap: 8px;
   }
   
   .photo-preview img {
     height: 60px;
   }
   
   /* Radio and checkbox groups for mobile */
   .radio-group,
   .checkbox-group {
     flex-direction: column;
     gap: 8px;
   }
   
   .radio-group label,
   .checkbox-group label {
     font-size: 16px;
   }
  
  /* Admin panel for mobile */
  .admin-container {
    flex-direction: column;
    margin: 10px;
  }
  
  .admin-nav {
    width: 100%;
    padding: 15px 0;
  }
  
  .admin-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  
  .admin-nav li {
    padding: 8px 12px;
    border-radius: 4px;
  }
  
  .admin-content {
    padding: 15px;
  }
  
  /* Tables for mobile */
  .clients-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .clients-table {
    min-width: 600px;
  }
  
  .clients-table th,
  .clients-table td {
    padding: 8px 6px;
    font-size: 12px;
  }
  
  /* Pagination for mobile */
  .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .pagination button {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  /* Toast notifications for mobile */
  .toast {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    transform: translateY(-100px);
  }

  .toast.show {
    transform: translateY(0);
  }

  /* Services page for mobile */
  .services-container {
    padding: 30px 15px;
    min-height: auto;
  }

  .services-header {
    margin-bottom: 50px;
  }

  .services-header h1 {
    font-size: 2.5rem;
  }

  .services-header p {
    font-size: 1.1rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 50px;
  }

  .service-card {
    padding: 30px 25px;
  }

  .service-card:hover {
    transform: translateY(-8px);
  }

  .service-card:nth-child(odd):hover,
  .service-card:nth-child(even):hover {
    transform: translateY(-8px);
  }

  .service-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .service-card p {
    font-size: 1rem;
  }

  .services-cta {
    padding: 40px 25px;
    margin-top: 40px;
  }

  .services-cta h2 {
    font-size: 2rem;
  }

  .services-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .cta-btn {
    padding: 16px 28px;
    font-size: 1rem;
    min-width: auto;
    width: 100%;
    max-width: 280px;
  }

  .cta-btn:hover {
    transform: translateY(-2px) scale(1.02);
  }
  
  /* Login form for mobile */
   .login-form {
     padding: 20px;
     margin: 10px;
   }
   
   .login-form h2 {
     font-size: 20px;
   }
   
   /* Detail page for mobile */
   .detail-container {
     flex-direction: column;
     gap: 15px;
   }
   
   .detail-image-gallery {
     flex: none;
     max-width: none;
   }
   
   .detail-image-gallery .main-image {
     height: 250px;
   }
   
   .detail-image-gallery .thumbs {
     justify-content: center;
   }
   
   .detail-image-gallery .thumbs img {
     width: 50px;
     height: 50px;
   }
   
   .detail-info {
     flex: none;
     padding: 15px;
     margin: 0;
   }
 }

/* Large mobile devices (iPhone Pro Max, etc.) */
@media (min-width: 481px) and (max-width: 600px) {
  main {
    padding: 12px;
  }
  
  header {
    padding: 14px 12px;
  }
  
  header .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  header .logo {
    font-size: 26px;
  }
  
  .primary-nav,
  .secondary-nav {
    gap: 12px;
  }
  
  .primary-nav .separator {
    display: none;
  }
  
  .filters {
    flex-direction: column;
    gap: 10px;
  }
  
  .filters select {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
  }
  
  .card {
    flex-direction: column;
  }
  
  .card .image-wrap {
    width: 100%;
    height: 220px;
    border-radius: 8px 8px 0 0;
  }
  
  .card-body {
    padding: 15px 20px 10px 20px;
  }
  
  .card-footer {
    padding: 10px 20px 12px 20px;
  }
  
  .card-title {
    font-size: 19px;
  }
  
  .card-price {
    font-size: 21px;
  }
  
  /* Detail page for large mobile */
  .detail-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .detail-image-gallery {
    flex: none;
    max-width: none;
  }
  
  .detail-image-gallery .main-image {
    height: 260px;
  }
  
  .detail-info {
    flex: none;
    padding: 16px;
  }
  
  .admin-container {
    margin: 12px;
  }
}

/* Tablet styles */
@media (min-width: 601px) and (max-width: 768px) {
  main {
    padding: 15px;
  }
  
  header .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .primary-nav,
  .secondary-nav {
    gap: 15px;
  }
  
  .primary-nav .separator {
    display: none;
  }
  
  .filters {
    justify-content: center;
  }
  
  .filters select {
    min-width: 150px;
  }
  
  .card {
    flex-direction: column;
  }
  
  .card .image-wrap {
    width: 100%;
    height: 220px;
    border-radius: 8px 8px 0 0;
  }
  
  .admin-container {
    margin: 15px;
  }
  
  .admin-nav {
     width: 200px;
   }
   
   /* Detail page for tablet */
   .detail-container {
     flex-direction: column;
   }
   
   .detail-image-gallery {
     flex: none;
     max-width: none;
   }
   
   .detail-image-gallery .main-image {
     height: 280px;
   }
   
   .detail-info {
     flex: none;
   }
 }

/* Desktop and larger tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .card .image-wrap {
    width: 250px;
  }
  
  .admin-nav {
    width: 220px;
  }
}

/* Large screens */
@media (min-width: 1025px) {
  .card .image-wrap {
    width: 280px;
  }
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .card {
    flex-direction: row;
  }
  
  .card .image-wrap {
    width: 200px;
    height: 140px;
    border-radius: 8px 0 0 8px;
  }
  
  .admin-container {
    flex-direction: row;
  }
  
  .admin-nav {
     width: 180px;
   }
   
   /* Detail page landscape for mobile */
   .detail-container {
     flex-direction: row;
   }
   
   .detail-image-gallery {
     flex: 1 1 300px;
   }
   
   .detail-image-gallery .main-image {
     height: 200px;
   }
   
   .detail-info {
     flex: 1 1 300px;
     padding: 15px;
   }
 }

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card .image-wrap img,
  .detail-image-gallery img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* iOS Safari specific optimizations */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS Safari viewport issues */
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Better touch targets for iOS */
  button,
  .btn,
  .secondary-nav a,
  .primary-nav a,
  select {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Fix for iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  
  /* Smooth scrolling for iOS */
  .listing-container,
  .admin-table-container {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix for iOS sticky positioning */
  header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* iPhone Pro Max specific styles */
@media only screen 
  and (device-width: 428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  /* Portrait mode */
  @media (orientation: portrait) {
    body {
      font-size: 15px;
    }
    
    main {
      padding: 15px;
    }
    
    header {
      padding: 16px 15px;
    }
    
    header .logo {
      font-size: 28px;
    }
    
    .card .image-wrap {
      height: 240px;
    }
    
    .card-body {
      padding: 16px;
    }
    
    .card-title {
      font-size: 20px;
    }
    
    .card-price {
      font-size: 22px;
    }
    
    .detail-image-gallery .main-image {
      height: 280px;
    }
    
    .filters select {
      padding: 16px 18px;
      font-size: 17px;
    }
  }
  
  /* Landscape mode */
  @media (orientation: landscape) {
    .card {
      flex-direction: row;
    }
    
    .card .image-wrap {
      width: 250px;
      height: 160px;
      border-radius: 8px 0 0 8px;
    }
    
    .detail-container {
      flex-direction: row;
    }
    
    .detail-image-gallery {
      flex: 1 1 350px;
    }
    
    .detail-image-gallery .main-image {
      height: 220px;
    }
    
    .detail-info {
      flex: 1 1 350px;
    }
  }
}

/* iPhone 14 Pro Max and similar large phones */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 430px) 
  and (-webkit-min-device-pixel-ratio: 3) {
  
  body {
    font-size: 15px;
  }
  
  .card .image-wrap {
    height: 230px;
  }
  
  .card-title {
    font-size: 19px;
  }
  
  .card-price {
    font-size: 21px;
  }
  
  .detail-image-gallery .main-image {
    height: 270px;
  }
}

/* Print styles */
@media print {
  header,
  .filters,
  .pagination,
  .admin-nav,
  .user-actions,
  .secondary-nav {
    display: none;
  }
  
  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* Listing cards */
/* Container for listing cards – stack cards vertically */
.listing-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card design for listing */
/* Card wrapper for listings. Use flex layout to ensure the image and text sit
   side by side without causing the card to shift off screen. The wrapper
   provides a shadow and rounded corners. */
.card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: stretch;
  width: 100%;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Wrapper around the photo on a listing card.  It has a fixed width and height and
   hides any overflow while preserving the card’s rounded corners on the left side. */
.card .image-wrap {
  width: 280px;
  height: 180px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  position: relative; /* allow positioning of slider progress */
}

/* Primary image inside the image wrapper.  It stretches to fill the wrapper and
   maintains its aspect ratio via object-fit. */
.card .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slider progress bar for listing images.  The track sits at the bottom of
   the image and remains unobtrusive when there is only one photo.  The
   filled bar shows the current position when dragging through images. */
.slider-track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.slider-fill {
  height: 100%;
  width: 0;
  background-color: #e74c3c;
  transition: width 0.2s ease;
}

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #2c3e50;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.card-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #34495e;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1px 2px rgba(52, 152, 219, 0.2);
}

.card-price {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(46, 204, 113, 0.2);
}

.card-price-uah {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 12px;
}

/* Details row on a card (drive, engine capacity, fuel type, transmission).  We make
   the text bold to emphasise these key characteristics. */
.card-details {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Icons within the details row.  Keep them small and align them vertically
   with the surrounding text.  A small right margin separates the icon from
   its label. */
.card-details .detail-icon {
  /* Increase icon size slightly to more closely match the example and allow
     comfortable spacing between icon and label. */
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Location row at the bottom of a card.  Use flex to align the icon and
   text horizontally, and push the content to the right of the card body. */
.card-location {
  /* Card location styles will be applied via card-footer */
  width: auto;
}

/* Generic icon sizing for location inside footer */
.card-location .location-icon {
  width: 14px;
  height: 14px;
}

/* Footer row of a card holds the details and the location.  It sits at the
   bottom of the card body and distributes space between its children. */
.card-footer {
  /* Mobile: stack vertically like before */
  display: block;
  margin-top: auto;
}

/* Mobile styles for card-footer elements */
.card-footer .card-details {
  margin-bottom: 8px;
}

.card-footer .card-location {
  margin-bottom: 0;
}

/* Mobile styles for image-wrap - extend to right edge */
@media (max-width: 768px) {
  .card {
    flex-direction: column;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .card .image-wrap {
    width: 100%;
    height: 280px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .card .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .card:hover .image-wrap img {
    transform: scale(1.05);
  }
}

/* Details inside footer inherit the same styles as before */
.card-footer .card-details {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 16px;
  align-items: center;
  margin: 0; /* remove extra margin so the row sits flush with the footer */
}

/* Location inside footer: align items and set subtle colour */
.card-footer .card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #7f8c8d;
}

/* Desktop styles - restore original footer layout with location on the right */
@media (min-width: 769px) {
  .card-body {
    padding: 8px 16px 10px 16px;
  }
  
  .card-title {
    margin-bottom: 8px;
  }
  
  .card-subtitle {
    margin-bottom: 8px;
  }
  
  .card-price {
    margin-bottom: 10px;
  }
  
  .card-details {
    margin-bottom: 0;
  }
  
  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 0;
    background: transparent;
    border-top: none;
    text-align: left;
  }
  
  .card-footer .card-details {
    margin-bottom: 0;
  }
  
  .card-location {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #7f8c8d;
    font-size: 13px;
    font-weight: normal;
  }
}

/* Form styles */
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

form h2 {
  margin-bottom: 16px;
}

/* Filters and sorting bar on the main page.  Arrange the controls in a row with
   spacing and ensure they wrap on smaller screens. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  align-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* The filter bar holds the sorting and filtering select boxes.  Use flex to
   align controls neatly. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
}

/* Remove default labels (we use placeholder text inside selects) */
.filters label {
  display: none;
}

/* Styling for selects in the filter bar.  Increase padding and radius
   to create a more modern appearance.  We retain the native drop-down
   arrow for accessibility and consistency. */
.filters select {
  padding: 14px 20px;
  border: 2px solid rgba(102, 126, 234, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  color: #2c3e50;
  min-width: 180px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  /* Reset browser-specific appearance to allow full custom styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2M2Y2ZkZiIgZD0iTTggMTJsLTYtNkgxNnoiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px 14px;
  padding-right: 50px;
}

.filters select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

/* Clear filters button styling - matching select style */
.clear-filters-btn {
  padding: 14px 20px;
  border: 2px solid rgba(102, 126, 234, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  color: #2c3e50;
  min-width: 180px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-weight: normal;
  margin-left: auto;
}

.clear-filters-btn:hover {
  border-color: #667eea;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

.clear-filters-btn:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

/* Telegram button styling */
.telegram-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #0088cc;
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
}

.telegram-btn:hover {
  background: #006ba3;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
  color: white;
  text-decoration: none;
}

.telegram-btn svg {
  flex-shrink: 0;
}

/* Logo image styling for access-denied page */
.logo-image {
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* Description textarea should be tall enough to comfortably enter multi-line
   descriptions. Increase the minimum height so that bullet lists and longer
   text are visible without having to resize manually. */
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-group label,
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  font-size: 14px;
}

.photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.photo-preview img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.photo-preview img.selected {
  border-color: #3498db;
}

.submit-btn {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background-color: #2980b9;
}

/* Admin actions in admin panel */
.admin-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.admin-actions button {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
}

.admin-actions .bump-btn {
  background-color: #f39c12;
}
.admin-actions .bump-btn:hover {
  background-color: #e67e22;
}

.admin-actions .edit-btn {
  background-color: #3498db;
}
.admin-actions .edit-btn:hover {
  background-color: #2980b9;
}

.admin-actions .delete-btn {
  background-color: #e74c3c;
}
.admin-actions .delete-btn:hover {
  background-color: #c0392b;
}

/* Detail page */
.detail-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.detail-image-gallery {
  /* Allow the main photo area to take more space on detail pages.  Increasing
     the flex-basis and max-width results in a larger display of the main image
     without pushing the specifications text. */
  flex: 1 1 450px;
  max-width: 600px;
}

.detail-image-gallery .main-image {
  width: 100%;
  /* Increase the height of the main photo for better visibility.  The object-fit
     property preserves aspect ratio while covering the available space. */
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #e6e6e6;
  background-color: #f0f0f0;
}

.detail-image-gallery .thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-image-gallery .thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e6e6e6;
}

.detail-image-gallery .thumbs img.selected {
  border-color: #3498db;
}

.detail-info {
  flex: 2 1 400px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.detail-info h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.detail-info .specs {
  margin-bottom: 20px;
}

.detail-info .specs dt {
  font-weight: bold;
  float: left;
  width: 120px;
  clear: left;
  /* Set the label colour to a muted grey-blue as shown in the
     example screenshot. */
  color: #6c7a89;
}

.detail-info .specs dd {
  margin-left: 130px;
  margin-bottom: 6px;
}

.detail-info .price {
  font-size: 28px;
  font-weight: bold;
  color: #27ae60;
  margin-bottom: 16px;
}

.detail-info .contact {
  margin-top: 20px;
}

/* Section headings within the detail information (Опис, Контакти).  Provide
   spacing and a slightly larger font weight to differentiate them from the
   surrounding content. */
.detail-info .section-heading {
  font-size: 18px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 8px;
  color: #2c3e50;
  clear: both;
}

/* Style the description paragraph to respect newline characters and provide
   spacing after the text. */
.detail-info .description {
  white-space: pre-line;
  margin-bottom: 16px;
}

/* Preserve line breaks and indentation in the description on the detail page.
   Using pre-line ensures that newline characters entered by the seller (e.g.,
   bullet lists) are displayed as line breaks while still allowing normal
   wrapping. */
#detailDescription {
  white-space: pre-line;
}

.detail-info .contact span {
  font-weight: bold;
  /* Highlight contact labels in green to draw attention. */
  color: #27ae60;
}

/* Highlight seller name and phone number to make them stand out */
.detail-info .contact {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4f8 100%);
  padding: 20px;
  border-radius: 12px;
  border: 2px solid rgba(39, 174, 96, 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: 20px;
}

.detail-info .contact .seller-name {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin-left: 8px;
}

.detail-info .contact .phone-number {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 20px;
  margin: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  min-width: 180px;
  justify-content: center;
}

.detail-info .contact .phone-number:before {
  content: "📞";
  font-size: 1.1rem;
}

.detail-info .contact .phone-number:hover {
  background: linear-gradient(135deg, #229954, #27ae60);
  transform: translateY(-2px);
  box-shadow: 0 3px 12px rgba(39, 174, 96, 0.3);
  text-decoration: none;
}

/* Phone input groups for multiple phone numbers */
.phone-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.phone-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.phone-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.remove-phone-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.remove-phone-btn:hover {
  background: #c0392b;
}

.add-phone-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 5px;
  transition: background-color 0.3s ease;
}

.add-phone-btn:hover {
  background: #229954;
}

#phoneContainer {
  margin-bottom: 10px;
}

/* Horizontal divider lines used on the detail page to separate sections.  A subtle
   light grey line with margins above and below. */
.section-divider {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 16px 0;
}

.no-data {
  padding: 40px;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Modern Modal Gallery - Enhanced with animations and better UX */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(20,20,20,0.95));
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-modal.show {
  opacity: 1;
  visibility: visible;
}

.image-modal-content {
  display: flex;
  flex-direction: column;
  max-width: 95vw;
  max-height: 95vh;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  transform: scale(0.8) translateY(50px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-modal.show .image-modal-content {
  transform: scale(1) translateY(0);
}

/* Enhanced close button */
.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.modal-close:hover {
  background: rgba(255,0,0,0.8);
  transform: scale(1.1);
}

/* Main image container with zoom functionality */
.image-modal-content .modal-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
  position: relative;
  overflow: hidden;
  min-height: 60vh;
}

.image-modal-content .modal-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.image-modal-content .modal-main img:hover {
  transform: scale(1.05);
}

.image-modal-content .modal-main img.zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

/* Navigation arrows */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-nav:hover {
  background: rgba(0,0,0,0.9);
  transform: translateY(-50%) scale(1.1);
}

.modal-nav.prev {
  left: 20px;
}

.modal-nav.next {
  right: 20px;
}

/* Modern thumbnail strip */
.image-modal-content .modal-thumbs {
  display: flex;
  flex-direction: row;
  padding: 20px;
  background: rgba(248, 249, 250, 0.95);
  border-top: 1px solid rgba(0,0,0,0.1);
  overflow-x: auto;
  gap: 15px;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.image-modal-content .modal-thumbs::-webkit-scrollbar {
  height: 6px;
}

.image-modal-content .modal-thumbs::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

.image-modal-content .modal-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
}

.image-modal-content .modal-thumbs img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-modal-content .modal-thumbs img:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.image-modal-content .modal-thumbs img.selected {
  border-color: #007bff;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,123,255,0.3);
}

/* Image counter */
.modal-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .image-modal-content {
    max-width: 98vw;
    max-height: 98vh;
    border-radius: 15px;
  }
  
  .modal-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .modal-nav.prev {
    left: 10px;
  }
  
  .modal-nav.next {
    right: 10px;
  }
  
  .image-modal-content .modal-thumbs {
    padding: 15px;
    gap: 10px;
  }
  
  .image-modal-content .modal-thumbs img {
    width: 60px;
    height: 45px;
  }
}

/* Toggle Switch Styles */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

.toggle-label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3498db;
  transition: .3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #e67e22;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider:hover {
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
}

input:checked + .slider:hover {
  box-shadow: 0 0 8px rgba(230, 126, 34, 0.3);
}

/* VIN section styling with divider */
.vin-divider {
  margin: 20px 0 15px 0;
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bdc3c7, transparent);
  position: relative;
}

.vin-divider::before {
  content: '—————';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 10px;
  color: #7f8c8d;
  font-size: 12px;
  letter-spacing: 2px;
}

.vin-label {
  font-weight: 600;
  color: #2c3e50;
  margin-top: 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vin-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #34495e;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 4px solid #3498db;
  margin-top: 5px;
  font-size: 15px;
  letter-spacing: 1px;
  word-break: break-all;
}

/* Loading Indicator Styles */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Toast Notification Styles */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  color: white;
  font-weight: 500;
  z-index: 10000;
  transform: translateX(400px);
  transition: transform 0.3s ease;
  max-width: 300px;
  word-wrap: break-word;
}

.toast.show {
  transform: translateX(0);
}

.toast-info {
  background-color: #17a2b8;
}

.toast-success {
  background-color: #28a745;
}

.toast-warning {
  background-color: #ffc107;
  color: #212529;
}

.toast-error {
  background-color: #dc3545;
}

/* Services page styles */
.services-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 20px;
  background: linear-gradient(135deg, #ddd6ff 0%, #e8dfff 50%, #f0ebff 100%);
  min-height: 100vh;
}

.services-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.services-header::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
  border-radius: 2px;
}

.services-header h1 {
  font-size: 3.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

.services-header p {
  font-size: 1.3rem;
  color: #4a5568;
  max-width: 700px;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 40px;
  margin-bottom: 80px;
  perspective: 1000px;
}

.service-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
  background-size: 300% 100%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.service-card:hover {
  transform: translateY(-15px) rotateX(5deg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 1);
}

.service-card:nth-child(odd):hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(2deg);
}

.service-card:nth-child(even):hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(-2deg);
}

.service-icon {
  width: 90px;
  height: 90px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  color: white;
  position: relative;
  transition: all 0.3s ease;
}

.service-card:nth-child(1) .service-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.service-card:nth-child(2) .service-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.service-card:nth-child(3) .service-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.service-card:nth-child(4) .service-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.service-card:nth-child(5) .service-icon {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.service-card:nth-child(6) .service-icon {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.service-icon::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: inherit;
  border-radius: 26px;
  z-index: -1;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover .service-icon::after {
  opacity: 0.7;
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
  font-size: 1.6rem;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 700;
  position: relative;
}

.service-card h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.service-card:hover h3::after {
  width: 60px;
}

.service-card p {
  color: #5a6c7d;
  line-height: 1.7;
  font-size: 1.05rem;
  font-weight: 400;
}

.services-cta {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 32px;
  padding: 60px 40px;
  text-align: center;
  margin-top: 60px;
  border: 2px solid rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.services-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  z-index: -1;
}

.services-cta h2 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 16px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

.services-cta p {
  color: #4a5568;
  font-size: 1.2rem;
  margin-bottom: 40px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
}

.cta-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 180px;
  justify-content: center;
}

.cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.cta-btn:hover::before {
  left: 100%;
}

.cta-btn.primary {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

.cta-btn.primary:hover {
  background: linear-gradient(135deg, #ee5a52, #ff6b6b);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
}

.cta-btn.secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

.cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 1);
  color: #5a67d8;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Lazy Loading Image Styles with Responsive Support */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

img.loaded {
  opacity: 1;
  image-rendering: auto;
}

/* High-quality image rendering */
.card .image-wrap img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Retina display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card .image-wrap img {
    image-rendering: -webkit-optimize-contrast;
  }
}

img.lazy::before {
  content: '';
  display: block;
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Confirmation Dialog Styles */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.confirm-dialog {
  background: white;
  padding: 30px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.confirm-dialog h3 {
  margin: 0 0 15px 0;
  color: #333;
}

.confirm-dialog p {
  margin: 0 0 25px 0;
  color: #666;
  line-height: 1.5;
}

.confirm-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.confirm-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.btn-cancel {
  background-color: #6c757d;
  color: white;
}

.btn-cancel:hover {
  background-color: #5a6268;
}

.btn-confirm {
  background-color: #dc3545;
  color: white;
}

.btn-confirm:hover {
  background-color: #c82333;
}

/* Login Form Styles */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 20px;
}

.login-form {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  border: 1px solid #e9ecef;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
  font-size: 14px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #fff;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.login-form .submit-btn {
  width: 100%;
  padding: 14px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 10px;
}

.login-form .submit-btn:hover {
  background-color: #2980b9;
  transform: translateY(-1px);
}

.login-form .submit-btn:active {
  transform: translateY(0);
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
}

/* Phone input management styles */
.phone-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.phone-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.remove-phone-btn {
  background: #dc3545;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-phone-btn:hover {
  background: #c82333;
}

#phoneContainer .add-phone-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 14px;
}

#phoneContainer .add-phone-btn:hover {
  background: #0056b3;
}



/* Contacts Page Styles */
.contacts-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.contacts-container h1 {
  text-align: center;
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-weight: 600;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 20px;
}

.contact-section {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.contact-section h2 {
  color: #2c3e50;
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.address {
  font-size: 1.1rem;
  color: #34495e;
  margin-bottom: 15px;
  font-weight: 500;
}

.working-hours {
  color: #7f8c8d;
  line-height: 1.6;
}

.working-hours strong {
  color: #2c3e50;
}

.phone {
  margin-bottom: 10px;
}

.phone a {
  color: #3498db;
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.phone a:hover {
  color: #2980b9;
  text-decoration: underline;
}

.phone-note {
  color: #7f8c8d;
  font-size: 0.9rem;
  font-style: italic;
}

.map-section-full {
  margin-top: 40px;
}

.photo-section .office-photo {
  text-align: center;
  margin: 20px 0;
}

.photo-section .office-photo img {
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.photo-section .office-photo img:hover {
  transform: scale(1.05);
}

.photo-description {
  color: #7f8c8d;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 15px;
  font-style: italic;
}

.map-container {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
  width: 100%;
  height: 300px;
  border: none;
}

.map-link {
  text-align: center;
  margin-top: 15px;
}

.map-link a {
  color: #3498db;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #3498db;
  border-radius: 25px;
  transition: all 0.3s ease;
  display: inline-block;
}

.map-link a:hover {
  background-color: #3498db;
  color: white;
  transform: translateY(-2px);
}

/* Active navigation link */
.primary-nav a.active {
  color: #3498db;
  font-weight: 600;
  position: relative;
}

.primary-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #3498db;
  border-radius: 1px;
}

/* Responsive design for contacts */
@media (max-width: 1024px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .contacts-container {
    padding: 20px 15px;
  }
  
  .contacts-container h1 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .contact-section {
    padding: 20px;
  }
  
  .contact-section h2 {
    font-size: 1.2rem;
  }
  
  .phone a {
    font-size: 1.1rem;
  }
  
  .map-container iframe {
    height: 250px;
  }
  
  .photo-section .office-photo img {
    max-width: 100%;
  }
}

/* Access Denied Page Styles */
.access-denied-container {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.access-denied-content {
  background: white;
  border-radius: 20px;
  padding: 60px 40px;
  max-width: 900px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-large {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.logo-large .logo-text {
  color: #2c3e50;
}

.logo-large .logo-highlight {
  color: #3498db;
}

.access-denied-content h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.main-message {
  font-size: 1.3rem;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.6;
}

.contact-info-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.contact-block {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 15px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.contact-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: #3498db;
}

.contact-block h3 {
  color: #2c3e50;
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.contact-block p {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0;
}

.contact-block a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.contact-block a:hover {
  color: #2980b9;
  text-decoration: underline;
}

.office-photo-small {
  margin-top: 10px;
}

.office-photo-small img {
  width: 100%;
  max-width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid #e9ecef;
  transition: all 0.3s ease;
}

.office-photo-small img:hover {
  transform: scale(1.05);
  border-color: #3498db;
}

.map-section {
  margin: 40px 0;
  text-align: center;
}

.map-section h3 {
  color: #2c3e50;
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.access-denied-content .map-container {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 600px;
}

.action-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.contact-btn, .home-btn {
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.contact-btn {
  background: #3498db;
  color: white;
}

.contact-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.home-btn {
  background: transparent;
  color: #3498db;
  border-color: #3498db;
}

.home-btn:hover {
  background: #3498db;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

/* Responsive design for access denied page */
@media (max-width: 768px) {
  .access-denied-content {
    padding: 40px 20px;
  }
  
  .logo-large {
    font-size: 3rem;
  }
  
  .access-denied-content h1 {
    font-size: 2rem;
  }
  
  .main-message {
    font-size: 1.1rem;
  }
  
  .contact-info-blocks {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-btn, .home-btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .access-denied-container {
    padding: 20px 10px;
  }
  
  .access-denied-content {
    padding: 30px 15px;
  }
  
  .logo-large {
    font-size: 2.5rem;
  }
  
  .access-denied-content h1 {
    font-size: 1.8rem;
  }
  
  .contact-block {
    padding: 20px 15px;
  }
}

/* Спеціальні стилі для Android пристроїв - зменшене відображення */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @supports (-webkit-appearance: none) {
    /* Виявлення Android через WebKit */
    body.android-device {
      font-size: 11px !important;
      line-height: 1.4 !important;
    }
    
    /* Загальний текст для Android */
    body.android-device p {
      font-size: 12px !important;
      line-height: 1.4 !important;
    }
    
    body.android-device h1 {
      font-size: 20px !important;
    }
    
    body.android-device h2 {
      font-size: 18px !important;
    }
    
    body.android-device h3 {
      font-size: 16px !important;
    }
    
    body.android-device h4 {
      font-size: 14px !important;
    }
    
    body.android-device .hero-section h1 {
      font-size: 22px !important;
    }
    
    body.android-device .hero-section p {
      font-size: 13px !important;
    }
    
    body.android-device main {
      padding: 6px !important;
    }
    
    body.android-device header {
      padding: 8px 6px !important;
    }
    
    body.android-device .logo {
      font-size: 18px !important;
    }
    
    body.android-device .card {
      margin-bottom: 12px !important;
      border-radius: 12px !important;
    }
    
    body.android-device .card .image-wrap {
      height: 180px !important;
    }
    
    body.android-device .card-body {
      padding: 10px 12px 8px 12px !important;
    }
    
    body.android-device .card-title {
      font-size: 16px !important;
      margin-bottom: 4px !important;
    }
    
    body.android-device .card-subtitle {
      font-size: 13px !important;
      margin-bottom: 6px !important;
    }
    
    body.android-device .card-price {
      font-size: 18px !important;
      margin-bottom: 6px !important;
    }
    
    body.android-device .card-details {
      gap: 8px !important;
      margin-bottom: 6px !important;
    }
    
    body.android-device .card-details .detail-item {
      padding: 6px !important;
      border-radius: 8px !important;
    }
    
    body.android-device .card-details .detail-item span {
      font-size: 11px !important;
    }
    
    body.android-device .card-location {
      font-size: 11px !important;
      margin-top: 6px !important;
    }
    
    body.android-device .primary-nav a {
      font-size: 13px !important;
      padding: 4px 8px !important;
    }
    
    body.android-device .secondary-nav a {
      font-size: 12px !important;
      padding: 4px 8px !important;
    }
    
    body.android-device .secondary-nav .add-btn {
      padding: 6px 10px !important;
      font-size: 12px !important;
    }
    
    body.android-device .filters select {
      padding: 8px 10px !important;
      font-size: 13px !important;
    }
    
    body.android-device .listing-container {
      gap: 12px !important;
      padding: 0 3px !important;
    }
    
    /* Адмін панель для Android */
    body.android-device .admin-container {
      margin: 10px auto !important;
    }
    
    body.android-device .admin-nav {
      width: 200px !important;
      padding: 15px 0 !important;
    }
    
    body.android-device .admin-nav h2 {
      font-size: 16px !important;
      padding: 0 15px 15px !important;
    }
    
    body.android-device .admin-nav li {
      padding: 8px 15px !important;
      font-size: 13px !important;
    }
    
    body.android-device .admin-content {
      padding: 20px !important;
    }
    
    body.android-device .admin-actions button {
      padding: 4px 8px !important;
      font-size: 11px !important;
      margin: 2px !important;
    }
    
    /* Деталі автомобіля для Android */
    body.android-device .detail-container {
      padding: 10px !important;
    }
    
    body.android-device .detail-title {
      font-size: 18px !important;
      margin-bottom: 8px !important;
    }
    
    body.android-device .detail-price {
      font-size: 20px !important;
      margin-bottom: 10px !important;
    }
    
    body.android-device .detail-specs {
      font-size: 11px !important;
    }
    
    body.android-device .detail-specs dt {
      font-size: 10px !important;
    }
    
    body.android-device .detail-specs dd {
      font-size: 11px !important;
    }
    
    /* Опис автомобіля для Android */
    body.android-device .detail-description {
      font-size: 12px !important;
      line-height: 1.4 !important;
    }
    
    body.android-device .detail-description h3 {
      font-size: 14px !important;
      margin-bottom: 6px !important;
    }
    
    body.android-device .detail-description p {
      font-size: 12px !important;
      margin-bottom: 8px !important;
    }
    
    /* Контактна інформація для Android */
    body.android-device .detail-info .contact {
      font-size: 12px !important;
    }
    
    body.android-device .detail-info .contact p {
      font-size: 12px !important;
      margin-bottom: 6px !important;
    }
    
    /* Номери телефонів для Android - більш зручні для натискання */
    body.android-device .detail-info .contact .phone-number {
      background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
      color: white !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
      padding: 10px 16px !important;
      margin: 8px 4px !important;
      border-radius: 20px !important;
      min-height: 42px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      border: none !important;
      text-decoration: none !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2) !important;
      cursor: pointer !important;
      min-width: 200px !important;
    }
    
    body.android-device .detail-info .contact .phone-number:before {
      content: "📞" !important;
      font-size: 1.1rem !important;
    }
    
    body.android-device .detail-info .contact .phone-number:hover,
    body.android-device .detail-info .contact .phone-number:active {
      background: linear-gradient(135deg, #229954, #27ae60) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 3px 12px rgba(39, 174, 96, 0.3) !important;
    }
    
    /* Сторінка послуг для Android */
    body.android-device .services-container {
      padding: 15px 8px !important;
      min-height: auto !important;
    }
    
    body.android-device .services-header h1 {
      font-size: 22px !important;
      margin-bottom: 10px !important;
    }
    
    body.android-device .services-header p {
      font-size: 13px !important;
      margin-bottom: 20px !important;
    }
    
    body.android-device .services-grid {
      grid-template-columns: 1fr !important;
      gap: 15px !important;
      margin-bottom: 30px !important;
    }
    
    body.android-device .service-card {
      padding: 15px 12px !important;
      border-radius: 12px !important;
      margin: 0 5px !important;
    }
    
    body.android-device .service-icon {
      width: 40px !important;
      height: 40px !important;
      margin-bottom: 10px !important;
      border-radius: 8px !important;
    }
    
    body.android-device .service-card h3 {
      font-size: 16px !important;
      margin-bottom: 8px !important;
    }
    
    body.android-device .service-card p {
      font-size: 12px !important;
      line-height: 1.4 !important;
    }
    
    body.android-device .services-cta {
      padding: 20px 12px !important;
      margin-top: 20px !important;
      border-radius: 12px !important;
    }
    
    body.android-device .services-cta h2 {
      font-size: 18px !important;
      margin-bottom: 8px !important;
    }
    
    body.android-device .services-cta p {
      font-size: 12px !important;
      margin-bottom: 15px !important;
    }
    
    body.android-device .cta-btn {
      padding: 10px 15px !important;
      font-size: 12px !important;
      margin: 5px !important;
      border-radius: 8px !important;
    }
    
    /* Сторінка access-denied для Android */
    body.android-device .access-denied-container {
      padding: 15px 8px !important;
      min-height: calc(100vh - 60px) !important;
    }
    
    body.android-device .access-denied-content {
      padding: 20px 15px !important;
      border-radius: 12px !important;
    }
    
    body.android-device .logo-large {
      font-size: 24px !important;
      margin-bottom: 15px !important;
    }
    
    body.android-device .access-denied-content h1 {
      font-size: 18px !important;
      margin-bottom: 10px !important;
    }
    
    body.android-device .main-message {
      font-size: 12px !important;
      margin-bottom: 20px !important;
    }
    
    body.android-device .contact-info-blocks {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      margin: 15px 0 !important;
    }
    
    body.android-device .contact-block {
      padding: 12px !important;
      border-radius: 8px !important;
    }
    
    body.android-device .contact-block h3 {
      font-size: 14px !important;
      margin-bottom: 6px !important;
    }
    
    body.android-device .contact-block p {
      font-size: 12px !important;
    }
    
    body.android-device .map-section h3 {
      font-size: 14px !important;
      margin-bottom: 10px !important;
    }
    
    body.android-device .access-denied-content .map-container {
      border-radius: 8px !important;
      height: 200px !important;
    }
    
    body.android-device .access-denied-content .map-container iframe {
      height: 200px !important;
    }
    
    body.android-device .action-buttons {
      flex-direction: column !important;
      gap: 8px !important;
      margin-top: 15px !important;
    }
    
    body.android-device .contact-btn,
    body.android-device .home-btn {
      padding: 10px 15px !important;
      font-size: 12px !important;
      border-radius: 8px !important;
      width: 100% !important;
      max-width: 200px !important;
    }
    
    body.android-device .office-photo-small img {
      max-width: 120px !important;
      height: 80px !important;
      border-radius: 6px !important;
    }
  }
}

/* Sell Car Button Styles */
.sell-car-button-container {
  margin-top: 30px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.sell-car-button-container.show {
  opacity: 1;
  transform: translateY(0);
}

.sell-car-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
  cursor: pointer;
  min-width: 220px;
  justify-content: center;
}

.sell-car-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
  background: linear-gradient(135deg, #c0392b, #a93226);
}

.sell-car-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.sell-car-btn svg {
  transition: transform 0.3s ease;
}

.sell-car-btn:hover svg {
  transform: scale(1.1) rotate(5deg);
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.sell-car-btn:hover .btn-shine {
  left: 100%;
}

/* Responsive styles for sell car button */
@media (max-width: 768px) {
  .sell-car-btn {
    padding: 14px 24px;
    font-size: 14px;
    min-width: 200px;
  }
  
  .sell-car-btn svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .sell-car-btn {
    padding: 12px 20px;
    font-size: 13px;
    min-width: 180px;
  }
  
  .sell-car-btn svg {
    width: 16px;
    height: 16px;
  }
}