/* Fodororsi Térműhely – site fixes (loaded after the Tailwind build). */

:root {
  --fot-primary: #8b7355;
  --fot-dark: #2c2c2c;
  --fot-cream: #f5f0eb;
}

/* ---------- Legal pages (ÁSZF, Elállás, Süti tájékoztató) ----------
   Tailwind's preflight resets headings and lists globally; restore readable typography here. */
.fot-legal {
  max-width: 820px;
  margin: 40px auto 64px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}
.fot-legal h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 2.2em 0 0.6em;
  color: var(--fot-dark);
}
.fot-legal h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.6em 0 0.5em;
  color: var(--fot-dark);
}
.fot-legal p { margin: 0 0 1em; }
.fot-legal ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.fot-legal li { margin-bottom: 0.35em; }
.fot-legal a { color: var(--fot-primary); text-decoration: underline; }
.fot-legal .aszf-meta { font-size: 0.95rem; color: #666; }
.fot-legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 0.9rem; }
.fot-legal th, .fot-legal td { border-bottom: 1px solid #e5e0da; padding: 8px 10px; text-align: left; vertical-align: top; }
.fot-legal th { background: var(--fot-cream); font-weight: 700; text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) {
  .fot-legal table, .fot-legal thead, .fot-legal tbody, .fot-legal tr, .fot-legal th, .fot-legal td { display: block; }
  .fot-legal thead { display: none; }
  .fot-legal tr { border-bottom: 1px solid #e5e0da; padding: 8px 0; }
  .fot-legal td { border: 0; padding: 2px 0; }
}

/* ---------- Page intro (Látványterv igénylés) ---------- */
.fot-page-intro { max-width: 720px; margin: 40px auto 8px; padding: 0 16px; text-align: center; }
.fot-page-intro h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5em;
  color: var(--fot-dark);
}
.fot-page-intro p { font-size: 1.05rem; line-height: 1.6; color: #555; margin: 0 0 0.5em; }
.fot-page-intro__note { font-size: 0.9rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fot-primary) !important; }

/* ---------- U-02: CF7 selects were 42px high with 26.8px line-height + 11px padding → text clipped ---------- */
.wpcf7 select {
  height: auto;
  min-height: 44px;
  line-height: 1.4;
  padding: 10px 36px 10px 14px;
  font-size: 16px;
}

/* ---------- U-05: partner/installer form on a dark background: typed text was dark navy on dark ----------
   The widget's own inline CSS (.jelentkezes-form-wrap .wpcf7 input) prints later, so match its specificity + 1. */
.jelentkezes-form-wrap .wpcf7 input[type="text"],
.jelentkezes-form-wrap .wpcf7 input[type="email"],
.jelentkezes-form-wrap .wpcf7 input[type="tel"],
.jelentkezes-form-wrap .wpcf7 input[type="url"],
.jelentkezes-form-wrap .wpcf7 select.wpcf7-form-control,
.jelentkezes-form-wrap .wpcf7 textarea.wpcf7-form-control {
  color: #fff;
  min-height: 44px;
}
.jelentkezes-form-wrap .wpcf7 ::placeholder { color: rgba(255, 255, 255, 0.65); opacity: 1; }
.jelentkezes-form-wrap .wpcf7 select.wpcf7-form-control option { color: var(--fot-dark); background: #fff; }
.jelentkezes-form-wrap .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.jelentkezes-form-wrap .wpcf7 .wpcf7-acceptance label { display: inline-flex; align-items: flex-start; gap: 8px; text-align: left; }
/* The widget's inline CSS gives every input an 8% white fill and a faint border – on the dark
   background the unchecked box was nearly invisible. */
.jelentkezes-form-wrap .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0; margin-top: 1px; padding: 0;
  background-color: #fff; border: 2px solid #c9a96e; border-radius: 4px;
}
.jelentkezes-form-wrap .wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked { background-color: var(--fot-primary); border-color: #c9a96e; }
.jelentkezes-form-wrap .wpcf7 .wpcf7-acceptance label { cursor: pointer; }

/* Shop root: the breadcrumb repeated the new H1 ("Dekortapéták / Dekortapéták"). */
.post-type-archive-product .shop-page-title .woocommerce-breadcrumb { display: none; }

/* ---------- U-01: wall size on the product page ---------- */
.fot-wall-size { border: 1px solid #e5e0da; border-radius: 8px; padding: 14px 16px 6px; margin: 0 0 18px; background: #fbf9f7; }
.fot-wall-size legend { font-weight: 700; font-size: 0.95rem; padding: 0 6px; color: var(--fot-dark); }
.fot-wall-size__help { font-size: 0.85rem; color: #666; margin: 0 0 10px; }
.fot-wall-size__row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 10px; align-items: center; }
.fot-wall-size__row label { font-size: 0.85rem; margin: 0; white-space: nowrap; }
.fot-wall-size__row input { margin: 0; min-height: 40px; }
@media (max-width: 549px) {
  .fot-wall-size__row { grid-template-columns: auto 1fr; }
}

/* ---------- U-07: shop cards – long excerpts made uneven, hard-to-scan cards ---------- */
.product-small .box-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- U-11: material names are H2 now (were H1); keep the previous look ---------- */
.fot-material-title { font-size: inherit; font-weight: inherit; }

/* ---------- U-08: block checkout "Megrendelés" button was small and low-contrast ---------- */
.wc-block-components-checkout-place-order-button {
  background: var(--fot-primary) !important;
  color: #fff !important;
  min-height: 52px;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 8px;
}
.wc-block-components-checkout-place-order-button:hover { background: #75603f !important; }

/* Tailwind's global preflight (also present with the former CDN) sets h1–h6 to font-size: inherit;
   restore Flatsome's heading scale for the product title. */
.product-main h1.product-title { font-size: 1.7em; font-weight: 700; line-height: 1.3; }
.fot-legal h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--fot-dark);
}

/* ---------- Product page: visualisation link, made-to-order notice, specs tab ---------- */
.fot-product-aside { margin: 8px 0 24px; }
.fot-visualisation-link { margin: 0 0 4px; border-color: var(--fot-primary) !important; color: var(--fot-primary) !important; }
.fot-visualisation-link:hover { background: var(--fot-primary) !important; color: #fff !important; }
.fot-visualisation-note { font-size: 0.85rem; color: #666; margin: 0 0 14px; }
.fot-made-to-order {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #444;
  background: var(--fot-cream);
  border-left: 3px solid var(--fot-primary);
  padding: 10px 14px;
}
.fot-made-to-order a { color: var(--fot-primary); text-decoration: underline; }
.fot-specs h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; margin: 1.4em 0 0.5em; }
.fot-specs h3:first-child { margin-top: 0; }
.fot-specs__materials { width: 100%; border-collapse: collapse; }
.fot-specs__materials th, .fot-specs__materials td { border-bottom: 1px solid #e5e0da; padding: 10px 8px; text-align: left; vertical-align: top; }
.fot-specs__materials th { width: 140px; font-weight: 700; white-space: nowrap; }
.fot-specs__facts { list-style: disc; padding-left: 1.3em; }
.fot-specs__facts li { margin-bottom: 0.3em; }
.fot-specs__catalogue a { color: var(--fot-primary); text-decoration: underline; }

/* ---------- Swatches: design tiles show the pattern, materials as labels ---------- */
.ux-swatches-attribute-ux_image .ux-swatch { width: 64px; height: 64px; border-radius: 6px; }
.ux-swatches-attribute-ux_image .ux-swatch__img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.ux-swatches-attribute-ux_label .ux-swatch { padding: 6px 12px; min-height: 36px; font-size: 0.85rem; }
.ux-swatch.disabled { opacity: 0.35; }

/* ---------- Checkboxes and radios ----------
   The Tailwind forms plugin (also in the former CDN build) styles them with appearance: none and 1rem,
   but Flatsome's input[type="checkbox"] { display: inline } is more specific: an inline box without
   native appearance has no width, so they were 2px wide and hard to hit (privacy consent, login
   "Emlékezz rám", installer form). The block checkout's own controls are left alone. */
input[type="checkbox"]:not(.wc-block-components-checkbox__input),
input[type="radio"]:not(.wc-block-components-radio-control__input) {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 8px 0 0;
  padding: 0;
  vertical-align: -3px;
  border: 1.5px solid #8a8178;
  border-radius: 4px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--fot-primary);
  cursor: pointer;
}
input[type="radio"]:not(.wc-block-components-radio-control__input) { border-radius: 50%; }
input[type="checkbox"]:not(.wc-block-components-checkbox__input):checked,
input[type="radio"]:not(.wc-block-components-radio-control__input):checked {
  border-color: var(--fot-primary);
  background-color: var(--fot-primary);
}
input[type="checkbox"]:not(.wc-block-components-checkbox__input):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
input[type="radio"]:not(.wc-block-components-radio-control__input):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
input[type="checkbox"]:not(.wc-block-components-checkbox__input):focus-visible,
input[type="radio"]:not(.wc-block-components-radio-control__input):focus-visible {
  outline: 2px solid var(--fot-primary);
  outline-offset: 2px;
}
.wpcf7-acceptance label, .woocommerce-form-login__rememberme { display: inline-flex; align-items: flex-start; gap: 0; cursor: pointer; }
.wpcf7-acceptance label input, .woocommerce-form-login__rememberme input { margin-top: 3px; }

/* ---------- Látványterv igénylés: visual pickers (assets/js/visualisation-form.js) ----------
   The form's own fields stay in the form, visually hidden, and receive the picked values. */
.fot-vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
}
.fot-picker { margin: 6px 0 4px; }
.fot-picker__hint { font-size: 0.85rem; color: #6b625a; margin: 0 0 10px; }
.wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) ~ .fot-picker,
.cf7-row:has(.wpcf7-not-valid-tip) .fot-picker { outline: 2px solid #c0392b; outline-offset: 4px; border-radius: 10px; }

.fot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.fot-card {
  display: flex; flex-direction: column; align-items: stretch;
  margin: 0; padding: 0; min-height: 0;
  border: 2px solid #e5e0da; border-radius: 10px; overflow: hidden;
  background: #fff; color: var(--fot-dark);
  text-align: left; text-transform: none; letter-spacing: 0; line-height: 1.3; font-weight: 400;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fot-card:hover { border-color: #c9b9a6; transform: translateY(-1px); }
.fot-card:focus-visible { outline: 2px solid var(--fot-primary); outline-offset: 2px; }
.fot-card[aria-pressed="true"] { border-color: var(--fot-primary); box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.18); }
.fot-card__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--fot-cream); }
.fot-card__body { display: block; padding: 8px 10px 10px; }
.fot-card__title { display: block; font-weight: 700; font-size: 0.95rem; }
.fot-card__sub { display: block; font-size: 0.8rem; color: #6b625a; }
.fot-card[aria-pressed="true"] .fot-card__title::after { content: " ✓"; color: var(--fot-primary); }

.fot-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.fot-designs .fot-card__body { padding: 5px 6px 6px; }
.fot-designs .fot-card__title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.fot-preview {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 14px; align-items: center;
  margin: 0 0 12px; padding: 10px; border-radius: 10px; background: var(--fot-cream);
}
.fot-preview[hidden] { display: none; }
.fot-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #fff; }
.fot-preview__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fot-primary); margin: 0; }
.fot-preview__code { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; margin: 2px 0 6px; color: var(--fot-dark); }
.fot-preview a { font-size: 0.85rem; color: var(--fot-primary); text-decoration: underline; }

.fot-field-label { display: block; font-weight: 700; margin-bottom: 6px; }
.fot-material-row .wpcf7-radio { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Flatsome (.wpcf7 span.wpcf7-list-item: margin-right) and UACF7 (.uacf7-wrapper-default label span: block + margin) win otherwise. */
.wpcf7 .fot-material-row span.wpcf7-list-item { display: block; margin: 0; }
.wpcf7 .fot-material-row label span { margin-top: 0; }
.wpcf7 .fot-material-row label .fot-tex--none { display: flex; }
.fot-material-row .wpcf7-list-item label {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  margin: 0; padding: 10px; border: 2px solid #e5e0da; border-radius: 10px; background: #fff;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.fot-material-row .wpcf7-list-item label:hover { border-color: #c9b9a6; }
.fot-material-row .wpcf7-list-item label:has(input:checked) { border-color: var(--fot-primary); box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.18); }
.fot-material-row .wpcf7-list-item label:has(input:focus-visible) { outline: 2px solid var(--fot-primary); outline-offset: 2px; }
.fot-material-row .wpcf7-list-item label input { position: absolute; top: 10px; right: 10px; margin: 0; }
.fot-material-row .wpcf7-list-item-label { font-weight: 700; font-size: 0.95rem; padding-right: 24px; }
.fot-material-row .fot-mat-tagline { font-size: 0.8rem; color: #6b625a; line-height: 1.35; }
.fot-material-row .is-unavailable label { opacity: 0.45; cursor: not-allowed; }
.fot-material-row .is-unavailable .fot-mat-tagline::after { content: " · ennél a kollekciónál nem választható"; }
.wpcf7 p.fot-material-note { font-size: 0.85rem; line-height: 1.45; color: #555; margin: 10px 0 16px; padding: 8px 12px; border-left: 3px solid var(--fot-primary); background: var(--fot-cream); }
.fot-material-note:empty { display: none; }

/* Material tiles: drawn finish illustrations (matt textile, matt, glass fabric, pearl, metallic), not photos. */
.fot-tex { display: block; height: 56px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.06); }
.fot-tex--none { border: 1.5px dashed #c9b9a6; background: #fbf9f7; display: flex; align-items: center; justify-content: center; font: 700 1.4rem/1 serif; color: #b3a28c; }
.fot-tex--canvaswall {
  background-color: #e9e1d6;
  background-image: repeating-linear-gradient(0deg, rgba(120, 100, 80, 0.12) 0 1px, transparent 1px 3px),
                    repeating-linear-gradient(90deg, rgba(120, 100, 80, 0.12) 0 1px, transparent 1px 3px);
}
.fot-tex--plasterwall {
  background-color: #ece6de;
  background-image: radial-gradient(rgba(120, 100, 80, 0.10) 1px, transparent 1.5px),
                    radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 4px;
}
.fot-tex--aquashield {
  background-color: #dfe6ea;
  background-image: repeating-linear-gradient(45deg, rgba(70, 100, 120, 0.16) 0 2px, transparent 2px 6px),
                    repeating-linear-gradient(-45deg, rgba(70, 100, 120, 0.16) 0 2px, transparent 2px 6px);
}
.fot-tex--pearlwall { background: linear-gradient(120deg, #ece3d9 0%, #fbf8f3 28%, #e8d6e2 48%, #d9e6ee 68%, #f3ece2 100%); }
.fot-tex--silverwall { background: linear-gradient(115deg, #b9bcc0 0%, #eef0f2 35%, #a6aaaf 55%, #e3e5e8 80%, #bfc2c6 100%); }

.fot-wall { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px; align-items: start; }
.fot-wall__inputs { display: grid; gap: 10px; }
.fot-wall__field label { display: block; font-size: 0.85rem; font-weight: 700; margin: 0 0 4px; }
.fot-stepper { display: flex; align-items: stretch; max-width: 220px; }
.fot-stepper button {
  margin: 0; padding: 0; min-height: 0; width: 42px; flex: 0 0 42px;
  border: 1px solid #d6cec4; background: #fbf9f7; color: var(--fot-dark); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.fot-stepper button:first-child { border-radius: 8px 0 0 8px; }
.fot-stepper button:last-child { border-radius: 0 8px 8px 0; }
.fot-stepper input[type="number"] {
  flex: 1 1 auto; width: 100%; min-height: 42px; margin: 0; padding: 0 8px; border-radius: 0;
  border: 1px solid #d6cec4; border-left: 0; border-right: 0; text-align: center; font-size: 1rem; -moz-appearance: textfield;
}
.fot-stepper input::-webkit-outer-spin-button, .fot-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fot-chip {
  margin: 0; padding: 4px 10px; min-height: 0; border: 1px solid #d6cec4; border-radius: 999px; background: #fff;
  color: var(--fot-dark); font-size: 0.8rem; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.fot-chip[aria-pressed="true"] { border-color: var(--fot-primary); background: var(--fot-primary); color: #fff; }
.fot-wall__unknown { display: flex; align-items: flex-start; font-size: 0.9rem; margin: 2px 0 0; cursor: pointer; }
.fot-wall__unknown input { margin-top: 2px; }
.fot-wall__diagram { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 10px; background: var(--fot-cream); }
.fot-wall__frame { position: relative; width: 140px; height: 110px; display: flex; align-items: center; justify-content: center; }
.fot-wall__rect {
  position: relative; border: 2px solid var(--fot-primary); background: repeating-linear-gradient(135deg, rgba(139, 115, 85, 0.10) 0 6px, transparent 6px 12px);
  transition: width .2s, height .2s;
}
.fot-wall__dim { position: absolute; font-size: 0.72rem; color: #5c5148; white-space: nowrap; }
.fot-wall__dim--w { left: 50%; bottom: -18px; transform: translateX(-50%); }
.fot-wall__dim--h { top: 50%; left: -8px; transform: translate(-100%, -50%); }
.fot-wall__area { font-size: 0.9rem; font-weight: 700; color: var(--fot-dark); margin-top: 14px; }
.fot-wall__diagram.is-empty .fot-wall__rect { border-style: dashed; }
@media (max-width: 549px) {
  .fot-wall { grid-template-columns: 1fr; }
  .fot-wall__diagram { flex-direction: row; justify-content: center; }
  .fot-preview { grid-template-columns: 1fr; }
  .fot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tables in product descriptions (e.g. Reverie) were wider than a phone screen and got clipped. */
@media (max-width: 849px) {
  .woocommerce-Tabs-panel--description table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}