/*
Theme Name: Multan Aesthetics Luxury Clinic
Theme URI: http://multan-aesthetics-official-luxury.local/
Author: Multan Aesthetics & Dr. Muhammad Kabir
Author URI: http://multan-aesthetics-official-luxury.local/
Description: Premier Luxury Aesthetic Medicine, Dermatology & Advanced Hair Restoration WordPress Theme. Tailored specifically for Dr. Muhammad Kabir's Clinic in Gulgasht, Multan. Fully compatible with Elementor, Contact Form 7, and Rank Math SEO.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: multan-aesthetics
Tags: medical, clinic, dermatology, elementor, full-width-template, translation-ready, custom-menu, custom-logo
*/

/* Google Fonts: Poppins (Weights 300 to 900) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,600;1,700&display=swap');

/* Material Symbols Outlined Icon Font & Alignment */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1 !important;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  vertical-align: middle;
  flex-shrink: 0;
}

/* Core Typography & Base Variables */
:root {
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand-navy: #111B4A;
  --brand-navy-dark: #0B1133;
  --brand-green: #28A956;
  --brand-green-hover: #218c47;
  --brand-light-green: #EBF8F0;
  --brand-gold: #C8A96A;
  --brand-bg-gray: #F7F9FC;
  --brand-muted: #64748B;
  --brand-border: #E2E8F0;

  /* Design System Color Tokens */
  --color-primary: #000425;
  --color-primary-container: #111b4a;
  --color-secondary: #006d31;
  --color-secondary-container: #7ff89b;
  --color-surface: #f9f9fd;
  --color-surface-low: #f3f3f7;
  --color-surface-high: #e8e8ec;
  --color-surface-highest: #e2e2e6;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #1a1c1f;
  --color-on-surface-variant: #45464f;
  --color-outline: #767680;
  --color-outline-variant: #c6c5d0;
}

