/* BLACK CRUISE 10TH ANNIVERSARY - RWD CSS
   Premium Black culture / music cruise theme.
   Inspired by supplied artwork:
   hip-hop, R&B, Afrobeats, Caribbean music, nightlife, celebration, and luxury cruise energy.

   Palette:
   deep black, royal purple, magenta, sunset orange, gold, warm white.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@500;600;700&display=swap');

:root {
  --bc-black: #070509;
  --bc-charcoal: #141018;
  --bc-deep-purple: #2b0f48;
  --bc-purple: #6726a6;
  --bc-magenta: #c21892;
  --bc-orange: #f26722;
  --bc-orange-dark: #c94b12;
  --bc-gold: #f5b642;
  --bc-cream: #fff4df;
  --bc-white: #ffffff;
  --bc-ink: #151019;
  --bc-muted: #6a6170;
  --bc-border: rgba(245,182,66,.28);
}

/* Base */
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(194,24,146,.32), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(242,103,34,.35), transparent 34%),
    linear-gradient(135deg, #070509 0%, #2b0f48 42%, #141018 100%);
  color: var(--bc-ink);
  font-family: "Montserrat", Arial, sans-serif;
  line-height: 1.6;
}

/* Main reservation content */
.container,
#content-wrapper {
  background: rgba(255,255,255,.96);
  color: var(--bc-ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
}

/* Header image area */
.headerRezbanner {
  background-image: url("images/black-cruise-header.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: var(--bc-black);
  border-bottom: 4px solid var(--bc-orange);
}

#main-header {
  background: var(--bc-black);
}

/* Navigation */
.dropdown-menu,
.navbar-inverse,
.navbar-inverse .container,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
.navbar-inverse .navbar-brand {
  background-color: var(--bc-black);
  color: var(--bc-white) !important;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.navbar-inverse {
  border-top: 4px solid var(--bc-orange);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
  background-color: rgba(194,24,146,.20);
  color: var(--bc-gold) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
li#tripname {
  color: var(--bc-black) !important;
  font-family: "Oswald", "Montserrat", Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

h1,
li#tripname {
  font-size: 3rem;
  line-height: 1.08;
}

/* Category / section headers */
.cat-header h3,
.rez-content h2,
.rez-content h3 {
  color: var(--bc-deep-purple) !important;
}

.rez-content h2,
.rez-content h3 {
  border-bottom: 3px solid rgba(242,103,34,.35);
  padding-bottom: 8px;
}

/* Progress bar */
.rez-progress-bar {
  border-bottom: 3px solid var(--bc-orange);
  padding-bottom: 8px;
}

.rez-progress-bar li {
  color: var(--bc-black);
  font-weight: 800;
}

.rez-progress-bar li:after {
  content: '\00a0\00a0 \25b6';
  color: var(--bc-magenta);
  font-size: 10px;
}

/* Summary / trip info */
#rez-summary-list,
.account-status,
.rez-start-over {
  color: var(--bc-black);
  text-align: center;
}

li#tripvenue,
li#tripdates {
  color: var(--bc-muted) !important;
}

/* Links */
a {
  color: var(--bc-purple);
  font-weight: 700;
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--bc-orange);
  text-decoration: none;
}

/* Primary buttons */
a.btn,
button,
input[type="submit"],
input[type="button"],
.party-count-btn,
#account-status-link {
  background: linear-gradient(180deg, var(--bc-orange) 0%, var(--bc-orange-dark) 100%);
  border: 1px solid var(--bc-orange-dark);
  border-radius: 999px;
  color: var(--bc-white) !important;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 900;
  padding: 11px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 18px rgba(242,103,34,.28);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}

a.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.party-count-btn:hover,
#account-status-link:hover {
  background: linear-gradient(180deg, #ff7a2f 0%, var(--bc-orange) 100%);
  color: var(--bc-white) !important;
  transform: translateY(-1px);
}

