/* =============================================
   MOBILE APP STYLES
   Activated at 767px and below
   Complete native-app experience
   ============================================= */

:root {
  --bottom-nav-height: 64px;
  --mobile-header-height: 52px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-primary: #1a2744;
  --mobile-primary-dark: #0f1a2e;
  --mobile-bg: #f5f7fa;
  --mobile-card-bg: #ffffff;
  --mobile-radius: 12px;
  --mobile-shadow: 0 2px 12px rgba(0,0,0,0.08);
  --mobile-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

@media (max-width: 767px) {

/* ── Hide ALL desktop elements ── */
.site-header,
.hero,
.featured-section,
.lifestyle-banner,
.why-section,
.owner-section,
.testimonials-section,
.community-section,
.cta-section,
.site-footer,
.floating-cta,
.floating-whatsapp,
.search-panel,
.quick-localities,
.gps-btn,
.gps-status {
  display: none !important;
}

/* ── Body setup for mobile ── */
body {
  padding-top: var(--mobile-header-height);
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  background: var(--mobile-bg);
  font-family: var(--mobile-font);
}

/* ── Bottom Navigation Bar ── */
.mobile-bottom-nav {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: calc(var(--bottom-nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--mobile-card-bg);
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  font-family: var(--mobile-font);
}

.mobile-bottom-nav ul {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  justify-content: space-around;
}

.mobile-bottom-nav li {
  flex: 1;
  text-align: center;
}

.mobile-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  color: #8e8e93;
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mobile-bottom-nav a.active {
  color: var(--mobile-primary);
}

.mobile-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--mobile-primary);
  border-radius: 0 0 3px 3px;
}

.mobile-bottom-nav .nav-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 0.2s;
}

.mobile-bottom-nav a:active .nav-icon {
  transform: scale(0.9);
}

.mobile-bottom-nav .nav-label {
  line-height: 1;
  white-space: nowrap;
}

.mobile-bottom-nav .wishlist-count {
  position: absolute;
  top: 0;
  right: 50%;
  margin-right: -18px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  display: none;
}

.mobile-bottom-nav .wishlist-count.show {
  display: block;
}

/* ── Mobile Compact Header ── */
.mobile-header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  height: var(--mobile-header-height);
  background: var(--mobile-primary);
  color: #fff;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  font-family: var(--mobile-font);
}

.mobile-header .mh-brand {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.3px;
}

.mobile-header .mh-brand img {
  height: 28px;
  vertical-align: middle;
}

.mobile-header .mh-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-header .mh-btn {
  background: none;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  padding: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mobile-header .mh-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.mobile-header .mh-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile Search Bar (slide-down) ── */
.mobile-search-bar {
  display: block;
  position: fixed;
  top: var(--mobile-header-height);
  left: 0;
  right: 0;
  z-index: 9997;
  background: var(--mobile-card-bg);
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.mobile-search-bar.open {
  transform: translateY(0);
}

.mobile-search-bar input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e5e5ea;
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--mobile-font);
  outline: none;
  transition: border-color 0.2s;
  background: #f5f7fa;
}

.mobile-search-bar input:focus {
  border-color: var(--mobile-primary);
  background: #fff;
}

/* ── Mobile Property Feed (Instagram-style) ── */
.mobile-property-feed {
  display: block;
  padding: 0 0 calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px);
  background: var(--mobile-bg);
  min-height: 100vh;
}

.mobile-feed-card {
  background: var(--mobile-card-bg);
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #e5e5ea;
  overflow: hidden;
  position: relative;
}

.mobile-feed-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
}

.mobile-feed-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mobile-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.mobile-feed-info {
  flex: 1;
  min-width: 0;
}

.mobile-feed-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
  line-height: 1.2;
}

