/* =========================================
   Royl Brand Styles
   Load this AFTER Bootstrap
   ========================================= */

/* ------------------------------
   1. Brand tokens (CSS variables)
   ------------------------------ */
:root {
  --royl-primary:        #F5B301;
  --royl-primary-dark:   #D68E00;
  --royl-primary-soft:   #FFF4CF;
  --royl-accent:         #11C5C6;

  --royl-bg:             #05060B;
  --royl-surface:        #111320;
  --royl-surface-soft:   #181C2B;

  --royl-border-subtle:  #2B3040;

  --royl-text:           #F7F8FC;
  --royl-text-muted:     #A5ADC6;

  --royl-success:        #3AD29F;
  --royl-danger:         #FF3B56;
}

/* Optional: base dark background for entire app.
   If you only want dark in some areas, remove this and
   apply .bg-royl-app to specific wrappers instead. */
body {
  background-color: var(--royl-bg);
  color: var(--royl-text);
}

/* Utility wrapper if you don't want the whole site dark */
.bg-royl-app {
  background-color: var(--royl-bg);
  color: var(--royl-text);
}

/* ------------------------------
   2. Base typography
   ------------------------------ */

body,
.btn,
.form-control,
.navbar,
.card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* If/when Campana Script Bold is available as a webfont: */
/*
.royl-logo-wordmark {
  font-family: "Campana Script Bold", "Brush Script MT", cursive;
  letter-spacing: .04em;
}
*/

h1, h2, h3, h4, h5, h6 {
  color: var(--royl-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lead,
.text-muted {
  color: var(--royl-text-muted) !important;
}

/* Links */
a {
  color: var(--royl-accent);
}
a:hover,
a:focus {
  color: var(--royl-primary);
  text-decoration: none;
}

/* ------------------------------
   3. Navbar
   ------------------------------ */

.navbar-royl {
  /*background: radial-gradient(circle at top left,
    rgba(245, 179, 1, 0.18),
    transparent 55%
  ),
  #05060B; */
  background: var(--royl-surface-soft);
  border-bottom: 1px solid var(--royl-border-subtle);
}

.navbar-royl .navbar-brand {
  color: var(--royl-primary);
  font-weight: 700;
}

.navbar-royl .navbar-brand:hover {
  color: var(--royl-primary);
}

.navbar-royl .nav-link {
  color: var(--royl-text-muted);
  font-weight: 500;
}

.navbar-royl .nav-link.active,
.navbar-royl .nav-link.show,
.navbar-royl .nav-link:hover {
  color: var(--royl-text);
}

/* Toggler */
.navbar-royl .navbar-toggler {
  border-color: var(--royl-border-subtle);
}
.navbar-royl .navbar-toggler-icon {
  filter: invert(90%);
}

/* ------------------------------
   4. Buttons
   ------------------------------ */

.btn {
  text-transform: uppercase;
  font-size: 88%;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
}
/* Primary CTA */

.btn-primary {
  background: linear-gradient(135deg, var(--royl-primary), var(--royl-primary-dark));
  border-color: var(--royl-primary-dark);
  color: #111;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--royl-primary-dark), var(--royl-primary));
  border-color: var(--royl-primary-dark);
  color: #111;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4);
}

/* Secondary (dark pill with teal outline) */
.btn-secondary {
  background-color: transparent;
  border-radius: 999px;
  border: 1px solid var(--royl-accent);
  color: var(--royl-accent);
  font-weight: 500;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--royl-accent);
  border-color: var(--royl-accent);
  color: #0A101E;
}

/* Outline variant matching brand */
.btn-outline-primary {
  border-radius: 999px;
  border-color: var(--royl-primary);
  color: var(--royl-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--royl-primary-soft);
  color: #111320;
  border-color: var(--royl-primary-dark);
}

/* Destructive action */
.btn-danger {
  background-color: var(--royl-danger);
  border-color: var(--royl-danger);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #E32540;
  border-color: #E32540;
}

/* ------------------------------
   5. Cards & panels
   ------------------------------ */

.card {
  background-color: var(--royl-surface);
  border: 1px solid var(--royl-border-subtle);
  border-radius: 1rem;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
  color: var(--royl-text);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--royl-border-subtle);
  font-weight: 600;
}

.card-footer {
  border-top: 1px solid var(--royl-border-subtle);
  background-color: transparent;
}

/* A special card for hero tiles / featured rides */
.card-royl-featured {
  background: radial-gradient(circle at top right,
      rgba(17, 197, 198, 0.12),
      transparent 55%
    ),
    var(--royl-surface-soft);
  border-color: var(--royl-primary);
}