/* Guest count / selection buttons */
.party-count-btn {
  background: linear-gradient(180deg, var(--bc-purple) 0%, var(--bc-deep-purple) 100%) !important;
  border-color: var(--bc-deep-purple) !important;
  box-shadow: 0 8px 18px rgba(103,38,166,.25) !important;
}

.party-count-btn:hover {
  background: linear-gradient(180deg, var(--bc-magenta) 0%, var(--bc-purple) 100%) !important;
}

/* Tables / pricing */
table {
  background: var(--bc-white);
  border-collapse: collapse;
  border: 1px solid var(--bc-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

th {
  background: linear-gradient(180deg, var(--bc-deep-purple), var(--bc-black));
  color: var(--bc-white);
  font-weight: 900;
  padding: 12px;
  text-transform: uppercase;
}

td {
  color: var(--bc-ink);
  padding: 12px;
  border-bottom: 1px solid rgba(20,16,24,.10);
}

tr:nth-child(even) td {
  background: rgba(245,182,66,.10);
}

tr:hover td {
  background: rgba(194,24,146,.10);
}

/* Cards / panels */
.panel,
.card,
.well,
.modal-content,
.rez-summary {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(103,38,166,.18);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Forms */
label,
.control-label,
legend {
  color: var(--bc-black);
  font-weight: 800;
}

legend {
  color: var(--bc-deep-purple);
  text-transform: uppercase;
  letter-spacing: .03em;
}

input,
select,
textarea {
  background: var(--bc-white);
  color: var(--bc-ink);
  border: 1px solid rgba(43,15,72,.25);
  border-radius: 8px;
  padding: 9px 11px;
  font-family: "Montserrat", Arial, sans-serif;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bc-magenta);
  box-shadow: 0 0 0 3px rgba(194,24,146,.16);
  outline: none;
}

/* Text */
p,
ul,
li {
  color: var(--bc-ink);
}

hr,
.rez-content hr {
  border-top: 1px solid rgba(43,15,72,.18);
}

/* Price / total emphasis */
.price,
.total,
.amount,
.balance {
  color: var(--bc-orange-dark);
  font-weight: 900;
}

/* Optional culture/music accent block */
.black-cruise-accent,
.notice,
.alert-info {
  background: linear-gradient(135deg, rgba(43,15,72,.95), rgba(194,24,146,.88));
  color: var(--bc-white);
  border-left: 5px solid var(--bc-gold);
}

.black-cruise-accent *,
.notice *,
.alert-info * {
  color: var(--bc-white) !important;
}

/* Footer */
#main-footer {
  background: var(--bc-black);
  color: var(--bc-white);
  border-top: 4px solid var(--bc-orange);
}

#main-footer,
#main-footer span,
#main-footer a {
  color: var(--bc-white) !important;
}

.copyrightStyle {
  background: var(--bc-black);
  color: var(--bc-white);
}

/* Hide RezMagic contact */
#rezmagic-contact {
  display: none;
}

/* Mobile optimization */
@media (max-width: 767px) {
  body {
    background:
      linear-gradient(180deg, var(--bc-black) 0%, var(--bc-deep-purple) 100%);
  }

  .container,
  #content-wrapper {
    background: rgba(255,255,255,.97);
    box-shadow: none;
  }

  h1,
  li#tripname {
    font-size: 2.15rem;
    line-height: 1.12;
  }

  h2 {
    font-size: 1.65rem;
  }

  a.btn,
  button,
  input[type="submit"],
  input[type="button"],
  .party-count-btn,
  #account-status-link {
    display: inline-block;
    margin: 6px 4px;
    padding: 10px 16px;
    font-size: 14px;
    white-space: normal;
  }

  .panel,
  .card,
  .well,
  .modal-content,
  .rez-summary {
    border-radius: 9px;
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    font-size: 13px;
  }

  td,
  th {
    padding: 9px;
  }
}