/*
Theme Name: SCMMB
Theme URI: https://raven5.com
Description: RAVEN5 Contest microsite theme
Author: RAVEN5
Template: r5-base
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* ---------------------------------------------------------
BASE
--------------------------------------------------------- */

:root {
  --bs-body-font-family: 'Roboto', sans-serif;
}

body {
  background: #000;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
}

.sc-hero-media {
    background: #000;
    margin: 0;
    padding: 0;
}

.sc-hero-overlay {
    text-align: center;
    margin: 0;
    padding: 0;
}

.sc-hero-inner {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sc-hero-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.sc-title {
    max-width: 600px;
    width: 100%;
    margin: 50px;
}

.sc-hero {
    position: relative;
    margin: -8px 0 0 0;
    padding: 0;
}

.sc-menu-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 20;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;

    backdrop-filter: blur(6px);

    cursor: pointer;

    transition: all 0.2s ease;
}

.sc-menu-btn svg {
    width: 50px;
    height: 50px;
    color: #FEDB00;
}
.sc-menu-btn:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------
MENU
--------------------------------------------------------- */


#scOffcanvas {
    background: #000;
    color: #fff;
}
#scOffcanvas .offcanvas-header {
    padding: 25px 25px 0;
}
#scOffcanvas .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

#scOffcanvas .btn-close:hover {
    opacity: 1;
}
#scOffcanvas .offcanvas-body {
    padding: 10px 30px;
}

.sc-menu li {
    margin: 0;
}

.sc-menu a {
    display: block;

    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.2px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255,255,255,0.3);

    transition: all 0.2s ease;

    text-decoration: none !important;
    color: #fff !important;
}

.sc-menu a:hover {
    color: #FEDB00 !important;
    transform: translateX(6px);
}
.sc-menu li:last-child a {
    border-bottom: none;
}

/* ---------------------------------------------------------
TYPOGRAPHY
--------------------------------------------------------- */

h1, .h1 {
  font-weight: 600;
  letter-spacing: -0.5px;

}

h2, .h2 {
  font-weight: 600;
}

h3, h4, h5, h6 { color: #FEDB00; }

p {
  color: #ccc;
    font-size: 1.1rem;
    line-height: 1.7;
}

.text-muted {
  color: #888 !important;
}

:root {
  --bs-link-color-rgb: 254, 219, 0; /* #FEDB00 */
  --bs-link-hover-color-rgb: 229, 197, 0;
}

a:link,a:active,a:visited {
  color: rgb(254, 219, 0);
  text-decoration: none !important;
}

footer a:link,footer a:active,footer a:visited { color: #fff; text-decoration:none; }

.footer-legal { font-size: 12px; }

/* ---------------------------------------------------------
SECTIONS / LAYOUT
--------------------------------------------------------- */

.section {
  padding: 60px 0;
}

.section-tight {
  padding: 40px 0;
}

.section-soft {
  background: #0d0d0d;
}

/* ---------------------------------------------------------
GOLD TEXT (your existing, slightly refined)
--------------------------------------------------------- */

.gold-text {
  font-weight: 900;
  color: #FEDB00;
}

/* ---------------------------------------------------------
BUTTONS
--------------------------------------------------------- */


.btn {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  padding: 20px !important;
  border-radius: 0px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  max-width: 600px !important;
  font-size: 20px !important;
  margin: 0 auto !important;
  line-height:20px !important;
  margin-bottom: 10px !important;
}

.btn-gold {
  background: #FEDB00 !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%) !important;
}

.btn-gold:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

/* outline version (used in mockups) */
.btn-gold-outline {
    position: relative;
    background: transparent !important;
    color: #FEDB00 !important;
    border: none !important;
    z-index: 0;
}

.btn-gold-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #FEDB00;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    z-index: -2;
}

.btn-gold-outline::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #000;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    z-index: -1;
    transition: background-color 0.2s ease;
}

.btn-gold-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.btn-gold-outline:hover::after {
    background-color: #111;
}

/* ---------------------------------------------------------
WHERE TO BUY — retailer logo grid
--------------------------------------------------------- */

