/* OuiHeberg — Clean payment UI */

/* Hide WHMCS navigation */
#header, .header, .topbar, .navbar, .main-navbar-wrapper,
.master-breadcrumb, .sidebar, #footer, .footer,
#fullpage-overlay, .modal-localisation,
#frmGeneratePassword { display: none !important; }

body {
  background: #f8fafc !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #111827 !important;
}

/* ── OuiHeberg header ── */
.oh-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 16px 0; }
.oh-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.oh-header-logo img { height: 32px; }
.oh-header-secure { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #059669; font-weight: 600; }
.oh-header-secure svg { width: 14px; height: 14px; }

/* ── Layout: wide centered ── */
#main-body .container { max-width: 1200px !important; padding: 24px !important; }
#main-body .col-lg-4.col-xl-3 { display: none !important; }
#main-body .col-lg-8.col-xl-9,
#main-body .primary-content {
  width: 100% !important; max-width: 100% !important; flex: none !important;
  padding: 0 !important;
}

/* Payment page: 2 col layout */
.primary-content > .row {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 24px !important;
  align-items: start !important;
}

.primary-content > .row > [class*="col-"] {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ── Cards ── */
.card, .panel {
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  overflow: hidden;
  margin-bottom: 20px !important;
  background: #fff !important;
}

.card-body { padding: 28px !important; }

.card-header, .card-title {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #111827 !important;
  padding: 24px 28px 0 !important;
  margin-bottom: 20px !important;
  background: transparent !important;
  border: none !important;
}

/* ── Payment form: labels on top ── */
.cc-payment-form .form-group.row {
  display: block !important;
  margin-bottom: 20px !important;
}

.cc-payment-form .control-label,
.cc-payment-form .col-form-label,
.cc-payment-form [class*="col-sm-4"].text-md-right,
.cc-payment-form [class*="col-sm-4"].control-label {
  text-align: left !important;
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}

.cc-payment-form [class*="col-sm-8"],
.cc-payment-form [class*="col-sm-7"],
.cc-payment-form [class*="col-sm-6"],
.cc-payment-form [class*="col-sm-2"],
.cc-payment-form [class*="col-sm-4"]:not(.control-label):not(.text-md-right) {
  max-width: 100% !important;
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ── Form inputs ── */
.form-control,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
  background: #fff !important;
  width: 100% !important;
  height: auto !important;
}

.form-control:focus,
input:focus,
select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

/* ── Stripe Elements ── */
.StripeElement {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  transition: border-color 0.15s !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
}

.StripeElement--focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* ── Buttons ── */
.btn-primary, .btn-success,
#btnSubmit, .cc-payment-form button[type="submit"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 32px !important;
  box-shadow: none !important;
  color: #fff !important;
  transition: background 0.15s !important;
}

.btn-primary:hover, .btn-success:hover,
#btnSubmit:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

.btn-link { color: #2563eb !important; font-size: 12px !important; text-decoration: none !important; }
.btn-link:hover { color: #1d4ed8 !important; }

/* ── Radio/Checkbox ── */
.paymethod-info .icheck-button,
.paymethod-info label {
  font-size: 14px !important;
  color: #111827 !important;
  font-weight: 500 !important;
}

.cc-billing-address label {
  font-size: 13px !important;
  color: #374151 !important;
}

/* ── Invoice summary sidebar ── */
.primary-content > .row > [class*="col-md-5"] .card {
  position: sticky !important;
  top: 24px !important;
}

.primary-content > .row > [class*="col-md-5"] .card-title {
  text-align: center !important;
  font-size: 20px !important;
}

.primary-content .table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.primary-content .table td,
.primary-content .table th {
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.primary-content .table th {
  font-weight: 700 !important;
  color: #374151 !important;
  background: #f9fafb !important;
}

.primary-content .total-row {
  font-weight: 600 !important;
  background: #f9fafb !important;
}

.primary-content .alert-success {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 12px !important;
}

.primary-content .alert-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-radius: 10px !important;
  border: none !important;
}

/* Security notice */
#main-body ~ .alert,
#main-body .alert-warning:last-child,
.primary-content ~ .alert {
  border-radius: 12px !important;
  font-size: 12px !important;
  text-align: center !important;
  max-width: 1200px !important;
  margin: 0 auto 20px !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .primary-content > .row {
    grid-template-columns: 1fr !important;
  }
  #main-body .container {
    padding: 16px !important;
  }
}