/* ==========================================================================
   base.css — Reset, Typography, Layout Primitives
   Loaded after tokens.css. Mobile-first throughout.
   Reference: docs/DESIGN-SYSTEM.md, docs/CONVENTIONS.md
   ========================================================================== */

/* ── Modern CSS reset ────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--color-bg);
  color:            var(--color-text);
  font-family:      var(--font-text);
  font-size:        var(--fs-body);
  font-weight:      400;
  line-height:      var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video,
svg,
canvas {
  max-width: 100%;
  height:    auto;
  display:   block;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--color-light);
  text-decoration: none;
  transition: color var(--motion-fast);
}

a:hover {
  color: var(--color-lite);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing:  0;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-display);
  font-weight:  700;
  line-height:  var(--lh-heading);
  color:        var(--color-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-body);    font-weight: 600; }
h6 { font-size: var(--fs-body-sm); font-weight: 600; }

p { margin-block-end: var(--space-4); }
p:last-child { margin-block-end: 0; }

strong, b { font-weight: 700; }
em,       { font-style:  italic; }

small { font-size: var(--fs-body-sm); }

/* ── Container ───────────────────────────────────────────────────────────── */

.fidyat-container {
  width:              100%;
  max-width:          var(--container-max);
  margin-inline:      auto;
  padding-inline:     var(--container-pad-inline);
}

/* Full-bleed utility — breaks out of the container */
.fidyat-full-bleed {
  width:         100vw;
  margin-inline: calc(50% - 50vw);
}

/* ── Section rhythm ──────────────────────────────────────────────────────── */

.fidyat-section {
  padding-block: var(--space-9);
}

.fidyat-section--sm {
  padding-block: var(--space-7);
}

/* ── Main content wrapper ────────────────────────────────────────────────── */

#main-content {
  min-height: 60vh;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */

.fidyat-skip-link {
  position:    absolute;
  inset-block-start:  -9999px;
  inset-inline-start: 0;
  z-index:     9999;
  background:  var(--color-lite);
  color:       #fff;
  padding:     var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
}

.fidyat-skip-link:focus {
  inset-block-start: 0;
}

/* ── Screen-reader only (Accessibility) ─────────────────────────────────── */

.screen-reader-text {
  clip:     rect(1px, 1px, 1px, 1px);
  height:   1px;
  overflow: hidden;
  position: absolute;
  width:    1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background:    var(--color-lite);
  border-radius: var(--radius-sm);
  clip:          auto !important;
  color:         #fff;
  display:       block;
  font-size:     var(--fs-body-sm);
  font-weight:   700;
  height:        auto;
  inset-inline-start: var(--space-4);
  inset-block-start:  var(--space-4);
  line-height:   normal;
  padding:       var(--space-3) var(--space-5);
  text-decoration: none;
  width:         auto;
  z-index:       100000;
}

/* ── Focus ring (global) ─────────────────────────────────────────────────── */

:focus-visible {
  outline:        2px solid var(--color-lite);
  outline-offset: 2px;
  border-radius:  2px;
}

/* ── Dividers ────────────────────────────────────────────────────────────── */

hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

/* ── Form basics ─────────────────────────────────────────────────────────── */

input,
select,
textarea {
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color:         var(--color-text);
  padding:       var(--space-3) var(--space-4);
  width:         100%;
  transition:    border-color var(--motion-fast),
                 background   var(--motion-fast);
}

select {
  /* Custom dropdown arrow */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239592ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
  padding-inline-start: var(--space-7);
  cursor: pointer;
}

[dir="rtl"] select,
select {
  background-position: left 12px center;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-lite);
  background:   rgba(80, 76, 238, 0.08);
  outline:      none;
  box-shadow:   0 0 0 3px rgba(80, 76, 238, 0.14);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

label {
  display:          block;
  font-size:        var(--fs-body-sm);
  font-weight:      600;
  color:            var(--color-light);
  margin-block-end: var(--space-2);
}

