/*
 * fdd-shop.css — cart, checkout, shade picker and toast, in the site's own look
 * (kit colors: navy #020A14 / #0D1C2E / #142C48, blue #4895EF, cyan #4CC9F0, Figtree).
 * Everything is scoped under .fdd-* so the mirrored WooCommerce / Woodmart rules
 * cannot leak in; the few !important flags beat the theme's global input/button styles.
 */
.fdd-shop, .fdd-modal, .fdd-toast {
  --fdd-card: rgba(13, 28, 46, 0.86);
  --fdd-line: rgba(255, 255, 255, 0.1);
  --fdd-text: #d2d6d9;
  --fdd-muted: #8b9bb0;
  --fdd-blue: #4895ef;
  --fdd-cyan: #4cc9f0;
  font-family: Figtree, Arial, Helvetica, sans-serif;
  color: var(--fdd-text);
  box-sizing: border-box;
}
.fdd-shop *, .fdd-modal *, .fdd-toast * { box-sizing: border-box; }
/* The theme header overlaps the page (body.wd-header-overlap) and these pages have no hero to sit under it, so the root clears it itself. */
.fdd-shop { max-width: 1180px; margin: 0 auto; padding: calc(var(--wd-header-h, 110px) + 34px) 0 72px; }
.fdd-h1 { margin: 0 0 26px !important; color: #fff !important; font-size: clamp(28px, 4vw, 40px) !important; font-weight: 700 !important; line-height: 1.15 !important; }
.fdd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.fdd-card { padding: 24px; border-radius: 20px; background: var(--fdd-card); border: 1px solid var(--fdd-line); backdrop-filter: blur(6px); }
.fdd-card h3 { margin: 0 0 16px !important; color: #fff !important; font-size: 19px !important; font-weight: 700 !important; }
.fdd-muted { color: var(--fdd-muted); font-size: 14px; margin: 8px 0 0; }
.fdd-shop small { display: block; color: var(--fdd-muted); font-size: 13px; }
.fdd-shop a { color: var(--fdd-cyan); }
.fdd-shop a:hover { color: #fff; }

/* buttons */
.fdd-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, var(--fdd-blue), var(--fdd-cyan)) !important; color: #03121f !important; font: 700 15px/1.2 Figtree, Arial, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer; transition: filter 0.15s, transform 0.12s; }
.fdd-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.fdd-btn:disabled { opacity: 0.55; cursor: default; }
.fdd-btn--block { width: 100%; margin-top: 18px; }
.fdd-btn--ghost { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; border: 1px solid var(--fdd-line) !important; }
.fdd-link { display: block; margin-top: 14px; text-align: center; font-size: 14px; text-decoration: none; }

/* cart table */
.fdd-table { width: 100%; border-collapse: collapse; margin: 0 !important; border: 0 !important; }
.fdd-table th { padding: 0 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--fdd-line) !important; background: none !important; color: var(--fdd-muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; }
.fdd-table td { padding: 16px 10px !important; border: 0 !important; border-bottom: 1px solid var(--fdd-line) !important; background: none !important; color: var(--fdd-text); vertical-align: middle; }
.fdd-table tr:last-child td { border-bottom: 0 !important; }
.fdd-table td a { color: #fff; font-weight: 600; text-decoration: none; }
.fdd-table td b { color: #fff; white-space: nowrap; }
.fdd-qty { display: inline-flex; align-items: center; border: 1px solid var(--fdd-line); border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.04); }
.fdd-qty button { width: 36px; height: 40px; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; font-size: 18px !important; cursor: pointer; min-height: 0 !important; }
.fdd-qty button:hover { background: rgba(255, 255, 255, 0.1) !important; }
.fdd-qty input { width: 52px !important; height: 40px !important; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; text-align: center; font: 600 15px Figtree, Arial, sans-serif !important; -moz-appearance: textfield; box-shadow: none !important; }
.fdd-qty input::-webkit-outer-spin-button, .fdd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fdd-x { width: 34px; height: 34px; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--fdd-line) !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--fdd-muted) !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer; }
.fdd-x:hover { color: #fff !important; border-color: #ff6b6b !important; }

/* summary */
.fdd-summary { position: sticky; top: 110px; }
.fdd-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--fdd-line); }
.fdd-total span { color: var(--fdd-muted); }
.fdd-total b { color: #fff; font-size: 24px; white-space: nowrap; }
.fdd-lines { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 12px; }
.fdd-lines li { display: flex; justify-content: space-between; gap: 12px; margin: 0 !important; }
.fdd-lines li::before { display: none !important; }
.fdd-lines em { color: var(--fdd-muted); font-style: normal; }
.fdd-lines b { color: #fff; white-space: nowrap; }
.fdd-pay { margin: 18px 0 0 !important; padding: 14px 16px; border-radius: 14px; background: rgba(76, 201, 240, 0.08); border: 1px solid rgba(76, 201, 240, 0.3); }
.fdd-pay b { display: block; color: #fff; }
.fdd-pay span { font-size: 13.5px; color: var(--fdd-muted); }
.fdd-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; cursor: pointer; }
.fdd-consent input { width: 18px !important; height: 18px !important; margin-top: 2px; accent-color: var(--fdd-cyan); flex: none; }
.fdd-error { margin: 14px 0 0 !important; padding: 12px 14px; border-radius: 12px; background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.45); color: #ffd0d0; font-size: 14px; }

/* form */
.fdd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fdd-field { display: block; margin: 0 !important; }
.fdd-field--wide { grid-column: 1 / -1; }
.fdd-field > span { display: block; margin-bottom: 7px; color: var(--fdd-text); font-size: 14px; font-weight: 500; }
.fdd-field > span i { color: var(--fdd-cyan); font-style: normal; }
.fdd-input { width: 100% !important; height: auto !important; min-height: 48px; padding: 12px 16px !important; border-radius: 14px !important; border: 1px solid var(--fdd-line) !important; background: rgba(255, 255, 255, 0.05) !important; color: #fff !important; font: 400 15px/1.4 Figtree, Arial, sans-serif !important; box-shadow: none !important; outline: none; }
.fdd-input::placeholder { color: var(--fdd-muted); }
.fdd-input:focus { border-color: rgba(76, 201, 240, 0.7) !important; box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.16) !important; }
select.fdd-input { appearance: auto; }
select.fdd-input option { color: #0d1c2e; }
textarea.fdd-input { resize: vertical; }
.fdd-input--file { padding: 10px 12px !important; }
.fdd-field small { margin-top: 6px; }
.fdd-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.fdd-empty, .fdd-done { text-align: center; padding: 56px 24px; }
.fdd-empty p, .fdd-done p { margin: 0 auto 22px !important; max-width: 560px; font-size: 17px; }
.fdd-nr b { color: var(--fdd-cyan); font-size: 22px; letter-spacing: 0.02em; }

/* toast */
.fdd-toast { position: fixed; z-index: 100000; left: 50%; bottom: 26px; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 14px 22px; border-radius: 999px; background: rgba(13, 28, 46, 0.97); border: 1px solid rgba(76, 201, 240, 0.55); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); color: #fff; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.fdd-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fdd-toast a { color: var(--fdd-cyan) !important; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* shade picker */
.fdd-modal { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 16px; background: rgba(1, 5, 10, 0.7); backdrop-filter: blur(4px); }
.fdd-modal__box { width: min(440px, 100%); padding: 26px; border-radius: 22px; background: linear-gradient(180deg, #0d1c2e, #06111f); border: 1px solid var(--fdd-line); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.fdd-modal__box h3 { margin: 0 !important; color: #fff !important; font-size: 21px !important; font-weight: 700 !important; }
.fdd-modal__box .fdd-field { margin-top: 16px !important; }
.fdd-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Below 1025px the theme switches to its shorter mobile header (--wd-header-sm-h). */
@media (max-width: 1024px) {
  .fdd-shop { padding-top: calc(var(--wd-header-sm-h, 80px) + 22px); }
}
@media (max-width: 900px) {
  .fdd-grid { grid-template-columns: minmax(0, 1fr); }
  .fdd-summary { position: static; }
  .fdd-fields { grid-template-columns: minmax(0, 1fr); }
  .fdd-card { padding: 18px; }
  .fdd-table thead { display: none; }
  .fdd-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--fdd-line); }
  .fdd-table td[data-th="Total"] { text-align: right; }
  .fdd-table tr:last-child { border-bottom: 0; }
  .fdd-table td { padding: 0 !important; border: 0 !important; }
  .fdd-table td:first-child { grid-column: 1 / -1; }
  .fdd-table td[data-th="Preț"] { display: none; }
  .fdd-toast { border-radius: 18px; flex-direction: column; gap: 6px; text-align: center; }
}