/* =====================================================
   PARTYTYME.NET — DARK MODE
===================================================== */

:root { color-scheme: dark; }

/* ---------- Base ---------- */
html, body {
  background: #181c24 !important;
  color: #e7e9ee !important;
  font-family: verdana;
}

p { color: #cfd3dd !important; }

/* ---------- Main Shell ---------- */
.wrapper {
  background: rgba(28, 33, 45, 0.94) !important;
  border-left-color: #5E47A3 !important;
  border-right-color: #5E47A3 !important;
}

.content_container { background: #212838 !important; }


/* =====================================================
   NAV BAR — CLEAN SINGLE SOURCE OF TRUTH (NO TRANSPARENT)
   - Buttons are light grey w/ black text
   - Hover is slightly darker grey
   - Inner spans/divs INHERIT background (NO transparent wipeout)
===================================================== */

/* keep bar itself dark (your original intent) */
.main_navigation {
  background: #1f2635 !important;
  border-top: 1px solid #3a445c !important;
  border-bottom: 1px solid #3a445c !important;
}

/* button base */
.main_navigation a,
.main_navigation li a,
.main_navigation > a {
  background-color: #e6ebf5 !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* hover */
.main_navigation a:hover,
.main_navigation li:hover > a,
.main_navigation > a:hover {
  background-color: #d6deef !important;
  background-image: none !important;
  color: #111111 !important;
}

/* active/focus/visited never go dark */
.main_navigation a:active,
.main_navigation a:focus,
.main_navigation a:visited,
.main_navigation li a:active,
.main_navigation li a:focus,
.main_navigation li a:visited,
.main_navigation li.active > a,
.main_navigation li.current > a,
.main_navigation li.selected > a {
  background-color: #d6deef !important;
  background-image: none !important;
  color: #111111 !important;
  outline: none !important;
}

/* CRITICAL: inner spans/divs must NOT be transparent */
.main_navigation a span:not(.ui-icon),
.main_navigation a div:not(.ui-icon),
.main_navigation li a span:not(.ui-icon),
.main_navigation li a div:not(.ui-icon) {
  background-color: inherit !important;
  background-image: none !important;
  color: inherit !important;
}

/* keep any inner text black */
.main_navigation a *,
.main_navigation li a * {
  color: #111111 !important;
}

/* kill overlay pseudo-elements if theme uses them */
.main_navigation a::before,
.main_navigation a::after,
.main_navigation li::before,
.main_navigation li::after {
  content: none !important;
  background: none !important;
}

/* icons black on light buttons */
.main_navigation a img,
.main_navigation a i,
.main_navigation a .icon {
  filter: brightness(0) saturate(100%) !important;
  color: #111111 !important;
}


/* ---------- Section Headers ---------- */
.box_title, .box_title_large {
  background: #2a6aa7 !important;
  border-top: 1px solid #3c7fc2 !important;
  border-bottom: 1px solid #17476e !important;
  color: #ffffff !important;
  letter-spacing: 2px;
}

/* ---------- Panels / Sidebar ---------- */
.round_box,
.cart_disc_container,
.promocontainer,
#shopping_cart_container,
#shopping_cart_container .round_box {
  background: #242b3a !important;
  border-color: #3a445c !important;
}
.round_box * , .cart_disc_container * { color: #e7e9ee !important; }

/* Right sidebar “grey” text -> white */
.cart_prices_column,
.cart_header_column,
.cart_song_title,
.cart_song_artist {
  color: #ffffff !important;
}

/* ---------- Song rows (good zebra) ---------- */
.song_row_odd,
.song_table .song_row_odd,
div.song_row_odd {
  background: #2f374c !important;
}
.song_row_even,
.song_table .song_row_even,
div.song_row_even {
  background: #252c3c !important;
}
.song_row:hover,
.song_row_odd:hover,
.song_row_even:hover,
.song_table .song_row:hover {
  background: #37415a !important;
}

/* Song title: slightly thicker */
.song_row_song_title {
  color: #f6f7fb !important;
  font-weight: 600 !important;
}

/* Softer magenta links */
a, .song_title_text_link { color: #d96acb !important; }
a:hover, .song_title_text_link:hover { color: #e28bd8 !important; text-decoration: underline; }

/* Meta lines readable */
.song_row_artist, .artist_text_link { color: #d7dbe6 !important; }
.song_row_outputname, .song_row_track_time { color: #c9cfdd !important; }

/* HD badge */
.song_row_hd_text {
  background: #ffb505 !important;
  color: #2b1a00 !important;
}

/* ---------- Inputs (keep dark) ---------- */
input, select, textarea,
.input_field, .input_field_userform, .add_select, .OrderingField {
  background: #1e2433 !important;
  color: #f0f2f7 !important;
  border: 1px solid #3a445c !important;
}

/* ---------- Light buttons with BLACK text (GO/pagination/sample) ---------- */
.ui-button,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.song_row_button,
button.song_row_button,
a.song_row_button {
  background: #e6ebf5 !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
  box-shadow: none !important;
}
.ui-button:hover,
.ui-state-default:hover,
.song_row_button:hover {
  background: #d6deef !important;
  color: #111111 !important;
}
.ui-button *, .ui-state-default *, .song_row_button * {
  color: #111111 !important;
}

/* =====================================================
   BUY AREA (FIX THE “CRAP”)
===================================================== */

.song_row_buttons {
  min-width: 175px !important;
  white-space: nowrap !important;
}

.song_row_buttons .ui-selectmenu-button,
.song_row_buttons select {
  width: 160px !important;
  min-width: 160px !important;
}

.song_row_buttons .ui-selectmenu-button {
  background: #e6ebf5 !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
}
.song_row_buttons .ui-selectmenu-button * { color: #111111 !important; }

.song_row_buttons .ui-button,
.song_row_buttons button,
.song_row_buttons input[type="button"],
.song_row_buttons input[type="submit"],
.song_row_buttons a {
  width: 160px !important;
  min-width: 160px !important;
  background: #b85aa9 !important;
  color: #ffffff !important;
  border: 1px solid #6b2b62 !important;
  font-weight: 700 !important;
  font-size: 112% !important;
  padding: 5px 0 !important;
  line-height: 1.05 !important;
}

.song_row_buttons .ui-button:hover,
.song_row_buttons button:hover,
.song_row_buttons input[type="button"]:hover,
.song_row_buttons input[type="submit"]:hover,
.song_row_buttons a:hover {
  background: #c876ba !important;
}

/* ---------- Popups (dropdown list) MUST be white/black ---------- */
.ui-widget-content,
.ui-dialog,
.ui-menu,
.ui-selectmenu-menu,
.ui-selectmenu-open,
.ui-autocomplete,
.fancybox-skin,
.black-on-white .jquery-msg-content {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #333 !important;
}
.ui-widget-content *,
.ui-dialog *,
.ui-menu *,
.ui-selectmenu-menu *,
.ui-autocomplete *,
.fancybox-skin * {
  color: #111111 !important;
}
.ui-widget-content a { color: #0b57d0 !important; }

/* =====================================================
   LAST OVERRIDE PACK (CORRECTED)
===================================================== */

.round_box {
  border: 2px solid #2a6aa7 !important;
  box-shadow: none !important;
}

.round_box input:focus,
.round_box select:focus,
.round_box textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #2a6aa7 !important;
  border-color: #2a6aa7 !important;
}

.fancybox-wrap,
.fancybox-wrap *,
.fancybox-inner,
.fancybox-inner *,
.fancybox-outer,
.fancybox-outer *,
.fancybox-skin,
.fancybox-skin *,
.ui-dialog,
.ui-dialog * {
  color: #ffffff !important;
}

.fancybox-wrap input,
.fancybox-wrap select,
.fancybox-wrap textarea,
.ui-dialog input,
.ui-dialog select,
.ui-dialog textarea {
  background: #1e2433 !important;
  color: #ffffff !important;
  border: 1px solid #3a445c !important;
}

.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-content {
  background: #eef1f8 !important;
  border: 1px solid #aab4c6 !important;
}

.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-header *,
.ui-accordion .ui-accordion-content,
.ui-accordion .ui-accordion-content * {
  color: #111111 !important;
}

/* =====================================================
   NAV BAR — FINAL FIX (NO TRANSPARENCY, NO BLACK HOVER)
   Paste at VERY END of dark.css
===================================================== */

/* 0) If the theme applies backgrounds to LI, keep them neutral */
.main_navigation,
.main_navigation li {
  background: transparent !important;
  background-image: none !important;
}

/* 1) The actual clickable buttons (ALL states) */
.main_navigation a,
.main_navigation a:link,
.main_navigation a:visited,
.main_navigation a:focus,
.main_navigation a:active {
  background: #e6ebf5 !important;          /* light grey */
  background-color: #e6ebf5 !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
}

/* 2) Hover = slightly darker grey (still opaque) */
.main_navigation a:hover,
.main_navigation li:hover > a {
  background: #d6deef !important;
  background-color: #d6deef !important;
  background-image: none !important;
  color: #111111 !important;
  opacity: 1 !important;
}

/* 3) KEY FIX: inner wrappers must NOT be transparent */
.main_navigation a *:not(.ui-icon),
.main_navigation li a *:not(.ui-icon),
.main_navigation a:hover *:not(.ui-icon),
.main_navigation li:hover a *:not(.ui-icon) {
  background: inherit !important;
  background-color: inherit !important;
  background-image: none !important;
  color: #111111 !important;
  opacity: 1 !important;
}

/* 4) Kill overlay pseudo-elements if the theme uses them */
.main_navigation a::before,
.main_navigation a::after,
.main_navigation li::before,
.main_navigation li::after {
  content: none !important;
  background: none !important;
}

/* 5) Icons: keep them visible on the light buttons */
.main_navigation a img,
.main_navigation a i,
.main_navigation a .icon {
  filter: brightness(0) saturate(100%) !important;
  color: #111111 !important;
}
/* --- Search + Genre inputs: white inside only --- */
.round_box input[type="text"],
.round_box input[type="search"],
.round_box select,
.input_field,
.input_field_userform {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
}
.round_box input::placeholder { color: #666666 !important; }
.round_box input { caret-color: #111111 !important; }

/* --- Cart sidebar: force all the “grey” text to white --- */
#shopping_cart_container,
#shopping_cart_container * ,
.cart_disc_container,
.cart_disc_container * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* --- Search + Genre inputs: white inside only --- */
.round_box input[type="text"],
.round_box input[type="search"],
.round_box select,
.input_field,
.input_field_userform {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
}
.round_box input::placeholder { color: #666666 !important; }
.round_box input { caret-color: #111111 !important; }

/* --- Cart sidebar: force all the “grey” text to white --- */
#shopping_cart_container,
#shopping_cart_container * ,
.cart_disc_container,
.cart_disc_container * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* =====================================================
   NAV HOVER — FORCE WHITE TEXT (STRONGER)
   Paste at VERY END of dark.css
===================================================== */

/* When ANY nav item is hovered, force the link + ALL inner text white */
.main_navigation a:hover,
.main_navigation li:hover > a,
.main_navigation a:hover *,
.main_navigation li:hover > a * {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Specifically hit common inner wrappers that often override color */
.main_navigation a:hover span,
.main_navigation a:hover div,
.main_navigation a:hover .ui-button-text,
.main_navigation a:hover .ui-menuitem-text,
.main_navigation li:hover > a span,
.main_navigation li:hover > a div,
.main_navigation li:hover > a .ui-button-text,
.main_navigation li:hover > a .ui-menuitem-text {
  color: #ffffff !important;
}

/* Icons/images on hover → white */
.main_navigation a:hover img,
.main_navigation li:hover > a img,
.main_navigation a:hover i,
.main_navigation li:hover > a i,
.main_navigation a:hover .icon,
.main_navigation li:hover > a .icon {
  filter: brightness(0) invert(1) !important;
  color: #ffffff !important;
}

/* =====================================================
   FIX: "Create new CD+G Disc" button text → BLACK
===================================================== */

/* Default: dark text for most buttons */
#shopping_cart_container .ui-button *,
#shopping_cart_container button *,
#shopping_cart_container a.ui-button * {
  color: #111111 !important;
}

/* --- OVERRIDES: Cart action buttons should be white --- */
#shopping_cart_container .carts_button .ui-button-text,
#shopping_cart_container #show_saved_carts .ui-button-text,
#shopping_cart_container #save_cart_as .ui-button-text {
  color: #ffffff !important;
}

/* Keep white on hover too */
#shopping_cart_container .carts_button:hover .ui-button-text,
#shopping_cart_container #show_saved_carts:hover .ui-button-text,
#shopping_cart_container #save_cart_as:hover .ui-button-text {
  color: #ffffff !important;
}

/* Fix hover contrast for "Save cart as..." */
#shopping_cart_container #save_cart_as.ui-state-hover,
#shopping_cart_container #save_cart_as:hover {
  background: #7a8798 !important;   /* darker slate */
  border-color: #6f7b8a !important;
}

/* Ensure text stays white */
#shopping_cart_container #save_cart_as.ui-state-hover .ui-button-text,
#shopping_cart_container #save_cart_as:hover .ui-button-text {
  color: #ffffff !important;
}

/* =====================================================
   ACTIVATE PROMO BUTTON — CORRECT TARGET
   button#campaign_code_button.j_button_nopad.shadow
   Match Sort/Pagination buttons
===================================================== */

#campaign_code_button,
button#campaign_code_button,
button#campaign_code_button.j_button_nopad,
button#campaign_code_button.shadow {
  background-color: #e6ebf5 !important;
  background-image: none !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
  box-shadow: none !important; /* override the .shadow class */
  font-weight: 600 !important;
}

/* Hover = slightly darker grey */
#campaign_code_button:hover,
button#campaign_code_button:hover {
  background-color: #d6deef !important;
  background-image: none !important;
  color: #111111 !important;
}

/* Just in case something inside forces a color */
#campaign_code_button *,
button#campaign_code_button * {
  color: #111111 !important;
}

/* =====================================================
   MICRO WIDTH ADJUSTMENT — BUY + FORMAT DROPDOWN ONLY
   Slightly narrower, nothing else touched
===================================================== */

/* Reduce dropdown width slightly */
.song_row_buttons .ui-selectmenu-button,
.song_row_buttons select {
  width: 155px !important;      /* was ~160–164 */
  min-width: 155px !important;
}

/* Reduce Buy button width to match */
.song_row_buttons .ui-button,
.song_row_buttons button,
.song_row_buttons input[type="button"],
.song_row_buttons input[type="submit"],
.song_row_buttons a {
  width: 155px !important;
  min-width: 155px !important;
}

/* =====================================================
   SONG TITLE — VISUALLY THICKER (Verdana-safe)
===================================================== */

.song_row_song_title {
  font-weight: 700 !important;
  text-shadow:
    0.4px 0   0 currentColor,
   -0.4px 0   0 currentColor;
}

/* =====================================================
   FORMATS ACCORDION — FORCE BLACK TEXT (OVERRIDE INLINE)
===================================================== */

/* Accordion headers (collapsed + open) */
#accordion .ui-accordion-header,
#accordion .ui-accordion-header * {
  color: #111111 !important;
}

/* Accordion content panels */
#accordion .ui-accordion-content,
#accordion .ui-accordion-content * {
  color: #111111 !important;
}

/* Ensure background stays light */
#accordion .ui-accordion-header,
#accordion .ui-accordion-content {
  background: #eef1f8 !important;
}

/* =====================================================
   FORMATS ACCORDION — HEADER TEXT FIX (OVERRIDE INLINE)
   Keeps body text as-is; fixes ONLY the clickable headings
===================================================== */

#accordion .ui-accordion-header {
  background: #eef1f8 !important;
}

/* Force header text black even if h3 has inline color:white!important */
#accordion .ui-accordion-header,
#accordion .ui-accordion-header:link,
#accordion .ui-accordion-header:visited,
#accordion .ui-accordion-header:hover,
#accordion .ui-accordion-header:active,
#accordion .ui-accordion-header:focus {
  color: #111111 !important;
}

