/* ============================================
   ACCOUNT AREA (Premium UI)
   ============================================ */

:root {
  --account-primary: #0e1534;
  --account-primary-light: #1a2850;
  --account-accent: #AB801C;
  --account-accent-dark: #8a6616;
  --account-muted: #6b7280;
  --account-bg: #f6f8fc;
  --account-border: #e5e7eb;
  --account-radius: 16px;
  --account-shadow: 0 14px 34px rgba(14, 21, 52, 0.08);
}

.account-page {
  background: radial-gradient(1200px 420px at 0% -12%, rgba(171, 128, 28, 0.12), transparent 60%), var(--account-bg);
}

.account-hero,
.account-page .hero_in,
.account-page .bg-primary {
  background: linear-gradient(135deg, var(--account-primary) 0%, var(--account-primary-light) 100%) !important;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-hero h1,
.account-page .hero_in h1,
.account-page .bg-primary h1 {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.account-page .breadcrumb {
  margin-bottom: 0;
}

.account-page .breadcrumb-item a,
.account-page .breadcrumb-item.active,
.account-page .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.92) !important;
}

.account-page .card {
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius);
  box-shadow: var(--account-shadow);
  overflow: hidden;
}

.account-page .card .card {
  box-shadow: none;
}

.account-page .logintab.card,
.account-page .contacts-layer__box,
.account-page #tab-bookings,
.account-page #tab-profile {
  background: #fff;
  border-radius: var(--account-radius);
}

.account-page .logintab .nav-pills,
.account-page .nav-tabs {
  gap: 0.4rem;
  padding-bottom: 0.45rem;
}

.account-page .logintab .nav-pills .nav-link,
.account-page .nav-tabs .nav-link {
  border: 0;
  border-radius: 10px;
  color: var(--account-primary);
  font-weight: 600;
  padding: 0.58rem 0.85rem;
  transition: all 0.2s ease;
}

.account-page .logintab .nav-pills .nav-link:hover,
.account-page .nav-tabs .nav-link:hover {
  background: rgba(14, 21, 52, 0.06);
}

.account-page .logintab .nav-pills .nav-link.active,
.account-page .nav-tabs .nav-link.active {
  background: rgba(14, 21, 52, 0.1);
  color: var(--account-primary);
  border-bottom: 2px solid var(--account-accent);
}

.account-page .btn-primary,
.account-page .btn-secondary {
  background: linear-gradient(135deg, var(--account-primary) 0%, var(--account-primary-light) 100%);
  border-color: var(--account-primary);
  border-radius: 10px;
  font-weight: 600;
}

.account-page .btn-primary:hover,
.account-page .btn-secondary:hover {
  background: linear-gradient(135deg, #111b44 0%, #26386e 100%);
  border-color: #111b44;
}

.account-page .btn-danger {
  border-radius: 10px;
}

.account-page .form-control,
.account-page .form-select,
.account-page .input-group-text {
  border-radius: 10px;
  border: 1px solid #d7dce3;
  min-height: 46px;
}

.account-page .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.account-page .input-group .input-group-text {
  border-left: 0;
  background: #f8fafc;
}

.account-page textarea.form-control {
  min-height: 100px;
}

.account-page .form-control:focus,
.account-page .form-select:focus {
  border-color: var(--account-primary);
  box-shadow: 0 0 0 3px rgba(14, 21, 52, 0.12);
}

.account-page .table {
  border-color: var(--account-border);
  border-radius: 12px;
  overflow: hidden;
}

.account-page .table thead th {
  background: #f3f6fb;
  color: #1f2937;
  font-weight: 600;
  border-bottom: 1px solid #dbe3ee;
}

.account-page .table tbody tr:hover {
  background: #fafcff;
}

.account-page .badge.text-bg-info {
  background: rgba(14, 21, 52, 0.12) !important;
  color: var(--account-primary) !important;
}

.account-page .line-v3 {
  border-bottom: 2px solid var(--account-accent);
  width: 56px;
}

.account-page .alert {
  border-radius: 12px;
  border-width: 1px;
}

.account-page .btn-action {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.account-page .btn-action a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce3ec;
  background: #fff;
}

.account-page .btn-action a:hover {
  border-color: var(--account-accent);
  color: var(--account-accent-dark) !important;
}

.account-page .pagination .page-link {
  border-radius: 8px;
  margin: 0 2px;
  color: var(--account-primary);
}

.account-page .pagination .page-item.active .page-link,
.account-page .pagination .page-link:hover {
  background: var(--account-primary);
  border-color: var(--account-primary);
  color: #fff;
}

@media (max-width: 767.98px) {
  .account-page .hero_in,
  .account-page .account-hero,
  .account-page .bg-primary {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .account-page .nav-tabs .nav-link,
  .account-page .logintab .nav-pills .nav-link {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    margin-right: 0.35rem;
  }

  .account-page .card {
    border-radius: 12px;
  }
}