/**
 * RS Cricket Institute - Contact Page Stylesheet (contact.css)
 * Loaded exclusively on page-contact.php
 */

.contact-page-wrapper {
  background-color: var(--color-white);
  overflow-x: clip;
}

/* 1. Contact Hero Banner */
.contact-hero-section {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-dark-base);
}

@media (max-width: 991.98px) {
  .contact-hero-section {
    min-height: auto;
    padding: 6rem 0 3.5rem;
    background-position: center;
  }
}

.contact-hero-section h1 .text-gold-accent,
.contact-hero-section h1 span {
  color: var(--color-primary) !important;
}

.contact-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-text-on-dark-soft);
  border-radius: 14px;
  padding: 1.75rem;
  height: 100%;
  box-shadow: 0 4px 18px var(--color-light-border-subtle);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-info-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--color-black) 8%, transparent);
}

.contact-form-container {
  background: var(--color-white);
  border: 1px solid var(--color-text-on-dark-soft);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-black) 6%, transparent);
}

.contact-map-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-text-on-dark-soft);
  box-shadow: 0 8px 24px var(--color-light-border);
}

/* ========================================================
   CUSTOM ICON BADGES (MATCHING EXACT PDF DESIGN)
   ======================================================== */
.contact-icon-badge {
  width: var(--icon-box-size-lg, 48px);
  height: var(--icon-box-size-lg, 48px);
  min-width: var(--icon-box-size-lg, 48px);
  min-height: var(--icon-box-size-lg, 48px);
  border-radius: var(--icon-box-radius, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-smooth, all 0.3s cubic-bezier(0.16, 1, 0.3, 1));
}

.contact-icon-badge img,
.contact-dynamic-icon {
  width: var(--icon-image-size, 18px);
  height: var(--icon-image-size, 18px);
  max-width: var(--icon-image-size, 18px);
  max-height: var(--icon-image-size, 18px);
  object-fit: contain;
  display: block;
}

.contact-icon-badge svg {
  width: var(--icon-image-size, 18px);
  height: var(--icon-image-size, 18px);
  max-width: var(--icon-image-size, 18px);
  max-height: var(--icon-image-size, 18px);
  display: block;
}

/* Light Section Icon Badge (#FAF7F0 with gold border) */
.contact-icon-badge-light {
  background: var(--color-light-cream) !important;
  border: 1px solid var(--color-light-border-warm) !important;
  color: var(--color-primary-dark);
}

.contact-icon-badge-light svg {
  color: var(--color-primary-dark);
}

/* Dark Hero Section Icon Badge */
.contact-icon-badge-dark {
  background: var(--color-primary-soft) !important;
  border: 1px solid var(--color-primary-soft-lg) !important;
  color: var(--color-primary);
}

.contact-icon-badge-dark svg {
  color: var(--color-primary);
  display: block;
}

/* Hero Pill Card Styling */
.contact-hero-pill {
  background: color-mix(in srgb, var(--color-white) 4%, transparent);
  border: 1px solid var(--color-dark-border-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.contact-hero-pill:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-white) 7%, transparent);
}

/* Three Ways Card Styling (Matching exact PDF design) */
.contact-ways-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-border-warm);
  border-left: 3px solid var(--color-primary);
  border-radius: 14px;
  transition: all 0.25s ease;
}

.contact-ways-card:hover {
  border-color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
  box-shadow: 0 10px 25px var(--color-primary-soft);
  transform: translateY(-3px);
}

.contact-ways-card:hover .contact-icon-badge-light {
  border-color: var(--color-primary);
  background: var(--color-primary-tint-strong);
  transform: scale(1.05);
}

/* ========================================================
   SECTION 2: COME & VISIT US + ENQUIRY FORM (EXACT DESIGN)
   ======================================================== */
/* Contact Detail Labels (ADDRESS, PHONE, INSTAGRAM, TRAINING HOURS) */
.contact-detail-label,
#contact-form h6.contact-detail-label,
#contact-form .contact-detail-label {
  color: var(--color-primary-dark) !important;
  font-size: var(--fs-2xs) !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
}

.contact-enquiry-card {
  background-color: var(--color-light-warm) !important;
  border: 1px solid var(--color-light-warm) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-black) 2%, transparent);
}

.contact-enquiry-card .form-label {
  font-size: var(--fs-2xs);
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--color-dark-elevated);
  margin-bottom: 0.4rem;
  display: block;
}

.contact-enquiry-card .form-control,
.contact-enquiry-card .form-select {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-text-on-dark-soft) !important;
  border-radius: 8px !important;
  font-size: var(--fs-md);
  padding: 0.75rem 1rem;
  color: var(--color-dark-slate);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-enquiry-card .form-control::placeholder {
  color: var(--color-text-muted-light);
  font-size: var(--fs-md);
}

.contact-enquiry-card .form-control:focus,
.contact-enquiry-card .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft-md) !important;
  outline: none;
  background-color: var(--color-white) !important;
}