/* The actual text node is inside the H3 itself (inline style), so hit it hard */
#accordion .ui-accordion-header[style],
#accordion .ui-accordion-header[style] * {
  color: #111111 !important;
}

/* Also cover the common jQuery UI header descendants */
#accordion .ui-accordion-header span,
#accordion .ui-accordion-header a,
#accordion .ui-accordion-header a * {
  color: #111111 !important;
}

/* Keep the little triangle/icon visible */
#accordion .ui-accordion-header .ui-accordion-header-icon {
  filter: none !important;
}

/* =====================================================
   MY ACCOUNT — make the main tab panel lighter
   (so black/colored text is readable)
===================================================== */

#tabs .ui-tabs-panel,
.ui-tabs .ui-tabs-panel,
#tabs_account .ui-tabs-panel {
  background: #eef1f8 !important;   /* light panel */
  border: 1px solid #aab4c6 !important;
}

/* keep links readable on the light panel */
#tabs .ui-tabs-panel a,
.ui-tabs .ui-tabs-panel a {
  color: #0b57d0 !important;
}
#tabs .ui-tabs-panel a:hover,
.ui-tabs .ui-tabs-panel a:hover {
  text-decoration: underline;
}

/* =====================================================
   LOGIN POPUP — buttons black text, labels white,
   checkbox spacing
===================================================== */