.sc-retailer-grid {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.sc-retailer-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: #000;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-retailer-tile:hover,
.sc-retailer-tile:focus-visible {
  border-color: #FEDB00;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.sc-retailer-tile img {
  max-width: 100%;
  max-height: 32px;
  object-fit: contain;
}

/* ShopRite's client-approved badge includes the "we are here." tagline stacked
   below the mark, so it's taller than a standard wordmark — let it fill the tile. */
.sc-retailer-tile--shoprite img {
  max-height: 78px;
}

/* Walmart's new white wordmark-only asset reads bigger than other logos at the
   same height (bolder, no icon padding it out), so it needs less headroom than
   the old blue/spark version did. */
.sc-retailer-tile--walmart img {
  max-height: 28px;
}

/* Giant's lockup stacks the leaf icon above the wordmark, so it's a tall/narrow
   shape rather than a wide one — needs more vertical room than the default cap. */
.sc-retailer-tile--giant img {
  max-height: 76px;
}

/* ---------------------------------------------------------
FORMS (fix Bootstrap weirdness)
--------------------------------------------------------- */

.form-control,
.form-select {
  background-color: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  border-radius: 4px;
  padding: 12px;
}

.form-control:focus,
.form-select:focus {
  background-color: #1a1a1a;
  border-color: #c8a95a;
  box-shadow: none;
  color: #fff;
}

/* file upload button tweak */
input[type="file"]::file-selector-button {
  background: #333;
  border: none;
  color: #fff;
  padding: 8px 12px;
  margin-right: 10px;
  cursor: pointer;
}

/* ---------------------------------------------------------
CHECKBOXES
--------------------------------------------------------- */

.form-check-input {
  background-color: #111;
  border: 1px solid #444;
}

.form-check-input:checked {
  background-color: #c8a95a;
  border-color: #c8a95a;
}

/* ---------------------------------------------------------
DASHBOARD CARDS (Receipts / Purchases / Entries)
--------------------------------------------------------- */

.stat-card {
  border: 1px solid #333;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  background: #0d0d0d;
}

.stat-card h3 {
  font-size: 28px;
  margin: 10px 0 0;
  font-weight: 700;
}

.stat-card span {
  font-size: 14px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------
TABLE (receipt history)
--------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}

.table-dark-custom {
  width: 100%;
  border-collapse: collapse;
}

.table-dark-custom th {
  text-align: left;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid #333;
  color: #aaa;
}

.table-dark-custom td {
  padding: 14px 0;
  border-bottom: 1px solid #222;
}

/* status states */

.status-valid {
  color: #4caf50;
  font-weight: 600;
}

.status-invalid {
  color: #ff5252;
  font-weight: 600;
}

/* Status badges (dashboard entries table) — override Bootstrap's dark-mode
   "subtle" variants, which render almost black on this site's black background. */
.badge.bg-success-subtle {
  background-color: rgba(76, 175, 80, 0.18) !important;
  color: #6fd975 !important;
  font-weight: 600;
}

.badge.bg-danger-subtle {
  background-color: rgba(255, 82, 82, 0.18) !important;
  color: #ff8a8a !important;
  font-weight: 600;
}

.badge.bg-warning-subtle {
  background-color: rgba(254, 219, 0, 0.18) !important;
  color: #FEDB00 !important;
  font-weight: 600;
}

/* ---------------------------------------------------------
HEADLINE BLOCKS (hero / dashboard titles)
--------------------------------------------------------- */

.headline {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  margin-bottom: 15px;
}

.subhead {
  font-size: 18px;
  color: #ccc;
  margin-bottom: 25px;
}

/* ---------------------------------------------------------
HELP TEXT / MICROCOPY
--------------------------------------------------------- */

.helper-text {
  font-size: 14px;
  color: #888;
}

/* ---------------------------------------------------------
SPACING UTILITIES (lightweight)
--------------------------------------------------------- */

.mb-30 {
  margin-bottom: 30px;
}

.mt-30 {
  margin-top: 30px;
}

.gap-20 {
  gap: 20px;
}

footer .sc-logo img { max-width: 123px; }


/* ---------------------------------------------------------
GFORMS
--------------------------------------------------------- */

p.gform_required_legend { display:none; }

.gform_wrapper .gfield_label {
  color: #ccc !important;
}

/* Login form (Form 2): Gravity Forms' own default styling centers this label —
   override to left-align it. Covers both plain text-align and flex-based centering. */
#gform_2 .gfield_label {
  text-align: left !important;
  justify-content: flex-start !important;
}
.gform_wrapper .gfield_required {
  color: #ff4d4d !important; 
}
.gform_wrapper .gform_drop_area {
  background: #111 !important;
  border: 2px dashed #333;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.2s ease !important;
}
.gform_wrapper .gform_drop_area:hover {
  border-color: #FEDB00 !important;
  background: #151515 !important;
}
.gform_wrapper .gform_drop_area svg {
  fill: #FEDB00 !important;
}
.gform_wrapper .gform_drop_instructions {
  color: #ccc;
  font-weight: 500;
}
.gform_wrapper {
  --gf-ctrl-file-zone-icon-color: #FEDB00 !important;
}
.gform_wrapper .gform_button_select_files {
  background: #FEDB00 !important;
  color: #000 !important;
  border: none;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.gform_wrapper .gform_button_select_files:hover {
  filter: brightness(1.05);
}

.gform_wrapper .gfield_fileupload_progressbar_progress {
  background-color: #FEDB00 !important;
}


.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus,
.gform_wrapper button:focus {
  outline: none !important;
  border-color: #FEDB00 !important;
  box-shadow: 0 0 0 2px rgba(254, 219, 0, 0.25) !important;
}

.gform_wrapper .ginput_container_date {
  width: 100% !important;
}

.gform_wrapper .ginput_container_date input {
  width: 100% !important;
}

/* ---------------------------------------------------------
GRAVITY FORMS DATEPICKER — this is Gravity Forms' own "Orbital"
datepicker widget (.gform-datepicker-calendar / table.calendar),
NOT jQuery UI — confirmed via live DOM inspection. An earlier
pass at this styled .ui-datepicker classes that don't exist
anywhere in the actual markup, which is why it had zero effect.
--------------------------------------------------------- */
.gform-datepicker-calendar {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  padding: 8px !important;
  z-index: 9999 !important;
}

.gform-datepicker-calendar table.calendar {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  background: transparent !important;
}

/* year + month header rows — plain white bg, dark legible text.
   No inverted/black bar, no fixed widths on the nav cells (that was
   pushing the layout to wrap and drop the arrows below the header). */
.gform-datepicker-calendar tr.yearSelector td,
.gform-datepicker-calendar tr.monthSelector td {
  color: #111 !important;
  font-weight: 700 !important;
  padding: 6px 4px !important;
}

/* The year row's own prev/next arrows sit directly above the month row's
   prev/next arrows, reading as two stacked/duplicated sets of controls.
   They're also functionally dead here: this form's min/max date always
   fall within a single year (Aug 15–Nov 15, 2026 normally; Jan–Dec 2026
   under TENA_TEST_MODE), so the year can never actually change. Hide the
   year arrows — the month row below is the only navigation control left.
   Using visibility:hidden (not display:none) on purpose: the "2026" cell
   has colspan="5" against a 7-column table (5 + the 2 nav cells either
   side), so removing the nav cells from layout via display:none shrinks
   the table to 5 effective columns and throws "2026" off-center relative
   to the day grid below. visibility:hidden keeps their column reserved
   so the existing centering keeps working untouched. */
.gform-datepicker-calendar tr.yearSelector td.nav {
  visibility: hidden !important;
  pointer-events: none !important;
}

.gform-datepicker-calendar tr.yearSelector td span,
.gform-datepicker-calendar tr.monthSelector td span {
  color: #111 !important;
}

/* the header-text color rule above beats the disabled-arrow dimming further down
   the file, because it targets the <span> itself with !important — any rule that
   explicitly sets color always overrides an inherited value, regardless of which
   ancestor it's inherited from. Re-assert the dimmed color directly on the span
   for disabled nav arrows so it actually renders lighter. */
.gform-datepicker-calendar tr.yearSelector td.nav.disabled span,
.gform-datepicker-calendar tr.monthSelector td.nav.disabled span,
.gform-datepicker-calendar tr.yearSelector td.nav[aria-disabled="true"] span,
.gform-datepicker-calendar tr.monthSelector td.nav[aria-disabled="true"] span {
  color: #e6e6e6 !important;
}

/* prev/next nav arrows (year row + month row each have their own). GF's own
   CSS variables for these resolve correctly (~20px), but something in the
   cascade still computes an actual width of ~314px — nearly the full header
   row — leaving a giant invisible hit area (that's the oversized focus box).
   Forcing the real icon-button size directly rather than chasing the exact
   cascade conflict further. */
.gform-datepicker-calendar .nav.btn {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: none !important;
  cursor: pointer !important;
  color: #111 !important;
  /* GF's own inline "top" offset (17.5px) assumes a taller row than this
     compact header actually renders at, so the 20px-tall button overflows
     past the bottom of the row instead of sitting level with the "2026"/
     month text next to it. Center it vertically within the row instead
     of trusting GF's fixed offset. */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.gform-datepicker-calendar .nav.btn svg,
.gform-datepicker-calendar .nav.btn path {
  fill: #111 !important;
  stroke: #111 !important;
}

/* GF's own foundation theme already hides these spans by default
   (.gform-theme--foundation .gform-datepicker-calendar .nav.month.next span,
   .nav.month.prev span, .nav.year.next span, .nav.year.prev span { display:none })
   because the actual arrow glyph GF shows to users comes from elsewhere in its
   own theme layer, not from this span's raw "←"/"→" text. Our earlier
   `display:flex !important` override was fighting that and force-showing this
   redundant text on top of GF's own icon, which is exactly the "doubled arrow"
   look reported. Stop overriding it — let GF's own display:none stand. */
.gform-datepicker-calendar .nav.btn span {
  display: none !important;
}

/* disabled nav arrows (e.g. "previous month" when already at the earliest
   allowed date) — dim clearly so they read as inactive, not just identical
   in color to a clickable arrow */
.gform-datepicker-calendar .nav.btn.disabled,
.gform-datepicker-calendar .nav.btn[aria-disabled="true"] {
  color: #e6e6e6 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.gform-datepicker-calendar .nav.btn.disabled svg,
.gform-datepicker-calendar .nav.btn.disabled path,
.gform-datepicker-calendar .nav.btn[aria-disabled="true"] svg,
.gform-datepicker-calendar .nav.btn[aria-disabled="true"] path {
  fill: #ccc !important;
  stroke: #ccc !important;
}

/* weekday initials row (S M T W T F S) */
.gform-datepicker-calendar tr[role="presentation"] th,
.gform-datepicker-calendar tr[role="presentation"] td {
  color: #666 !important;
  font-weight: 700 !important;
}

/* day cells only — explicitly excludes the year/month header rows so hover
   and selected-day styling can't accidentally paint the header yellow */
.gform-datepicker-calendar table.calendar tr:not(.yearSelector):not(.monthSelector) td {
  text-align: center !important;
  padding: 4px !important;
  border-radius: 5px !important;
  color: #111 !important;
}

.gform-datepicker-calendar table.calendar tr:not(.yearSelector):not(.monthSelector) td:hover {
  background: #FEDB00 !important;
  color: #000 !important;
}

.gform-datepicker-calendar table.calendar tr:not(.yearSelector):not(.monthSelector) td[aria-selected="true"],
.gform-datepicker-calendar table.calendar tr:not(.yearSelector):not(.monthSelector) td.selected {
  background: #FEDB00 !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Force consent checkbox labels to white */
.gform_wrapper .gfield--type-consent label,
.gform_wrapper .gfield_consent_label {
    color: #fff !important;
}

span.gfield_fileupload_filename { color: #fff !important; }

div.receipt-actions { text-align: center; }