/* TRC V1 - THE REGGAETON CRUISE
   Based on VYBZ2 RezMagic responsive CSS.
   Palette: hot pink #f30284, gold #f7c102, turquoise #39bbc9, black #16080b.
   Event banner is managed separately.
*/

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

:root {
  --vybz-black: #16080b;
  --vybz-charcoal: #241017;
  --vybz-deep-teal: #280c20;
  --vybz-teal: #39bbc9;
  --vybz-teal-soft: #e9f9fa;

  --vybz-cream: #ffffff;
  --vybz-white: #ffffff;

  --vybz-orange: #f30284;
  --vybz-coral: #f7c102;
  --vybz-yellow: #f7c102;

  --vybz-ink: #16080b;
  --vybz-muted: #66545d;
  --vybz-border: rgba(57,187,201,.25);
}

/* Base */
body {
  background:
    radial-gradient(circle at 25% 5%, rgba(57,187,201,.18), transparent 32%),
    linear-gradient(180deg, #16080b 0%, #280c20 52%, #16080b 100%);
  color: var(--vybz-cream);
  font-family: "Montserrat", Arial, sans-serif;
  line-height: 1.6;
}

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

/* Navbar */
.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(--vybz-black);
  color: var(--vybz-cream) !important;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.navbar-inverse {
  border-top: 4px solid var(--vybz-orange);
  border-bottom: 1px solid rgba(57,187,201,.35);
}

.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(57,187,201,.12);
  color: var(--vybz-teal) !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6,
li#tripname {
  color: var(--vybz-black) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 900;
  letter-spacing: -.025em;
}

h1,
li#tripname {
  text-transform: uppercase;
}

