/**
 * FolkBeauty Webshop - Alap Stílusok és Reset (v2.0)
 */

/* Reset és alap beállítások */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
     font-size: 16px; /* Alap betűméret */
}

body {
    font-family: var(--font-primary);
    color: var(--szin-szoveg);
    background-color: var(--szin-hatter);
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Vízszintes görgetés megakadályozása */
    padding-top: 70px; /* Fix fejléc miatt kellhet */
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Linkek alap stílusa */
a {
    color: var(--szin-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus {
    color: var(--szin-link-hover);
    text-decoration: underline; /* Hover esetén legyen aláhúzás */
}
a:focus-visible {
     outline: 2px solid var(--piros);
     outline-offset: 2px;
     border-radius: var(--radius-sm);
}


/* Képek */
img, svg, video {
    max-width: 100%;
    height: auto;
    vertical-align: middle; /* Képek alatti kis rés eltüntetése */
}

/* Címsorok */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    color: inherit; /* Örökölje a body vagy szülőelem színét */
}
.folk-title {
    font-family: var(--font-accent);
    font-weight: normal; /* A Berkshire Swash alapból vastag */
}
.hero-title.folk-title { /* Hero címnek lehet speciális stílusa */
     font-size: clamp(2.5rem, 6vw, 4.5rem); /* Reszponzív méret */
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}


/* Bekezdések */
p {
    margin-bottom: var(--spacing-md);
}
.lead {
    font-size: var(--font-size-lg);
    font-weight: 300;
}

/* Listák */
ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg); /* Behúzás */
}
li {
    margin-bottom: var(--spacing-sm);
}

/* Táblázatok */
.table {
    color: var(--szin-szoveg);
    border-color: var(--szin-keret);
    margin-bottom: var(--spacing-md);
}
.table th, .table td {
    border-color: var(--szin-keret);
    padding: var(--spacing-sm) var(--spacing-md);
    vertical-align: middle;
}
.table thead th {
     border-bottom-width: 2px;
     font-weight: 600;
}

/* Form elemek alapjai */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--szin-input-szoveg);
    background-color: var(--szin-input-hatter);
    background-clip: padding-box;
    border: 1px solid var(--szin-input-keret);
    appearance: none; /* Alapértelmezett OS stílus eltávolítása */
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
    color: var(--szin-input-szoveg);
    background-color: var(--szin-input-hatter);
    border-color: var(--szin-input-focus-keret);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--piros-rgb, 196, 0, 17), 0.25); /* RGB kell a transzparenciához */
}
.form-control::placeholder {
    color: var(--szurke-500);
    opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--szurke-200);
    opacity: 1;
}
textarea.form-control {
    min-height: calc(1.6em + 1.2rem + 2px); /* Alap magasság */
}
.form-label {
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}
.form-check-input {
     width: 1.15em;
     height: 1.15em;
     margin-top: 0.2em; /* Igazítás a labelhez */
}
.form-check-input:checked {
     background-color: var(--piros);
     border-color: var(--piros);
}
.form-check-input:focus {
     box-shadow: 0 0 0 0.2rem rgba(var(--piros-rgb, 196, 0, 17), 0.25);
     border-color: var(--piros);
}


/* Segédosztályok */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Szín segédosztályok */
.text-folk { color: var(--piros) !important; }
.bg-folk { background-color: var(--piros) !important; }

/* Scrollbar stílus (opcionális, böngészőfüggő) */
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background: var(--szin-hatter);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--szurke-500);
  border-radius: 10px;
  border: 2px solid var(--szin-hatter);
}
body.dark-theme::-webkit-scrollbar-thumb {
  background-color: var(--szurke-600);
  border-color: var(--szin-hatter);
}