/* Username/Password labels in the login popup */
.fancybox-wrap #login_box label,
.fancybox-wrap #login_box .label,
.fancybox-wrap #login_box .field_label {
  color: #ffffff !important;
}

/* Login popup buttons: BLACK text */
.fancybox-wrap #login_box .ui-button,
.fancybox-wrap #login_box button,
.fancybox-wrap #login_box input[type="button"],
.fancybox-wrap #login_box input[type="submit"],
.fancybox-wrap #login_box a.ui-button {
  background: #e6ebf5 !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
}

/* If jQuery UI wraps text inside spans, force it too */
.fancybox-wrap #login_box .ui-button *,
.fancybox-wrap #login_box button * {
  color: #111111 !important;
}

/* More space between the checkbox and its text */
.fancybox-wrap #login_box input[type="checkbox"] {
  margin-right: 10px !important;
}

/* Covers the case where the checkbox is inside a label */
.fancybox-wrap #login_box label input[type="checkbox"] {
  margin-right: 10px !important;
}

/* Covers the case: checkbox then label */
.fancybox-wrap #login_box input[type="checkbox"] + label {
  margin-left: 2px !important;
}

/* =====================================================
   LOGIN POPUP — FINAL READABILITY FIX
   (scoped ONLY to the fancybox login modal)
===================================================== */