/* Universal Typography Baseline with Poppins */
html, body, button, input, select, textarea, optgroup {
  font-family: var(--font-family-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family-primary) !important;
  color: #15171A;
  background-color: #F7F9FC;
  line-height: 1.65;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

/* Headings Typography & Optical Balance Alignment */
h1, h2, h3, h4, h5, h6,
.font-display, .font-headline-lg, .font-headline-md, .font-headline-sm,
.font-title-lg, .font-title-md,
.text-display, .text-headline-lg, .text-headline-md, .text-headline-sm,
.text-title-lg, .text-title-md {
  font-family: var(--font-family-primary) !important;
  color: #111B4A;
  text-wrap: balance;
  margin-top: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

h1, .font-display, .text-display {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

h2, .font-headline-lg, .text-headline-lg {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h3, .font-headline-md, .text-headline-md {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.32;
}

h4, .font-headline-sm, .text-headline-sm {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.38;
}

h5, .font-title-lg, .text-title-lg {
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.42;
}

h6, .font-title-md, .text-title-md {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.48;
}

/* Body & Paragraph Typography with Pretty Wrapping */
p, .font-body-lg, .font-body-md, .font-body-sm,
.text-body-lg, .text-body-md, .text-body-sm {
  font-family: var(--font-family-primary) !important;
  text-wrap: pretty;
}

.font-body-lg, .text-body-lg {
  font-size: 1.125rem;
  line-height: 1.75;
  letter-spacing: -0.008em;
  font-weight: 400;
}

.font-body-md, .text-body-md {
  font-size: 0.9375rem;
  line-height: 1.68;
  letter-spacing: -0.005em;
  font-weight: 400;
}

.font-body-sm, .text-body-sm {
  font-size: 0.8125rem;
  line-height: 1.58;
  font-weight: 400;
}

/* Labels, Badges, and Status Chips Typography */
.font-label-lg, .text-label-lg {
  font-family: var(--font-family-primary) !important;
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.font-label-md, .text-label-md {
  font-family: var(--font-family-primary) !important;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.font-label-sm, .text-label-sm {
  font-family: var(--font-family-primary) !important;
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Button & Badge Alignment Rules */
button, .btn, .btn-primary-luxury,
a.inline-flex, span.inline-flex {
  vertical-align: middle;
}

/* Icon & Button Text Horizontal/Vertical Alignment */
button.inline-flex,
a.inline-flex,
span.inline-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

button > .material-symbols-outlined,
a > .material-symbols-outlined,
span.inline-flex > .material-symbols-outlined {
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Form Controls Typography Alignment */
input, select, textarea {
  font-family: var(--font-family-primary) !important;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  vertical-align: middle;
}

/* Design System Spacing & Layout Utilities */
.px-gutter { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-space-xl { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-space-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-space-md { padding-top: 1rem; padding-bottom: 1rem; }
.py-space-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-space-xs { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.px-space-xl { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-space-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-space-md { padding-left: 1rem; padding-right: 1rem; }
.px-space-sm { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-space-xs { padding-left: 0.25rem; padding-right: 0.25rem; }
.p-space-lg { padding: 1.5rem; }
.p-space-md { padding: 1rem; }
.p-space-sm { padding: 0.5rem; }
.p-space-xs { padding: 0.25rem; }

.gap-space-xs { gap: 0.25rem; }
.gap-space-sm { gap: 0.5rem; }
.gap-space-md { gap: 1rem; }
.gap-space-lg { gap: 1.5rem; }
.gap-space-xl { gap: 2.5rem; }

/* Brand Specific Utilities */
.bg-brandNavy { background-color: #111B4A !important; }
.bg-brandNavyDark { background-color: #0B1133 !important; }
.bg-brandGreen { background-color: #28A956 !important; }
.bg-brandGreenHover:hover { background-color: #218c47 !important; }
.bg-brandLightGreen { background-color: #EBF8F0 !important; }
.bg-brandBgGray { background-color: #F7F9FC !important; }
.text-brandNavy { color: #111B4A !important; }
.text-brandGreen { color: #28A956 !important; }
.text-brandGold { color: #C8A96A !important; }
.text-brandMuted { color: #64748B !important; }
.border-brandBorder { border-color: #E2E8F0 !important; }

/* Design System Color Classes */
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container-lowest { background-color: var(--color-surface-lowest); }
.bg-surface-container-low { background-color: var(--color-surface-low); }
.bg-surface-container { background-color: #ededf2; }
.bg-surface-container-high { background-color: var(--color-surface-high); }
.bg-surface-container-highest { background-color: var(--color-surface-highest); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-container { background-color: var(--color-secondary-container); }

.text-primary { color: var(--color-primary); }
.text-primary-container { color: var(--color-primary-container); }
.text-secondary { color: var(--color-secondary); }
.text-on-primary { color: #ffffff; }
.text-on-secondary { color: #ffffff; }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }

/* Custom Elementor Full Width Content Resets */
.elementor-page .entry-content,
.elementor-page .elementor-section-wrap {
  width: 100%;
}

/* Luxury Clinical Contact Form 7 Design System */
.cf7-container {
  width: 100%;
}

.wpcf7 form {
  width: 100%;
}

.wpcf7 form p {
  margin-bottom: 16px;
  width: 100%;
}

.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
  margin-top: 4px;
}

/* Base Form Controls & Inputs */
.cf7-input,
.cf7-select,
.cf7-textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100% !important;
  display: block !important;
  height: 48px;
  padding: 10px 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  background-color: #F7F9FC !important;
  border-radius: 12px !important;
  font-family: var(--font-family-primary) !important;
  font-size: 14px !important;
  color: #15171A !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Icon Padding when inside .cf7-input-wrap */
.cf7-input-wrap .cf7-input,
.cf7-input-wrap .cf7-select,
.cf7-input-wrap input[type="text"],
.cf7-input-wrap input[type="email"],
.cf7-input-wrap input[type="tel"],
.cf7-input-wrap input[type="date"],
.cf7-input-wrap select {
  padding-left: 44px !important;
}

.cf7-textarea,
.wpcf7 textarea {
  padding: 14px 16px !important;
}

/* Focus and Hover State */
.cf7-input:focus,
.cf7-select:focus,
.cf7-textarea:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #28A956 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(40, 169, 86, 0.12) !important;
  outline: none !important;
}

/* Textarea Custom Height */
.cf7-textarea,
.wpcf7 textarea {
  height: auto !important;
  min-height: 110px !important;
  padding-top: 12px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Labels */
.cf7-label,
.wpcf7 label {
  font-family: var(--font-family-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111B4A !important;
  letter-spacing: 0.01em !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Luxury Grid Structure */
.cf7-luxury-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cf7-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

@media (max-width: 640px) {
  .cf7-row-2 {
    grid-template-columns: 1fr;
  }
}

.cf7-field-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cf7-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.cf7-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #767680;
  font-size: 20px !important;
  pointer-events: none;
  z-index: 2;
  line-height: 1 !important;
}

.cf7-field-icon.cf7-textarea-icon {
  top: 16px;
  transform: none;
}

/* Luxury CF7 Submit Button */
.cf7-submit,
.wpcf7-submit,
.wpcf7 input[type="submit"] {
  width: 100% !important;
  height: 52px !important;
  background-color: #28A956 !important;
  color: #FFFFFF !important;
  font-family: var(--font-family-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 16px rgba(40, 169, 86, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

.cf7-submit:hover,
.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover {
  background-color: #218c47 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(40, 169, 86, 0.38) !important;
}

.cf7-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
  margin-top: 12px;
  font-family: var(--font-family-primary);
  text-align: center;
}

/* Validation & Feedback */
.wpcf7-not-valid-tip {
  font-size: 12px !important;
  color: #DC2626 !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
  font-family: var(--font-family-primary) !important;
  display: block;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: #EBF8F0;
  border-color: #28A956;
  color: #1C773D;
  border-radius: 12px;
  padding: 16px;
  font-weight: 600;
  margin-top: 20px;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
  background-color: #FEE2E2;
  border-color: #DC2626;
  color: #991B1B;
  border-radius: 12px;
  padding: 16px;
  font-weight: 600;
  margin-top: 20px;
}

.wpcf7-spinner {
  display: block;
  margin: 10px auto;
}

/* Luxury button transitions */
.btn-primary-luxury {
  background-color: #28A956;
  color: #FFFFFF;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(40, 169, 86, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.btn-primary-luxury:hover {
  background-color: #218c47;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(40, 169, 86, 0.35);
}

/* Responsive nav transition */
#mobile-menu {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Quick Contact 4-Cards Floating Strip Stacking & Full Visibility */
.contact-cards-strip {
  position: relative !important;
  z-index: 25 !important;
}

.contact-info-card {
  position: relative !important;
  z-index: 10 !important;
}

.contact-info-card:hover {
  z-index: 30 !important;
}