/* =====================================================================
   FilmCart — Industrial Precision
   Design tokens + components for Elementor Pro + Hello Elementor
   ===================================================================== */

:root {
  /* Surfaces */
  --fc-bg:        #0F0F11;
  --fc-surface:   #1A1A1E;
  --fc-surface-2: #232328;
  --fc-black:     #000000;

  /* Text */
  --fc-text:      #F4F4F5;
  --fc-muted:     #A1A1AA;
  --fc-mute-2:    #71717A;

  /* Brand */
  --fc-brand:       #FFB800;
  --fc-brand-hover: #E0A300;
  --fc-brand-soft:  rgba(255, 184, 0, 0.12);

  /* Border / divider */
  --fc-border:      rgba(255, 255, 255, 0.10);
  --fc-border-soft: rgba(255, 255, 255, 0.06);

  /* Type */
  --fc-font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --fc-font-display: 'Space Grotesk', 'Inter', sans-serif;
  --fc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --fc-radius: 0;
  --fc-container: 1400px;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
html, body {
  background: var(--fc-bg);
  color: var(--fc-text);
  font-family: var(--fc-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--fc-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fc-text);
}

a { color: var(--fc-text); text-decoration: none; }
a:hover { color: var(--fc-brand); }

::selection { background: var(--fc-brand); color: var(--fc-bg); }

/* ------------------------------------------------------------------ */
/* Elementor — global resets to match the design                       */
/* ------------------------------------------------------------------ */
.elementor-button,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-image img,
.elementor-image-box-img img,
.e-con,
.elementor-widget-image img { border-radius: var(--fc-radius) !important; }

.elementor-button {
  font-family: var(--fc-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 16px 32px;
  background: var(--fc-text);
  color: var(--fc-bg);
  border: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.elementor-button:hover { background: var(--fc-brand); color: var(--fc-bg); }

.elementor-button.elementor-button-secondary,
.elementor-button.fc-ghost {
  background: transparent;
  color: var(--fc-brand);
  border: 1px solid rgba(255, 184, 0, 0.5);
}
.elementor-button.elementor-button-secondary:hover,
.elementor-button.fc-ghost:hover {
  background: var(--fc-brand);
  color: var(--fc-bg);
  border-color: var(--fc-brand);
}

/* Form fields */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="number"],
.elementor-field-group textarea,
.elementor-field-group select {
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  color: var(--fc-text);
  font-family: var(--fc-font-sans);
  font-size: 14px;
  padding: 14px 16px;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
  border-color: var(--fc-brand);
  outline: none;
  box-shadow: 0 0 0 1px var(--fc-brand);
}

/* Nav menu */
.elementor-nav-menu li a {
  font-family: var(--fc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--fc-text);
}
.elementor-nav-menu li a:hover,
.elementor-nav-menu li.current-menu-item a { color: var(--fc-brand); }

/* ------------------------------------------------------------------ */
/* FilmCart utility classes — usable in Elementor "CSS Classes" field  */
/* ------------------------------------------------------------------ */

.fc-eyebrow {
  font-family: var(--fc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--fc-brand);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fc-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--fc-brand);
  display: inline-block;
}

.fc-mono { font-family: var(--fc-font-mono); letter-spacing: 0.06em; }

.fc-display {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.fc-bracket {
  position: relative;
  padding: 24px;
}
.fc-bracket::before,
.fc-bracket::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--fc-brand);
}
.fc-bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.fc-bracket::after  { bottom: 0; right: 0; border-left: none; border-top: none; }

.fc-card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  padding: 24px;
  transition: border-color .2s ease, transform .2s ease;
}
.fc-card:hover {
  border-color: var(--fc-brand);
  transform: translateY(-2px);
}

.fc-spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  font-family: var(--fc-font-mono);
  font-size: 12px;
  color: var(--fc-muted);
  border-top: 1px solid var(--fc-border-soft);
  padding-top: 16px;
  margin-top: 16px;
}
.fc-spec dt { text-transform: uppercase; letter-spacing: 0.1em; }
.fc-spec dd { color: var(--fc-text); margin: 0; text-align: right; }

.fc-tag {
  display: inline-block;
  font-family: var(--fc-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fc-brand);
  border: 1px solid rgba(255, 184, 0, 0.4);
  padding: 4px 10px;
}

.fc-divider {
  height: 1px;
  background: var(--fc-border);
  width: 100%;
}

.fc-grid-lines {
  background-image:
    linear-gradient(to right, var(--fc-border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fc-border-soft) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ------------------------------------------------------------------ */
/* WooCommerce (basic skin to match)                                    */
/* ------------------------------------------------------------------ */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: var(--fc-brand);
  font-family: var(--fc-font-display);
  font-weight: 700;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
  background: var(--fc-text) !important;
  color: var(--fc-bg) !important;
  border-radius: 0 !important;
  font-family: var(--fc-font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 28px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--fc-brand) !important; }

.woocommerce ul.products li.product {
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  padding: 16px;
}
.woocommerce ul.products li.product:hover { border-color: var(--fc-brand); }

/* ------------------------------------------------------------------ */
/* WPML language switcher                                               */
/* ------------------------------------------------------------------ */
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-list-horizontal {
  font-family: var(--fc-font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.wpml-ls-legacy-dropdown a,
.wpml-ls-legacy-list-horizontal a {
  background: transparent !important;
  border: 1px solid var(--fc-border) !important;
  color: var(--fc-text) !important;
  padding: 8px 12px !important;
}
.wpml-ls-legacy-dropdown a:hover,
.wpml-ls-current-language > a { color: var(--fc-brand) !important; border-color: var(--fc-brand) !important; }

/* ------------------------------------------------------------------ */
/* Scrollbar                                                            */
/* ------------------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fc-bg); }
::-webkit-scrollbar-thumb { background: var(--fc-surface-2); border: 2px solid var(--fc-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fc-brand); }