/* Labels: Username / Password → WHITE */
.fancybox-inner #login_box .cart_song_artist {
  color: #ffffff !important;
}

/* Username + Password input boxes → WHITE bg, BLACK text */
.fancybox-inner #login_box input[type="text"],
.fancybox-inner #login_box input[type="password"] {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
}

/* Caret visible */
.fancybox-inner #login_box input {
  caret-color: #111111 !important;
}

/* Login + Create account buttons → BLACK text */
.fancybox-inner #login_box .ui-button,
.fancybox-inner #login_box button {
  background: #e6ebf5 !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
}

/* Checkbox spacing: give labels breathing room */
.fancybox-inner #login_box input[type="checkbox"] {
  margin-right: 8px !important;
}

.fancybox-inner #login_box label {
  margin-right: 18px !important;
}


/* =====================================================
   ORDER HISTORY HEADER BAR — WHITE TEXT
===================================================== */

.box_title,
.box_title_large {
  color: #ffffff !important;
}


/* =====================================================
   ORDER HISTORY ONLY — LIGHT BG + DARK TEXT (SCOPED)
   This will NOT affect the main song search results.
===================================================== */

/* Order history lives inside the jQuery UI tabs container (#tabs) */
#tabs .song_table,
#tabs .song_row,
#tabs .song_row_odd,
#tabs .song_row_even {
  background: #e9edf3 !important; /* light grey */
  color: #111111 !important;
}

/* Keep all text inside Order History readable */
#tabs .song_table *,
#tabs .song_row * {
  color: #111111 !important;
}

/* The blue header bar text in Order History stays WHITE */
#tabs .box_title,
#tabs .box_title_large {
  color: #ffffff !important;
}

/* My carts button — correct element */
#show_saved_carts.ui-button {
  background-color: #6fa0d6 !important;   /* lighter blue */
  border: 1px solid #3f6fa3 !important;
}

/* Text inside the button */
#show_saved_carts .ui-button-text {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Hover state */
#show_saved_carts.ui-button:hover {
  background-color: #5f90c6 !important;
}

/* =====================================================
   MOBILE MENU — FORCE BLACK TEXT ON LIGHT BUTTONS
   (does NOT affect desktop nav or other buttons)
===================================================== */

.mobile_menu_toggle_div .ui-button-text,
.mobile_menu_toggle_div a,
.mobile_menu_toggle_div a:visited,
.mobile_menu_toggle_div a:hover,
.mobile_menu_toggle_div a:active {
  color: #111111 !important;
}

