/*
 * GenieHome v20 Design System
 * Central visual layer. Loaded after legacy/page styles to normalize colours,
 * typography, controls, cards and responsive behaviour without changing data logic.
 */
:root {
  --gh-primary: #2457d6;
  --gh-primary-hover: #1848c2;
  --gh-primary-soft: #edf3ff;
  --gh-navy: #0d1b3d;
  --gh-navy-2: #17366f;
  --gh-gold: #f1b84b;
  --gh-success: #16a45b;
  --gh-success-hover: #11874b;
  --gh-danger: #dc3f4f;
  --gh-warning: #e79a19;
  --gh-page: #f4f7fc;
  --gh-surface: #ffffff;
  --gh-surface-2: #f8faff;
  --gh-text: #101b33;
  --gh-text-2: #41506b;
  --gh-muted: #71809a;
  --gh-border: #dfe6f1;
  --gh-border-strong: #cbd6e6;
  --gh-shadow-xs: 0 2px 8px rgba(13, 27, 61, .05);
  --gh-shadow-sm: 0 8px 22px rgba(13, 27, 61, .07);
  --gh-shadow-md: 0 16px 42px rgba(13, 27, 61, .10);
  --gh-radius-sm: 10px;
  --gh-radius: 16px;
  --gh-radius-lg: 22px;
  --gh-control-h: 48px;
  --gh-container: 1320px;
  --gh-ease: 180ms ease;
}

/* Base */
html { scroll-behavior: smooth; }
body { background: var(--gh-page); color: var(--gh-text); }
body, button, input, select, textarea { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
.gh-container { width: min(calc(100% - 40px), var(--gh-container)); margin-inline: auto; }
.gh-section { padding: 54px 0; }
.gh-section__head { margin-bottom: 24px; }
.gh-section__head h1,.gh-section__head h2,.gh-section__head h3 { margin: 0; color: var(--gh-text); }
.gh-section__head h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.015em; }
.gh-section__head > a { color: var(--gh-primary); font-weight: 800; }
.gh-empty,.gh-empty-state { border: 1px dashed var(--gh-border-strong); border-radius: var(--gh-radius); background: var(--gh-surface); color: var(--gh-muted); }

/* Typography scale */
.geniehome-ui h1,.gh-page h1,.gh-account-panel h1,.gb-page h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.18; letter-spacing: -.02em; }
.geniehome-ui h2,.gh-page h2,.gh-account-panel h2,.gb-page h2 { font-size: clamp(23px, 2.2vw, 32px); line-height: 1.24; letter-spacing: -.015em; }
.geniehome-ui h3,.gh-page h3,.gh-account-panel h3,.gb-page h3 { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.32; }
.geniehome-ui p,.gh-page p,.gh-account-panel p,.gb-page p { color: var(--gh-text-2); line-height: 1.65; }