.mobile-feed-location {
  font-size: 12px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-feed-actions-top {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mobile-feed-actions-top button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-feed-actions-top svg {
  width: 20px;
  height: 20px;
  fill: #1c1c1e;
}

.mobile-feed-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: #e5e5ea;
  position: relative;
  overflow: hidden;
}

.mobile-feed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-feed-image .feed-img-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.mobile-feed-badges {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}

.mobile-feed-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.mobile-feed-badge.verified {
  background: rgba(26, 39, 68, 0.9);
  color: #fff;
}

.mobile-feed-badge.rent {
  background: rgba(255, 59, 48, 0.9);
  color: #fff;
}

.mobile-feed-actions {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 16px;
}

.mobile-feed-actions button {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}

.mobile-feed-actions button:active {
  transform: scale(0.85);
}

.mobile-feed-actions svg {
  width: 26px;
  height: 26px;
  fill: #1c1c1e;
  transition: fill 0.2s;
}

.mobile-feed-actions .heart-btn.is-liked svg {
  fill: #ff3b30;
  stroke: #ff3b30;
}

.mobile-feed-actions .feed-save {
  margin-left: auto;
}

.mobile-feed-likes {
  padding: 0 16px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1e;
}

.mobile-feed-caption {
  padding: 0 16px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #1c1c1e;
}

.mobile-feed-caption strong {
  font-weight: 600;
}

.mobile-feed-caption .feed-specs {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: #8e8e93;
}

.mobile-feed-caption .feed-specs span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.mobile-feed-comments {
  padding: 0 16px 12px;
  font-size: 12px;
  color: #8e8e93;
}

/* ── Bottom Sheet Filters ── */
.mobile-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s;
}

.mobile-filter-overlay.open {
  display: block;
  opacity: 1;
}

.mobile-filter-sheet {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: var(--mobile-card-bg);
  border-radius: 16px 16px 0 0;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  font-family: var(--mobile-font);
  padding-bottom: calc(16px + var(--safe-bottom));
}

.mobile-filter-sheet.open {
  transform: translateY(0);
}

.mf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e5e5ea;
  position: sticky;
  top: 0;
  background: var(--mobile-card-bg);
  z-index: 1;
}

.mf-header h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1c1c1e;
  margin: 0;
}

.mf-header button {
  background: none;
  border: none;
  font-size: 15px;
  color: var(--mobile-primary);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mf-body {
  padding: 16px 20px;
}

.mf-group {
  margin-bottom: 20px;
}

.mf-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3a3a3c;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mf-group .mf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mf-chip {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid #d1d1d6;
  background: #fff;
  font-size: 14px;
  color: #3a3a3c;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mf-chip.active {
  border-color: var(--mobile-primary);
  background: rgba(26, 39, 68, 0.1);
  color: var(--mobile-primary);
  font-weight: 600;
}

.mf-chip:active {
  transform: scale(0.95);
}

.mf-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mf-range input[type="range"] {
  flex: 1;
  accent-color: var(--mobile-primary);
}

.mf-range .mf-range-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--mobile-primary);
  min-width: 60px;
  text-align: right;
}

.mf-footer {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #e5e5ea;
}

.mf-footer button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mf-footer .mf-reset {
  background: #f5f7fa;
  color: #3a3a3c;
}

.mf-footer .mf-apply {
  background: var(--mobile-primary);
  color: #fff;
}

/* ── Pull-to-Refresh ── */
.ptr-wrapper {
  position: relative;
  overflow: hidden;
}

.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  transition: height 0.2s;
  color: #8e8e93;
  font-size: 13px;
  gap: 8px;
}

.ptr-indicator .ptr-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e5ea;
  border-top-color: var(--mobile-primary);
  border-radius: 50%;
  animation: ptr-spin 0.8s linear infinite;
}

.ptr-indicator.pulling {
  height: 50px;
}