/* Ensure icons remain visible */
.mobile_menu_toggle_div .ui-icon {
  filter: brightness(0) saturate(100%) !important;
}

/* === AUTHORIZE.NET PAYMENT: force CVV box white (override dark.css:181) === */
form#authorizeform input[name="card_cvv"]{
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #111111 !important;
}

/* FIX: Cart totals header text should be black and bold */
.cart_header_row,
.cart_header_row .cart_header_column {
    color: #000000 !important;
    font-weight: 700 !important; /* bold */
}

/* =========================
   CENTER THE TOP NAV BAR
   (force override)
========================= */

/* the bar itself */
.main_navigation{
  width: 100% !important;
  text-align: center !important;
}

/* the UL that holds the buttons */
.main_navigation ul{
  display: inline-block !important;   /* lets it shrink to its content */
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* list items must NOT float left */
.main_navigation ul li{
  float: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* anchors act like buttons */
.main_navigation ul li a{
  display: inline-block !important;
}

/* FIX: normalize spacing between nav buttons */
.main_navigation li {
  margin-left: 0 !important;
}

.main_navigation a {
  margin-left: 6px !important;
}

/* First button should NOT have extra left margin */
.main_navigation li:first-child a {
  margin-left: 0 !important;
}

/* ROLLBACK: do NOT flex the song rows */
.song_row,
.song_row_odd,
.song_row_even,
.song_table .song_row,
.song_table .song_row_odd,
.song_table .song_row_even,
div.song_row_odd,
div.song_row_even {
  display: block !important;
}

/* Reduce the "dead space" without changing layout */
.song_row_buttons {
  min-width: 0 !important;      /* overrides your 175px min */
  margin-left: 0px !important;  /* control the gap */
  padding-left: 0 !important;
}

/* If the left/details side has padding pushing away from the buy column */
.song_row_details,
.song_details,
.song_row_info,
.song_row_text {
  padding-right: 0px !important;
  margin-right: 0 !important;
}

@media (max-width: 850px) {
  .song_row_buttons { margin-left: 0px !important; }
  .song_row_buttons .ui-selectmenu-button,
  .song_row_buttons select,
  .song_row_buttons .ui-button,
  .song_row_buttons button,
  .song_row_buttons input[type="button"],
  .song_row_buttons input[type="submit"],
  .song_row_buttons a {
    width: 140px !important;
    min-width: 140px !important;
  }
}

/* =====================================================
   MOBILE ONLY — shrink the FORMAT dropdown text (above Buy)
   (affects the closed dropdown + the opened menu list)
===================================================== */
@media (max-width: 850px) {

  /* CLOSED dropdown (the box above Buy) */
  .song_row_buttons .ui-selectmenu-button,
  .song_row_buttons .ui-selectmenu-button .ui-selectmenu-text {
    font-size: 10px !important;   /* try 11px if needed */
    line-height: 1.1 !important;
  }

  /* If mobile switches to native <select> instead of jQuery UI */
  .song_row_buttons select {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* OPENED popup list (when you tap the dropdown) */
  .ui-selectmenu-menu .ui-menu-item-wrapper,
  .ui-selectmenu-menu .ui-menu-item a {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}

/* PROMO CODE INPUT — force readable text */
#campaign_code {
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #aab4c6 !important;
  caret-color: #111111 !important;
}

/* Placeholder text (just in case) */
#campaign_code::placeholder {
  color: #666666 !important;
}

/* =====================================================
   DESKTOP ONLY — shrink FORMAT dropdown text (above Buy)
===================================================== */
@media (min-width: 850px) {

  /* CLOSED dropdown (box above Buy) */
  .song_row_buttons .ui-selectmenu-button,
  .song_row_buttons .ui-selectmenu-button .ui-selectmenu-text {
    font-size: 10px !important;   /* try 11px or 12px */
    line-height: 1.15 !important;
  }

  /* Native select fallback */
  .song_row_buttons select {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  /* OPENED dropdown menu */
  .ui-selectmenu-menu .ui-menu-item-wrapper,
  .ui-selectmenu-menu .ui-menu-item a {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

/* Fix Edge dropdown option color for card month/year */
#authorizeform select[name="card_month"],
#authorizeform select[name="card_year"]{
  color-scheme: light !important;
  background: #fff !important;
  color: #111 !important;
}

/* Edge fix: dropdown (option) text was inheriting light grey from dark theme */
.round_box select option {
  color: #111 !important;
  background: #fff !important;
}


/* DOWNLOAD LINKS — Order History & Order Complete */
a[href*="download_new.php"],
a[href*="download_new.php"]:visited {
  color: #d44cff !important;     /* magenta */
  text-decoration: underline !important;
  font-weight: 600;
}

a[href*="download_new.php"]:hover,
a[href*="download_new.php"]:focus {
  color: #ff8fe6 !important;     /* lighter magenta on hover */
  text-decoration: underline !important;
}

/* =====================================================
   CHECKOUT SUBMIT BUTTON (jQuery UI)
   Green background, white text — DARK MODE
   ===================================================== */



/* FORCE jQuery UI Submit Order button to be green */
button#submit_order,
button#submit_order.ui-button,
button#submit_order.ui-widget.ui-button,
button#submit_order.ui-button.ui-state-default,
button#submit_order.ui-button.ui-state-hover,
button#submit_order.ui-button.ui-state-active {
  background-color: #1f9d45 !important;
  background-image: none !important;   /* <-- IMPORTANT for jQuery UI gradients */
  border: 1px solid #1a7f39 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* jQuery UI puts the visible text in this span */
button#submit_order .ui-button-text,
button#submit_order span.ui-button-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Hover / active */
button#submit_order.ui-state-hover,
button#submit_order:hover {
  background-color: #187a35 !important;
  border-color: #14652c !important;
}

button#submit_order.ui-state-active,
button#submit_order:active {
  background-color: #14652c !important;
  border-color: #0f4f22 !important;
}



/* =====================================================
   CHECKOUT: Send / Cancel buttons (force colors)
===================================================== */

/* ---------- FINISH MY ORDER (GREEN) ---------- */
#paypalform input[type="submit"][value="Finish my order"],
#paypalform input[type="submit"][value="Finish my order"].ui-button,
#paypalform input[type="submit"][value="Finish my order"].ui-state-default,
#paypalform input[type="submit"][value="Finish my order"].ui-state-hover,
#paypalform input[type="submit"][value="Finish my order"].ui-state-active {
  background: #1f8f3a !important;
  background-image: none !important;   /* <-- key for jQuery UI themes */
  border: 1px solid #1a7831 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Hover / Active */
#paypalform input[type="submit"][value="Finish my order"]:hover,
#paypalform input[type="submit"][value="Finish my order"].ui-state-hover {
  background: #27a54a !important;
  background-image: none !important;
}

/* ---------- CANCEL MY ORDER (RED) ---------- */
a[href*="cancel=1"].j_button,
a[href*="cancel=1"].ui-button,
a[href*="cancel=1"].ui-state-default,
a[href*="cancel=1"].ui-state-hover,
a[href*="cancel=1"].ui-state-active {
  background: #b02a2a !important;
  background-image: none !important;  /* <-- key for jQuery UI themes */
  border: 1px solid #8f2222 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* jQuery UI puts the visible text in here */
a[href*="cancel=1"] .ui-button-text {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Hover */
a[href*="cancel=1"]:hover,
a[href*="cancel=1"].ui-state-hover {
  background: #c93a3a !important;
  background-image: none !important;
}

/* ===== Fancybox modal — DARK MODE FIX ===== */
.fancybox-skin {
  background: #1f2533 !important;   /* dark slate */
  color: #ffffff !important;
  border-radius: 6px;
}

/* Modal headings */
.fancybox-skin h2,
.fancybox-skin h3 {
  color: #ffffff !important;
}

/* Input field */
.fancybox-skin input[type="text"] {
  background: #0f1724 !important;
  color: #ffffff !important;
  border: 1px solid #3a4a66 !important;
}

/* Placeholder text */
.fancybox-skin input::placeholder {
  color: #9aa7c2 !important;
}

/* Fancybox buttons */
.fancybox-skin .ui-button {
  background: #2f3b55 !important;
  border: 1px solid #4c5f88 !important;
  color: #ffffff !important;
}

.fancybox-skin .ui-button:hover {
  background: #3b4b6d !important;
  color: #ffffff !important;
}

/* ===== Fancybox "Save cart" readability fix (minimal) ===== */

/* Title + instruction text */
.fancybox-skin h2,
.fancybox-skin h3,
.fancybox-skin p,
.fancybox-skin label {
  color: #000 !important;
}

/* Input field text + background */
.fancybox-skin input[type="text"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #888 !important;
}

/* Placeholder text (if any) */
.fancybox-skin input::placeholder {
  color: #555 !important;
}

/* ===== Fancybox: make the 2 header lines black (without touching buttons) ===== */

/* 1) Force normal popup text to black */
.fancybox-inner,
.fancybox-inner h1, .fancybox-inner h2, .fancybox-inner h3,
.fancybox-inner p,
.fancybox-inner label,
.fancybox-inner div,
.fancybox-inner span {
  color: #000 !important;
}

/* 2) Keep the textbox exactly as you like it */
.fancybox-inner input[type="text"]{
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #888 !important;
}

/* 3) Put Cancel / Save button text back to WHITE */
.fancybox-inner .ui-button,
.fancybox-inner .ui-button *{
  color: #fff !important;
}

/* Fancybox: force ONLY the modal title line to black */
.fancybox-wrap .fancybox-inner h2,
.fancybox-wrap .fancybox-inner h3 {
  color: #000 !important;
  text-shadow: none !important;
}

/* ===== Fancybox "Save cart as" text fix ONLY ===== */

/* Make the title line ("Save cart as...") black */
.fancybox-inner b {
  color: #000 !important;
}

/* Make the label text black */
.fancybox-inner {
  color: #000 !important;
}

/* Force input text to stay black */
.fancybox-inner input[type="text"] {
  color: #000 !important;
  background: #fff !important;
}

/* DO NOT TOUCH BUTTONS — force them back to white */
.fancybox-inner .ui-button,
.fancybox-inner .ui-button * {
  color: #ffffff !important;
}

/* =====================================================
   Dark.css is only loaded in dark mode, so no .dark needed
===================================================== */
.ui-icon,
.ui-state-default .ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon,
.ui-state-hover .ui-icon,
.ui-state-active .ui-icon {
  background-image: url("/songshop/cat/js/jquery/images/ui-icons_2e83ff_256x240.png") !important;
}

/* ===== Preview / Sample play button: make it smaller ===== */
.song_table a.button_manuf.ui-button,
.song_table a.stocker_preview.ui-button,
.song_table a.button_manuf,
.song_table a.stocker_preview {
  padding: 0 !important;
  min-width: 0 !important;

  width: 28px !important;   /* change to 40px if you want smaller */
  height: 28px !important;
  line-height: 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* reduce the triangle size */
.song_table a.button_manuf .ui-button-text,
.song_table a.stocker_preview .ui-button-text {
  padding: 0 !important;
  font-size: 14px !important;   /* try 16px if still big */
  line-height: 1 !important;
}

/* ===== iPhone / small screens: smaller preview button ===== */
@media (max-width: 480px) {

  .song_table a.button_manuf.ui-button,
  .song_table a.stocker_preview.ui-button,
  .song_table a.button_manuf,
  .song_table a.stocker_preview {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
  }

  .song_table a.button_manuf .ui-button-text,
  .song_table a.stocker_preview .ui-button-text {
    font-size: 16px !important;
  }
}

/* ===== Preview / Sample button — DESKTOP match iPhone ===== */
@media (min-width: 480px) {

  /* base */
  .song_table a.button_manuf,
  .song_table a.stocker_preview {
    background: #6b7280 !important;    /* iOS-style grey */
    border: 1px solid #8a909c !important;
  }

  /* triangle */
  .song_table a.button_manuf .ui-button-text,
  .song_table a.stocker_preview .ui-button-text {
    color: #ffffff !important;         /* white triangle */
  }

  /* hover (covers real hover + jQuery UI hover class) */
  .song_table a.button_manuf:hover,
  .song_table a.stocker_preview:hover,
  .song_table a.button_manuf.ui-state-hover,
  .song_table a.stocker_preview.ui-state-hover {
    background: #7a8190 !important;
  }
}




/* =====================================================
   PREVIEW / SAMPLE BUTTON — DISABLED STATE
   (Encoding / not ready yet)
===================================================== */

/* Catch all common disabled cases */
.song_table a.button_manuf.ui-state-disabled,
.song_table a.stocker_preview.ui-state-disabled,
.song_table a.button_manuf[aria-disabled="true"],
.song_table a.stocker_preview[aria-disabled="true"] {

  /* keep the SMALL size */
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 !important;
  min-width: 0 !important;

  /* disabled look */
  background: #3a3f48 !important;     /* darker muted grey */
  border: 1px solid #4a4f58 !important;
  opacity: 0.55 !important;

  cursor: not-allowed !important;
  pointer-events: none !important;    /* truly non-clickable */
}

/* Disabled triangle / icon */
.song_table a.button_manuf.ui-state-disabled .ui-button-text,
.song_table a.stocker_preview.ui-state-disabled .ui-button-text,
.song_table a.button_manuf[aria-disabled="true"] .ui-button-text,
.song_table a.stocker_preview[aria-disabled="true"] .ui-button-text {
  color: #b6bcc6 !important;          /* muted light grey */
  font-size: 14px !important;
  padding: 0 !important;
}

/* Mobile size stays correct */
@media (max-width: 480px) {

  .song_table a.button_manuf.ui-state-disabled,
  .song_table a.stocker_preview.ui-state-disabled,
  .song_table a.button_manuf[aria-disabled="true"],
  .song_table a.stocker_preview[aria-disabled="true"] {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
  }

  .song_table a.button_manuf.ui-state-disabled .ui-button-text,
  .song_table a.stocker_preview.ui-state-disabled .ui-button-text {
    font-size: 16px !important;
  }
}

/* Kill hover effects on disabled preview buttons */
.song_table a.button_manuf.ui-state-disabled:hover,
.song_table a.stocker_preview.ui-state-disabled:hover {
  background: #3a3f48 !important;
}






/* =====================================================
   POPUP: Karaoke Search / Song Genres
   Fix black text → WHITE (labels + helper text only)
===================================================== */

/* Radio labels: All / Title / Artist */
.fancybox-inner .round_box label {
  color: #ffffff !important;
}

/* "Browse songs by genre" text */
.fancybox-inner .round_box div {
  color: #ffffff !important;
}

/* Ensure nothing inside those lines forces black */
.fancybox-inner .round_box label *,
.fancybox-inner .round_box div * {
  color: #ffffff !important;
}

/* =========================================
   POPUP: Match "Create new CD+G Disc" button
   to desktop version (white background)
========================================= */

#shopping_cart_container .ui-button {
  background: #ffffff !important;
  border: 1px solid #bfc5d1 !important;
  box-shadow: none !important;
}

/* Button text */
#shopping_cart_container .ui-button .ui-button-text {
  color: #000000 !important;
  font-weight: normal;
}

/* Plus icon */
#shopping_cart_container .ui-button .ui-icon {
  background-color: transparent !important;
  filter: none !important;
}

/* Hover state (subtle desktop-like hover) */
#shopping_cart_container .ui-button:hover {
  background: #f2f4f8 !important;
  border-color: #aeb5c2 !important;
}





