/**
 * Membership Pro - Dark Theme for Cassiopeia-Dark
 * Matches the Amigo KI retro aesthetic
 */

/* === Container === */
.osm-container,
.osm-container * {
  color: #d0d0d0;
}

.osm-container {
  background: transparent !important;
  font-family: 'Courier New', monospace !important;
}

/* === Plan Cards === */
.osm-item-wrapper {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(247, 164, 27, 0.2) !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.osm-item-wrapper:hover {
  border-color: rgba(247, 164, 27, 0.5) !important;
  box-shadow: 0 4px 24px rgba(247, 164, 27, 0.1) !important;
}

/* === Plan Title Bar === */
.osm-item-heading-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
  margin: 0 !important;
}

.osm-item-title,
.osm-item-title a {
  color: #f7a41b !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  font-family: 'Courier New', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* === Plan Description Area — TRANSPARENT background, WHITE text === */
.osm-item-description {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
}

.osm-item-description .row {
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 !important;
}

.osm-item-description .row > div {
  background: transparent !important;
  background-color: transparent !important;
}

.osm-description-details {
  padding: 20px !important;
  background: transparent !important;
  background-color: transparent !important;
}

.osm-description-details,
.osm-description-details p,
.osm-description-details span,
.osm-description-details div {
  color: #e0e0e0 !important;
  font-size: 0.95rem !important;
}

/* === Properties Table — NO BROWN, full transparent === */
.osm-container table,
.osm-container .table,
.osm-container .table-striped,
.osm-container .table-bordered,
.osm-container .col-md-5 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  color: #d0d0d0 !important;
  margin: 8px 0 !important;
}

.osm-container table thead,
.osm-container table tbody,
.osm-container table tr,
.osm-container .table > :not(caption) > * {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-bg-type: transparent !important;
}

.osm-container .table-striped > tbody > tr:nth-of-type(odd) > *,
.osm-container .table-striped > tbody > tr:nth-of-type(even) > *,
.osm-container .table-striped > tbody > tr > td,
.osm-container .table-striped > tbody > tr > th,
.osm-container .table > tbody > tr > td,
.osm-container .table > tbody > tr > th,
.osm-container table td,
.osm-container table th,
.osm-container .table > :not(caption) > * > * {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #d0d0d0 !important;
  padding: 10px 16px !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-bg-type: transparent !important;
  --bs-table-color-type: transparent !important;
  box-shadow: none !important;
}

.osm-plan-property-label,
.osm-container td.osm-plan-property-label {
  color: #888 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.osm-plan-property-value,
.osm-container td.osm-plan-property-value {
  color: #f7a41b !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

/* === Taskbar / Buttons — TRANSPARENT background === */
.osm-taskbar {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 20px !important;
}

.osm-taskbar ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.osm-taskbar li {
  list-style: none !important;
}

.osm-taskbar .btn-primary,
.osm-taskbar a.btn-primary {
  background: linear-gradient(135deg, #f7a41b, #ff6b35) !important;
  border: none !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 10px 24px !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.osm-taskbar .btn-primary:hover,
.osm-taskbar a.btn-primary:hover {
  background: linear-gradient(135deg, #ff6b35, #f7a41b) !important;
  box-shadow: 0 4px 16px rgba(247, 164, 27, 0.35) !important;
  transform: translateY(-1px) !important;
}

.osm-taskbar .btn-secondary,
.osm-taskbar a.btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #999 !important;
  font-size: 0.85rem !important;
  padding: 10px 24px !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.osm-taskbar .btn-secondary:hover,
.osm-taskbar a.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(68, 170, 255, 0.4) !important;
  color: #44aaff !important;
}

/* === Page Heading === */
.osm-container h1,
.osm-page-heading,
#osm-plans-list-default > h1 {
  color: #f7a41b !important;
  font-family: 'Courier New', monospace !important;
  font-size: 1.5rem !important;
  border-bottom: 1px solid rgba(247, 164, 27, 0.25) !important;
  padding-bottom: 8px !important;
  margin-bottom: 24px !important;
}

/* === Registration Form === */
.osm-container form,
.osm-container .osm-form-container {
  background: transparent !important;
  color: #d0d0d0 !important;
}

.osm-container .control-group,
.osm-container .mb-3 {
  margin-bottom: 16px !important;
}

.osm-container .control-label,
.osm-container label {
  color: #bbb !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.osm-container input[type="text"],
.osm-container input[type="email"],
.osm-container input[type="password"],
.osm-container input[type="tel"],
.osm-container input[type="number"],
.osm-container textarea,
.osm-container select,
.osm-container .form-control,
.osm-container .form-select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.osm-container input:focus,
.osm-container textarea:focus,
.osm-container select:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(247, 164, 27, 0.5) !important;
  box-shadow: 0 0 10px rgba(247, 164, 27, 0.12) !important;
  outline: none !important;
}

/* === Payment Methods === */
.osm-container .payment-methods,
.osm-container #payment_information,
.osm-container .osm-payment-information {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

.osm-container input[type="radio"] {
  accent-color: #f7a41b !important;
}

/* === Alerts === */
.osm-container .alert-success,
.osm-container .alert-info {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
  border-radius: 8px !important;
}

.osm-container .alert-warning {
  background: rgba(247, 164, 27, 0.1) !important;
  border: 1px solid rgba(247, 164, 27, 0.3) !important;
  color: #f7a41b !important;
}

.osm-container .alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* === Misc overrides === */
.osm-container a {
  color: #44aaff !important;
  text-decoration: none !important;
}

.osm-container a:hover {
  color: #66bbff !important;
}

.osm-container .checkbox label,
.osm-container .form-check-label {
  color: #999 !important;
}

/* === Responsive === */
@media (max-width: 768px) {
  .osm-item-title {
    font-size: 1.1rem !important;
  }
  .osm-taskbar ul {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .osm-taskbar .btn-primary,
  .osm-taskbar .btn-secondary {
    width: 100% !important;
    text-align: center !important;
  }
}