/* ------------------------------
   6. Forms
   ------------------------------ */

.form-label {
  font-weight: 500;
  color: var(--royl-text-muted);
}

.form-control,
.form-select {
  background-color: #121628;
  border-color: var(--royl-border-subtle);
  color: var(--royl-text);
  border-radius: 0.75rem;
}

.form-control::placeholder {
  color: #6C738C;
}

.form-control:focus,
.form-select:focus {
  background-color: #14182B;
  color: var(--royl-text);
  border-color: var(--royl-accent);
  box-shadow: 0 0 0 0.15rem rgba(17, 197, 198, 0.35);
}

/* Checkboxes / radios */
.form-check-input {
  background-color: #181C2B;
  border-color: var(--royl-border-subtle);
}

.form-check-input:checked {
  background-color: var(--royl-primary);
  border-color: var(--royl-primary-dark);
}

/* Input groups on dark */
.input-group-text {
  background-color: #181C2B;
  border-color: var(--royl-border-subtle);
  color: var(--royl-text-muted);
}

/* ------------------------------
   7. Alerts, badges, pills
   ------------------------------ */

.alert {
  border-radius: 0.75rem;
  border-width: 1px;
}

/* Brand-flavoured info for notices (e.g. flash) */
.alert-info,
.alert-primary {
  background-color: rgba(17, 197, 198, 0.08);
  border-color: var(--royl-accent);
  color: var(--royl-text);
}

.alert-success {
  background-color: rgba(58, 210, 159, 0.08);
  border-color: var(--royl-success);
  color: var(--royl-text);
}

.alert-danger,
.alert-warning {
  background-color: rgba(255, 59, 86, 0.07);
  border-color: var(--royl-danger);
  color: var(--royl-text);
}

/* Booking status badges etc. */
.badge-royl {
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.badge-royl-primary {
  background-color: var(--royl-primary-soft);
  color: #3D2C00;
}

.badge-royl-accent {
  background-color: rgba(17, 197, 198, 0.16);
  color: var(--royl-accent);
}

.badge-royl-dark {
  background-color: #05060B;
  color: var(--royl-text-muted);
}

/* ------------------------------
   8. Modals
   ------------------------------ */

.modal-content {
  background-color: var(--royl-surface-soft);
  border-radius: 1.25rem;
  border: 1px solid var(--royl-border-subtle);
}

.modal-header {
  border-bottom-color: var(--royl-border-subtle);
}

.modal-footer {
  border-top-color: var(--royl-border-subtle);
}

/* Optional: full-screen dark backdrop tint */
.modal-backdrop.show {
  opacity: 0.85;
}

/* ------------------------------
   9. Layout helpers / sections
   ------------------------------ */

.royl-section {
  padding: 3rem 0;
}

.royl-section-light {
  background: #F7F8FC;
  color: #101321;
}

.royl-section-dark {
  background: radial-gradient(circle at top left,
      rgba(245, 179, 1, 0.06),
      transparent 60%
    ),
    #05060B;
  color: var(--royl-text);
}

/* Hero strip, e.g. top of home page */
.royl-hero {
  background: radial-gradient(circle at top right,
      rgba(17, 197, 198, 0.10),
      transparent 55%
    ),
    linear-gradient(135deg, #05060B, #111320 65%);
  color: var(--royl-text);
  padding: 4rem 0 5rem;
}

.royl-hero .display-1,
.royl-hero .display-2,
.royl-hero .display-3 {
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Subtle divider line */
.royl-divider {
  border-top: 1px solid var(--royl-border-subtle);
  margin: 2rem 0;
}

/* ------------------------------
   10. Tables (for admin & bookings)
   ------------------------------ */

.table {
  color: var(--royl-text);
}

.table thead th {
  border-bottom-color: var(--royl-border-subtle);
  color: var(--royl-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
}

.table tbody tr {
  border-color: var(--royl-border-subtle);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.01);
}

/* ------------------------------
   11. Small bits
   ------------------------------ */

/* Muted label for tiny helper text */
.royl-helper-text {
  font-size: 0.8rem;
  color: var(--royl-text-muted);
}

/* Price styling (e.g. total on booking form) */
.royl-price {
  font-weight: 700;
  font-size: 1.5rem;
}

.royl-price .currency {
  opacity: 0.85;
  font-size: 0.9em;
}

/* Pill-style chips, e.g. tags for accessory types */
.royl-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  border: 1px solid var(--royl-border-subtle);
  color: var(--royl-text-muted);
}
.royl-chip--highlight {
  border-color: var(--royl-primary);
  color: var(--royl-primary);
}