/* ===== Fancybox popup titles — FORCE WHITE ===== */

/* MENU popup (h2) */
.fancybox-wrap .fancybox-inner h2.box_title {
  color: #ffffff !important;
}

/* KARAOKE SEARCH + SONG GENRES popups (span) */
.fancybox-wrap .fancybox-inner span.box_title {
  color: #ffffff !important;
}


/* =====================================================
   CART BUTTON COLORS — FIX (Paste at VERY END)
===================================================== */

/* A) STOP the "everything in cart is white" rule from wrecking button text.
   We keep cart TEXT white by targeting the text elements instead. */
#shopping_cart_container .cart_prices_column,
#shopping_cart_container .cart_header_column,
#shopping_cart_container .cart_song_title,
#shopping_cart_container .cart_song_artist,
#shopping_cart_container .cart_row,
#shopping_cart_container .cart_total_row,
#shopping_cart_container .cart_total_column,
.cart_disc_container .cart_prices_column,
.cart_disc_container .cart_header_column,
.cart_disc_container .cart_song_title,
.cart_disc_container .cart_song_artist {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* B) RIGHT-COLUMN "Check out" button (it's an <a>, not #submit_order) */
#shopping_cart_container a.checkout_button.ui-button,
#shopping_cart_container a.carts_button.checkout_button.ui-button {
  background-color: #1f9d45 !important;
  background-image: none !important;
  border: 1px solid #1a7f39 !important;
}