.ptr-indicator.refreshing {
  height: 50px;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* ── Skeleton Loading ── */
.skeleton {
  background: linear-gradient(90deg, #e5e5ea 25%, #f0f0f5 50%, #e5e5ea 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

.skeleton-card {
  background: var(--mobile-card-bg);
  border-radius: 0;
  border-bottom: 1px solid #e5e5ea;
  padding: 16px;
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 12px;
}

.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  width: 70%;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.long { width: 90%; }

/* ── Page Transitions ── */
.page-enter {
  animation: pageIn 0.3s ease-out;
}

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

/* ── Mobile Admin/Staff Card Layouts ── */
.mobile-data-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.mobile-data-card {
  background: var(--mobile-card-bg);
  border-radius: var(--mobile-radius);
  box-shadow: var(--mobile-shadow);
  padding: 16px;
  position: relative;
}

.mobile-data-card .mdc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f5;
}

.mobile-data-card .mdc-row:last-child {
  border-bottom: none;
}

.mobile-data-card .mdc-label {
  font-size: 12px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.mobile-data-card .mdc-value {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
  text-align: right;
}

.mobile-data-card .mdc-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f5;
}

.mobile-data-card .mdc-actions button {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #d1d1d6;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-data-card .mdc-actions button:active {
  background: #f0f0f5;
}

/* ── Hide DataTables on mobile ── */
.dataTables_wrapper .dataTable {
  display: none !important;
}

/* ── Mobile Toast ── */
.mobile-toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1c1c1e;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: var(--mobile-font);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.mobile-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Mobile App Install Banner ── */
.mobile-install-banner {
  display: flex;
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px);
  left: 12px;
  right: 12px;
  z-index: 9990;
  background: var(--mobile-card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  align-items: center;
  gap: 12px;
  font-family: var(--mobile-font);
  animation: slideUp 0.4s ease-out;
}

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

.mobile-install-banner .mib-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--mobile-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.mobile-install-banner .mib-text {
  flex: 1;
  min-width: 0;
}

.mobile-install-banner .mib-title {
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1e;
}

.mobile-install-banner .mib-sub {
  font-size: 12px;
  color: #8e8e93;
}

.mobile-install-banner .mib-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.mobile-install-banner .mib-actions button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-install-banner .mib-install {
  background: var(--mobile-primary);
  color: #fff;
}

.mobile-install-banner .mib-close {
  background: #f0f0f5;
  color: #3a3a3c;
}

/* ── Detail page mobile adjustments ── */
.detail-page {
  padding-bottom: calc(80px + var(--bottom-nav-height) + var(--safe-bottom));
}

.book-float-btn {
  bottom: calc(16px + var(--bottom-nav-height) + var(--safe-bottom)) !important;
  right: 16px !important;
  left: 16px !important;
  width: auto !important;
  min-width: unset !important;
}

.slider-arrow {
  opacity: 1 !important;
}

.detail-facts {
  grid-template-columns: repeat(2, 1fr) !important;
}

.amenities {
  grid-template-columns: repeat(2, 1fr) !important;
}

.price-strip {
  grid-template-columns: 1fr !important;
}

/* ── Tiny screens (≤480px) ── */
@media (max-width: 480px) {
  .mobile-feed-actions svg { width: 24px; height: 24px; }
  .mobile-header { height: 48px; }
  .mobile-header .mh-brand { font-size: 16px; }
  :root { --mobile-header-height: 48px; }
}

/* ── Mobile View Pages (wishlist, bookings, profile) ── */
.mobile-view-page {
  min-height: calc(100vh - var(--mobile-header-height) - var(--bottom-nav-height) - var(--safe-bottom));
}
.mobile-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eef0f4;
  position: sticky;
  top: 0;
  z-index: 10;
}
.mobile-view-header h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--mobile-primary);
}
.mobile-view-back {
  background: none;
  border: none;
  font-size: 22px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--mobile-primary);
  line-height: 1;
}
.mobile-view-content {
  padding: 16px;
}
.loading-text {
  text-align: center;
  color: #999;
  padding: 40px 0;
}
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}
.empty-state svg {
  margin-bottom: 16px;
}
.empty-state h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: #333;
}
.empty-state p {
  font-size: 14px;
  margin: 0 0 20px;
}
.btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: var(--mobile-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
/* Wishlist items */
.wishlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef0f4;
}
.wishlist-item-link {
  display: flex;
  gap: 12px;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.wishlist-item-img {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.wishlist-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wishlist-item-info h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #222;
}
.wishlist-item-loc {
  font-size: 12px;
  color: #888;
  margin: 0 0 4px;
}
.wishlist-item-rent {
  font-size: 14px;
  font-weight: 700;
  color: var(--mobile-primary);
  margin: 0;
}
.wishlist-remove-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
/* Bookings */
.booking-lookup-form {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: var(--mobile-shadow);
}
.booking-lookup-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}
.booking-lookup-form input[type="tel"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.booking-lookup-form .btn-primary {
  width: 100%;
}
.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.booking-card {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: var(--mobile-shadow);
}
.booking-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mobile-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.booking-meta {
  font-size: 13px;
  color: #666;
  margin: 2px 0;
}
.booking-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}
.booking-status-new { background: #e8f4fd; color: #1a73e8; }
.booking-status-confirmed { background: #e6f7e6; color: #1b8a1b; }
.booking-status-cancelled { background: #fee8e8; color: #d32f2f; }
.no-results {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}
/* Profile */
.profile-page {
  text-align: center;
  padding-top: 40px;
}
.profile-avatar {
  margin-bottom: 12px;
}
.profile-page h2 {
  font-size: 22px;
  margin: 0 0 4px;
  color: #222;
}
.profile-subtitle {
  font-size: 14px;
  color: #888;
  margin: 0 0 24px;
}
.profile-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.profile-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--mobile-shadow);
}
.profile-link-item svg {
  width: 22px;
  height: 22px;
  fill: var(--mobile-primary);
  flex-shrink: 0;
}
} /* end @media (max-width: 767px) */