/* Unified buttons */
.gh-button,.gh-green-btn,.gb-btn,.gb-submit,.gh-topup-submit,
button[type="submit"],input[type="submit"] {
  min-height: var(--gh-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: var(--gh-primary);
  color: #fff !important;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(36,87,214,.18);
  cursor: pointer;
  transition: transform var(--gh-ease), background var(--gh-ease), box-shadow var(--gh-ease), border-color var(--gh-ease);
}
.gh-button:hover,.gh-green-btn:hover,.gb-btn:hover,.gb-submit:hover,
button[type="submit"]:hover,input[type="submit"]:hover {
  background: var(--gh-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(36,87,214,.23);
}
.gh-green-btn,.gh-topup-submit { background: var(--gh-success); box-shadow: 0 7px 16px rgba(22,164,91,.18); }
.gh-green-btn:hover,.gh-topup-submit:hover { background: var(--gh-success-hover); }
button:disabled,.gh-topup-submit:disabled,[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Unified forms */
.geniehome-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.geniehome-ui select,.geniehome-ui textarea,
.gh-account-panel input:not([type="checkbox"]):not([type="radio"]),.gh-account-panel select,.gh-account-panel textarea,
.gb-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.gb-page select,.gb-page textarea {
  width: 100%;
  min-height: var(--gh-control-h);
  border: 1px solid var(--gh-border);
  border-radius: 12px;
  background: #fff;
  color: var(--gh-text);
  padding: 11px 14px;
  outline: none;
  box-shadow: none;
  transition: border-color var(--gh-ease), box-shadow var(--gh-ease), background var(--gh-ease);
}
.geniehome-ui textarea,.gh-account-panel textarea,.gb-page textarea { min-height: 130px; resize: vertical; }
.geniehome-ui input:focus,.geniehome-ui select:focus,.geniehome-ui textarea:focus,
.gh-account-panel input:focus,.gh-account-panel select:focus,.gh-account-panel textarea:focus,
.gb-page input:focus,.gb-page select:focus,.gb-page textarea:focus {
  border-color: var(--gh-primary);
  box-shadow: 0 0 0 4px rgba(36,87,214,.11);
}
.geniehome-ui label,.gh-account-panel label,.gb-page label { color: var(--gh-text); font-weight: 750; }

/* Shared surfaces */
.gh-account-mini-card,.gh-account-menu,.gh-account-panel,
.gb-card,.gb-section,.gh-topup-box,.gh-balance-card,
.gh-faq__item,.gh-blog-card,.gh-service-card {
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  background: var(--gh-surface) !important;
  box-shadow: var(--gh-shadow-xs) !important;
}

/* Home hero/search */
.gh-hero { background: linear-gradient(118deg, var(--gh-navy) 0%, var(--gh-navy-2) 58%, #275ddb 100%); color: #fff; }
.gh-hero h1,.gh-hero h2,.gh-hero h3,.gh-hero p,.gh-hero .gh-eyebrow { color: #fff; }
.gh-hero__search { border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow-md); }
.gh-search-form,.gh-search { border-radius: var(--gh-radius-lg); }
.gh-search-form select,.gh-search-form input { border-radius: 0; }

/* Property grids: preserve existing card composition, normalize spacing only */
.gh-property-grid { gap: 22px; }
.ghp-card { border: 1px solid var(--gh-border) !important; border-radius: var(--gh-radius) !important; box-shadow: var(--gh-shadow-sm) !important; overflow: hidden; transition: transform var(--gh-ease), box-shadow var(--gh-ease); }
.ghp-card:hover { transform: translateY(-3px); box-shadow: var(--gh-shadow-md) !important; }
.ghp-card a { text-decoration: none; }
.ghp-title { color: var(--gh-text) !important; }
.ghp-meta,.ghp-footer { color: var(--gh-muted); }

/* Services */
.gh-services__grid { gap: 22px; }
.gh-services .gh-service-card { transition: transform var(--gh-ease), box-shadow var(--gh-ease); }
.gh-services .gh-service-card:hover { transform: translateY(-4px); box-shadow: var(--gh-shadow-md) !important; }
.gh-services .gh-service-card > div { min-height: 118px; }
.gh-services .gh-service-card h3 { color: var(--gh-text) !important; }
.gh-services .gh-service-card p { color: var(--gh-muted) !important; }

/* Blog */
.ghb-page { color: var(--gh-text); }
.ghb-hero { background: linear-gradient(118deg, var(--gh-navy) 0%, #173572 62%, #275ddb 100%) !important; }
.ghb-hero h1,.ghb-hero h2,.ghb-hero h3,.ghb-hero p { color: #fff !important; }
.ghb-hero .ghb-hero-content h3 { font-size: clamp(27px, 3vw, 40px) !important; line-height: 1.2 !important; }
.ghb-section-heading h2,.ghb-section-heading h3 { font-size: clamp(23px, 2.5vw, 32px) !important; }
.ghb-card h2,.ghb-card h3,.ghb-post-card h2,.ghb-post-card h3 { font-size: 18px !important; line-height: 1.42 !important; }
.ghb-card p,.ghb-post-card p,.ghb-page p { font-size: 14px !important; line-height: 1.7 !important; }
.ghb-card,.ghb-post-card { border: 1px solid var(--gh-border) !important; border-radius: var(--gh-radius) !important; box-shadow: var(--gh-shadow-xs) !important; overflow: hidden; }

/* FAQ */
.gh-faq__list { display: grid; gap: 12px; }
.gh-faq__item { overflow: hidden; }
.gh-faq__item summary { padding: 18px 20px; color: var(--gh-text); font-weight: 800; cursor: pointer; }
.gh-faq__item > div { padding: 0 20px 18px; }

/* Account/dashboard */
.gh-account-shell { gap: 24px; }
.gh-account-left { min-width: 0; }
.gh-account-menu a { border-radius: 11px; color: var(--gh-text-2); transition: background var(--gh-ease), color var(--gh-ease); }
.gh-account-menu a:hover,.gh-account-menu a.active,.gh-account-menu .active > a { background: var(--gh-primary-soft); color: var(--gh-primary); }
.gh-account-panel { padding: 26px !important; }
.gh-mp-head { gap: 18px; }
.gh-mp-head h1,.gh-mp-head h2 { color: var(--gh-text); }
.gh-account-notice { border-radius: 12px; background: #eaf8f1; border: 1px solid #bee9d1; color: #087343; }
.gh-account-notice--error { background: #fff0f2; border-color: #f3c5cc; color: #a91f35; }
.gh-mp-row { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: #fff; box-shadow: var(--gh-shadow-xs); overflow: hidden; }
.gh-mp-actions a,.gh-mp-actions button { border-radius: 10px; }
.gh-fav-grid.gh-property-grid { gap: 22px !important; }

/* Balance */
.gh-balance-card.primary { background: linear-gradient(135deg, var(--gh-primary), #173d9b) !important; color: #fff; }
.gh-balance-card.primary * { color: #fff !important; }
.gh-tr-row { border-color: var(--gh-border); }

/* Add/Edit Property */
.gb-page { color: var(--gh-text); }
.gb-sidebar { border-right-color: var(--gh-border); }
.gb-steps { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); background: #fff; box-shadow: var(--gh-shadow-xs); overflow: hidden; }
.gb-step { color: var(--gh-text-2); }
.gb-step:hover,.gb-step.active { color: var(--gh-primary); background: var(--gh-primary-soft); }
.gb-section { padding: 24px !important; margin-bottom: 18px; }
.gb-section h2,.gb-section h3 { color: var(--gh-text); }
.gb-upload { border: 1.5px dashed #a9bad3 !important; border-radius: var(--gh-radius) !important; background: var(--gh-surface-2) !important; }
.gb-upload:hover { border-color: var(--gh-primary) !important; background: var(--gh-primary-soft) !important; }
.gb-existing-gallery { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px !important; }
.gb-existing-item { border-radius: 12px !important; box-shadow: var(--gh-shadow-xs) !important; cursor: grab; }
.gb-existing-item:active { cursor: grabbing; }
.gb-existing-item.main { border-color: var(--gh-primary) !important; box-shadow: 0 0 0 3px rgba(36,87,214,.12), var(--gh-shadow-sm) !important; }
.gb-remove-existing { background: rgba(13,27,61,.82) !important; color: #fff !important; border: 0 !important; }

/* Public page CTA/hero colour safety */
.ghb-final-cta,.gh-contact-cta,[class*="hero"][style*="gradient"] { color:#fff; }
.ghb-final-cta h1,.ghb-final-cta h2,.ghb-final-cta h3,.gh-contact-cta h1,.gh-contact-cta h2,.gh-contact-cta h3 { color:#fff !important; }
.ghb-final-cta p,.gh-contact-cta p { color:rgba(255,255,255,.86) !important; }

/* Tables */
.gh-transactions-table,.geniehome-ui table { border: 1px solid var(--gh-border); border-radius: var(--gh-radius); overflow: hidden; background: #fff; }
.geniehome-ui table th { background: var(--gh-surface-2); color: var(--gh-text); }
.geniehome-ui table td,.geniehome-ui table th { border-color: var(--gh-border); }

/* Focus/accessibility */
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid rgba(36,87,214,.32); outline-offset: 2px; }

@media (max-width: 1180px) {
  .gh-container { width: min(calc(100% - 30px), var(--gh-container)); }
  .gb-existing-gallery { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 900px) {
  .gh-section { padding: 42px 0; }
  .gh-account-panel { padding: 20px !important; }
  .gb-section { padding: 20px !important; }
  .gb-existing-gallery { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .gh-container { width: min(calc(100% - 20px), var(--gh-container)); }
  .gh-section { padding: 34px 0; }
  .gh-section__head { align-items: flex-start; }
  .gh-section__head h2 { font-size: 24px; }
  .gh-account-panel { padding: 16px !important; border-radius: 14px !important; }
  .gh-button,.gh-green-btn,.gb-btn,.gb-submit { width: 100%; }
  .gb-section { padding: 16px !important; border-radius: 14px !important; }
  .gb-existing-gallery { gap: 9px !important; }
  .ghb-hero .ghb-hero-content h3 { font-size: 27px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* v20.3 header notification indicator */
.gh-header-notifications{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gh-border,#dbe3ef);border-radius:50%;background:#fff;text-decoration:none;font-size:18px}
.gh-header-notifications b{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;line-height:1}