#shopping_cart_container a.checkout_button .ui-button-text,
#shopping_cart_container a.carts_button.checkout_button .ui-button-text {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Hover */
#shopping_cart_container a.checkout_button:hover,
#shopping_cart_container a.carts_button.checkout_button:hover {
  background-color: #187a35 !important;
  border-color: #14652c !important;
}

/* C) Keep "My Carts" + "Save cart as" white text like before */
#shopping_cart_container #show_saved_carts .ui-button-text,
#shopping_cart_container #save_cart_as .ui-button-text {
  color: #ffffff !important;
}



/* =====================================================
   FIX: "My carts" + "Save cart as..." buttons in cart
   (override the accidental white-on-white)
   Paste at VERY END of dark.css
===================================================== */

/* My carts (blue) */
#shopping_cart_container a#show_saved_carts.ui-button,
#shopping_cart_container #show_saved_carts.ui-button {
  background-color: #6fa0d6 !important;
  background-image: none !important;
  border: 1px solid #3f6fa3 !important;
}

#shopping_cart_container a#show_saved_carts.ui-button .ui-button-text,
#shopping_cart_container #show_saved_carts.ui-button .ui-button-text {
  color: #ffffff !important;
  font-weight: 600 !important;
}

#shopping_cart_container a#show_saved_carts.ui-button:hover,
#shopping_cart_container #show_saved_carts.ui-button:hover,
#shopping_cart_container a#show_saved_carts.ui-state-hover,
#shopping_cart_container #show_saved_carts.ui-state-hover {
  background-color: #5f90c6 !important;
  background-image: none !important;
}