/* ── WooCommerce reset ───────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background:    rgba(255, 255, 255, 0.05);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color:         var(--color-text);
  padding:       var(--space-4) var(--space-5);
  margin-block-end: var(--space-5);
  list-style: none;
}

.woocommerce-error {
  border-color: #f87171;
  color:        #f87171;
}

/* ── Responsive helpers ──────────────────────────────────────────────────── */

/* !important is intentional on visibility utilities — same pattern as Bootstrap/Tailwind */

/* Hidden on mobile (< 768px), visible on tablet+ */
@media (max-width: 767px) {
  .fidyat-hide-mobile { display: none !important; }
}

/* Visible on mobile only, hidden on tablet+ */
@media (min-width: 768px) {
  .fidyat-show-mobile { display: none !important; }
}

/* Hidden on desktop (≥ 1024px) — used for mobile-only archive controls */
@media (min-width: 1024px) {
  .fidyat-hide-desktop { display: none !important; }
}

/* ── Scrollbar styling (WebKit) ──────────────────────────────────────────── */

::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-main);
}

::-webkit-scrollbar-thumb {
  background:    var(--color-lite);
  border-radius: var(--radius-pill);
}

/* ── Main content area ───────────────────────────────────────────────────── */

.fidyat-main {
  padding-block: var(--space-8);
  min-height: 50vh;
}

/* ── Base buttons ────────────────────────────────────────────────────────── */

.fidyat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-text);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
  white-space: nowrap;
}

.fidyat-btn--primary {
  background: radial-gradient(91.69% 100% at 50% 0%, #7875F8 0%, #504CEE 100%);
  color: #fff;
  border: none;
}

.fidyat-btn--primary:hover,
.fidyat-btn--primary:focus-visible {
  filter: brightness(1.1);
  color: #fff;
}

.fidyat-btn--outline {
  background: transparent;
  color: var(--color-lite);
  border-color: var(--color-lite);
}

.fidyat-btn--outline:hover,
.fidyat-btn--outline:focus-visible {
  background: rgba(80 76 238 / 0.12);
}

.fidyat-btn--ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(149,146,255,0.30);
  color: var(--color-light);
}

.fidyat-btn--ghost:hover {
  background: rgba(80,76,238,0.12);
  border-color: rgba(149,146,255,0.60);
}

/* ════════════════════════════════════════════════════════════════════════════
   SELECT2 — global dropdown panel (appended to <body>, needs base styles)
   ════════════════════════════════════════════════════════════════════════════ */

.select2-dropdown {
  background: #0f0f26 !important;
  border: 1px solid rgba(149, 146, 255, 0.25) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(149,146,255,0.08) inset !important;
  overflow: hidden;
  z-index: 99999;
}

.select2-search--dropdown {
  padding: var(--space-2) !important;
}

.select2-search--dropdown .select2-search__field {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(215,214,255,0.18) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-light) !important;
  padding: 0.5em 0.75em !important;
  font-family: var(--font-text) !important;
  font-size: var(--fs-body-sm) !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: rgba(80,76,238,0.70) !important;
  background: rgba(80,76,238,0.07) !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
  color: rgba(215,214,255,0.35) !important;
}

.select2-results__options {
  max-height: 240px !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(149,146,255,0.30) transparent;
}

.select2-results__options::-webkit-scrollbar { width: 4px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb { background: rgba(149,146,255,0.30); border-radius: 2px; }

.select2-results__option {
  color: rgba(215,214,255,0.75) !important;
  padding: 0.6em 1em !important;
  font-family: var(--font-text) !important;
  font-size: var(--fs-body-sm) !important;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.select2-results__option--highlighted,
.select2-results__option:hover {
  background: rgba(80,76,238,0.22) !important;
  color: var(--color-light) !important;
}

.select2-results__option[aria-selected="true"] {
  background: rgba(80,76,238,0.35) !important;
  color: var(--color-light) !important;
  font-weight: 600;
}