/* Uncle Joe's Games - Custom Theme + Fluid Layout */
:root {
  --ujg-brown: #4B352A;
  --ujg-teal: #5DD3B6;
  --ujg-orange: #D1855C;
  --ujg-cream: #F5ECD5;
  --ujg-navy: #2D3C59;
  --ujg-green: #94A378;
}

/* === FLUID CONTAINER-RESPONSIVE LAYOUT === */
html, body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background-color: #faf7f0 !important;
}

#main.container {
  max-width: 100% !important;
  width: 100% !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
}

.row.wrapper {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
}

#book-appointment-wizard {
  max-width: 100% !important;
  width: 100% !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Only apply flex to VISIBLE wizard frames (not hidden ones) */
.wizard-frame:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.wizard-frame:not([style*="display: none"]):not([style*="display:none"]) .frame-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.wizard-frame .command-buttons {
  margin-top: auto !important;
  padding: 16px !important;
}

.wizard-frame .row.frame-content {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  #book-appointment-wizard { padding: 0 !important; }
  
  #header {
    padding: 12px !important;
    flex-direction: column !important;
  }
  
  #header #company-name {
    font-size: 1.1rem !important;
    text-align: center !important;
  }
  
  #header #steps {
    width: 180px !important;
    margin: 8px auto !important;
  }
  
  .wizard-frame { padding: 12px !important; }
  .frame-title { font-size: 1.2rem !important; }
  
  .frame-content .col-12,
  .frame-content .col-lg-6,
  .frame-content .col-lg-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  
  .command-buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .command-buttons .btn {
    width: 100% !important;
    margin: 0 !important;
  }
  
  #frame-footer { padding: 8px !important; }
}

@media (max-width: 480px) {
  #header #steps { width: 160px !important; }
  .book-step { margin-right: 8px !important; }
}

/* === THEME COLORS === */
.navbar.bg-primary, .bg-primary, #header.bg-primary {
  background-color: var(--ujg-brown) !important;
}

.btn-primary, .btn-dark {
  background-color: var(--ujg-teal) !important;
  border-color: var(--ujg-teal) !important;
  color: var(--ujg-brown) !important;
  font-weight: 600 !important;
}
.btn-primary:hover, .btn-dark:hover {
  background-color: #4bc0a3 !important;
  border-color: #4bc0a3 !important;
}

.btn-outline-secondary {
  border-color: var(--ujg-brown) !important;
  color: var(--ujg-brown) !important;
}
.btn-outline-secondary:hover {
  background-color: var(--ujg-brown) !important;
  color: #fff !important;
}

.book-step.active-step {
  background-color: var(--ujg-teal) !important;
}
.book-step.active-step strong {
  color: var(--ujg-brown) !important;
}

#book-appointment-wizard #header {
  background: linear-gradient(135deg, var(--ujg-brown) 0%, #5a4035 100%) !important;
}

.badge.bg-dark, .badge.bg-secondary {
  background-color: var(--ujg-brown) !important;
}

#footer, #frame-footer {
  background-color: var(--ujg-cream) !important;
  border-top-color: var(--ujg-teal) !important;
}
#footer a, #frame-footer a { color: var(--ujg-brown) !important; }

a { color: var(--ujg-brown); }
a:hover { color: var(--ujg-teal); }

::selection { background: var(--ujg-teal); color: var(--ujg-brown); }

.form-control:focus, .form-select:focus {
  border-color: var(--ujg-teal) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 211, 182, 0.25) !important;
}

.dropdown-item[href*="premium"] { display: none !important; }

/* === FOOTER PURGE === */
#frame-footer .footer-powered-by,
.footer-powered-by {
  display: none !important;
  visibility: hidden !important;
}

/* === MEETING TYPE SELECTOR === */
#ujg-meeting-type-wrapper {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(93, 211, 182, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(93, 211, 182, 0.2);
}

#ujg-meeting-type-wrapper label.ujg-type-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ujg-brown);
  margin-bottom: 10px;
  display: block;
}

#ujg-meeting-type-wrapper .ujg-type-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#ujg-meeting-type-wrapper .ujg-type-btn {
  flex: 1;
  min-width: 140px;
  padding: 14px 16px;
  border: 2px solid rgba(75, 53, 42, 0.15);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-size: 0.95rem;
  color: var(--ujg-brown);
}

#ujg-meeting-type-wrapper .ujg-type-btn:hover {
  border-color: var(--ujg-teal);
  background: rgba(93, 211, 182, 0.05);
}

#ujg-meeting-type-wrapper .ujg-type-btn.active {
  border-color: var(--ujg-teal);
  background: rgba(93, 211, 182, 0.12);
  font-weight: 600;
}

#ujg-meeting-type-wrapper .ujg-type-btn .ujg-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 4px;
}

#ujg-location-hint {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(75, 53, 42, 0.05);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--ujg-brown);
  border-left: 3px solid var(--ujg-teal);
  display: none;
}