/* Save cart as... (slate) */
#shopping_cart_container button#save_cart_as.ui-button,
#shopping_cart_container #save_cart_as.ui-button {
  background-color: #7a8798 !important;
  background-image: none !important;
  border: 1px solid #6f7b8a !important;
}

#shopping_cart_container button#save_cart_as.ui-button .ui-button-text,
#shopping_cart_container #save_cart_as.ui-button .ui-button-text {
  color: #ffffff !important;
  font-weight: 600 !important;
}

#shopping_cart_container button#save_cart_as.ui-button:hover,
#shopping_cart_container #save_cart_as.ui-button:hover,
#shopping_cart_container button#save_cart_as.ui-state-hover,
#shopping_cart_container #save_cart_as.ui-state-hover {
  background-color: #667384 !important;
  background-image: none !important;
}

/* =====================================================
   Shared UA form (My Account Tab 1 + Create Account)
   Dark panel + white text + red asterisks
===================================================== */

.ua-form{
  max-width: 860px;
  margin: 0 auto;
  background: #1c1f26;              /* very dark grey */
  border: 1px solid #2a323c;
  border-radius: 6px;
  padding: 18px 18px 16px;
}

.ua-note{
  margin: 6px 0 14px;
  font-size: 13px;
  color: #d6dbe2;                   /* light grey */
}

.ua-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.ua-full{ grid-column: 1 / -1; }

.ua-row label{
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 6px;
  color: #ffffff;                   /* WHITE labels */
}

.ua-row label .req{
  color: #cc1b1b;                   /* red asterisk */
  font-weight: 900;
  margin-left: 6px;
}

.ua-row input,
.ua-row select{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #c9ccd1;
  background: #1c1f26;
  color: #000000;
  font-size: 14px;
  line-height: 1.2;
}

.ua-actions{ margin-top: 16px; }

@media (max-width: 820px){
  .ua-grid{ grid-template-columns: 1fr; }
}

/* UA forms must stay white text even inside My Account tabs */
#tabs-1 .ua-row label { color: #ffffff !important; }
#tabs-1 .ua-note { color: #e6e6e6 !important; }

/* ===============================
   UA REQUIRED ASTERISKS — FORCE RED
   (Create Account + My Account Tab 1)
   Paste at VERY END of dark.css
================================= */

/* Cover any asterisk spans you output */
.ua-form .req,
.ua-form label .req,
.ua-form .ua-row label .req {
  color: #ff3b3b !important;
  font-weight: 900 !important;
}

/* Extra insurance: if the tab panel is forcing colors */
#tabs .ua-form .req,
#tabs .ua-form label .req,
#tabs-1 .ua-form .req,
#tabs-1 .ua-form label .req {
  color: #ff3b3b !important;
}