/* Optional display title styling */
.vybz-display-title {
  color: var(--vybz-cream);
  font-size: clamp(42px, 7vw, 110px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.05em;
}

.vybz-gradient-text {
  background: linear-gradient(90deg, var(--vybz-orange), var(--vybz-coral));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

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

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

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

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

/* Links */
a {
  color: var(--vybz-deep-teal);
  font-weight: 700;
  text-decoration: none;
}

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

/* Buttons */
a.btn,
button,
input[type="submit"],
input[type="button"],
.party-count-btn,
#account-status-link {
  background: linear-gradient(90deg, var(--vybz-orange), var(--vybz-coral));
  border: 1px solid var(--vybz-orange);
  border-radius: 999px;
  color: #ffffff !important;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 900;
  padding: 11px 26px;
  box-shadow: 0 8px 20px rgba(243,2,132,.28);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}

a.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.party-count-btn:hover,
#account-status-link:hover {
  background: linear-gradient(90deg, var(--vybz-coral), var(--vybz-orange));
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Selection buttons / guest counts */
.party-count-btn {
  background: linear-gradient(180deg, var(--vybz-teal), #218b99);
  border-color: #218b99;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(57,187,201,.22);
}

.party-count-btn:hover {
  background: #218b99;
}

/* Tables / pricing grids */
table {
  background: var(--vybz-white);
  border-collapse: collapse;
  border: 1px solid var(--vybz-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

th {
  background: var(--vybz-black);
  color: var(--vybz-cream);
  font-weight: 900;
  padding: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

td {
  color: var(--vybz-ink);
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

tr:nth-child(even) td {
  background: rgba(57,187,201,.08);
}

tr:hover td {
  background: rgba(243,2,132,.12);
}

/* Cards / panels */
.panel,
.card,
.well,
.modal-content,
.rez-summary {
  background: #ffffff;
  border: 1px solid rgba(57,187,201,.22);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Category headers */
.cat-header h3,
.rez-content h2,
.rez-content h3 {
  color: var(--vybz-black) !important;
}

.rez-content h2,
.rez-content h3 {
  border-bottom: 3px solid rgba(57,187,201,.22);
  padding-bottom: 7px;
}

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

input,
select,
textarea {
  background: #ffffff;
  color: var(--vybz-ink);
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 8px;
  padding: 9px 11px;
  font-family: "Montserrat", Arial, sans-serif;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--vybz-teal);
  box-shadow: 0 0 0 3px rgba(57,187,201,.18);
  outline: none;
}

/* Content text */
p,
ul,
li {
  color: var(--vybz-ink);
}

hr,
.rez-content hr {
  border-top: 1px solid var(--vybz-border);
}

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

/* Footer */
#main-footer {
  background: var(--vybz-black);
  color: var(--vybz-cream);
  border-top: 4px solid var(--vybz-teal);
}

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

.copyrightStyle {
  background: var(--vybz-black);
  color: var(--vybz-cream);
}

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

/* Mobile */
@media (max-width: 767px) {
  h1,
  li#tripname {
    font-size: 2.1rem;
  }

  a.btn,
  button,
  input[type="submit"],
  input[type="button"],
  .party-count-btn,
  #account-status-link {
    margin: 6px;
    padding: 10px 16px;
  }
}


/* =========================================================
   FINAL OVERRIDE: Guest Count Buttons Only
   Changes the "1 Guest / 2 Guests / 3 Guests..." buttons
   from aqua/teal to the brighter tropical ISLAND blue.
   All other buttons remain orange/coral.
========================================================= */

.party-count-btn,
a.party-count-btn,
button.party-count-btn,
input.party-count-btn,
#content-wrapper .party-count-btn,
.rez-content .party-count-btn,
.rez-actions .party-count-btn,
#rez-greeting .party-count-btn {
    background: linear-gradient(180deg, #69d8e2 0%, #39bbc9 100%) !important;
    background-color: #39bbc9 !important;
    border: 1px solid #238c9b !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(57,187,201,.28) !important;
}

.party-count-btn:hover,
a.party-count-btn:hover,
button.party-count-btn:hover,
input.party-count-btn:hover,
#content-wrapper .party-count-btn:hover,
.rez-content .party-count-btn:hover,
.rez-actions .party-count-btn:hover,
#rez-greeting .party-count-btn:hover {
    background: linear-gradient(180deg, #86e4ec 0%, #2aa5b4 100%) !important;
    background-color: #2aa5b4 !important;
    border-color: #1b7f8e !important;
    color: #ffffff !important;
}


/* =========================================================
   TRCV1 - REGGAETON BRAND ACCENTS
   Pink primary actions, turquoise guest selection, gold accents.
   ========================================================= */
:root {
  --trc-pink: #f30284;
  --trc-gold: #f7c102;
  --trc-turquoise: #39bbc9;
  --trc-black: #16080b;
}

/* Keep primary action text legible against hot pink. */
a.btn, button, input[type="submit"], input[type="button"] {
  color: #ffffff !important;
}

/* Gold details echo the event artwork without dominating the page. */
.navbar-inverse { border-top-color: var(--trc-gold); }
.rez-progress-bar li:after { color: var(--trc-pink); }
#main-footer { border-top-color: var(--trc-gold); }

/* Keep category pricing legible at the same scale as its label. */
.cat-price {
  font-size: 1.15em !important;
  font-weight: 800 !important;
  color: var(--trc-black) !important;
  line-height: 1.35 !important;
}
.cat-price label, .cat-price b, .cat-price strong,
.cat-price span, .cat-price small, .cat-price sup {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* Reservation summary trip name is informational, not a display title. */
#rez-summary-list li#tripname, .rez-summary li#tripname, li#tripname {
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}

/* RezMagic event-level wrapper: do not style the wrapper as a button. */
div#account-status-link.rez-start,
div#account-status-link,
#content-wrapper div#account-status-link {
  display: inline-block !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px 0 0 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1 !important;
  text-align: left !important;
  vertical-align: top !important;
}

/* Apply button styling only to the real anchor. */
div#account-status-link.rez-start > a.btn.account-status,
div#account-status-link > a.btn.account-status,
.rez-start > a.btn.account-status,
a.btn.account-status {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 145px !important;
  max-width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 11px 26px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-align: center !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--trc-pink), #d90074) !important;
  border: 1px solid var(--trc-pink) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(243,2,132,.28) !important;
}
div#account-status-link > a.btn.account-status:hover,
div#account-status-link > a.btn.account-status:focus,
.rez-start > a.btn.account-status:hover,
.rez-start > a.btn.account-status:focus,
a.btn.account-status:hover, a.btn.account-status:focus {
  background: #bd0065 !important;
  border-color: #bd0065 !important;
  color: #ffffff !important;
}

@media (max-width: 767px) {
  #rez-summary-list li#tripname, .rez-summary li#tripname, li#tripname {
    font-size: 1.2rem !important;
  }
  .cat-price { font-size: 1.05em !important; }
  div#account-status-link.rez-start,
  div#account-status-link { margin: 12px 0 0 0 !important; }
  div#account-status-link > a.btn.account-status,
  .rez-start > a.btn.account-status,
  a.btn.account-status {
    min-width: 130px !important;
    max-width: 220px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}