/* WP EasyCart PRO — checkout fields at checkout ( 6.0.2 ). The rows reuse the checkout's own .ec_cart_input_row styles;
   this only adds what the field types need. */
.wpec-cf-placement { float: left; width: 100%; }
[data-wpec-cf][hidden] { display: none !important; }
.wpec-cf-half { width: 49%; float: left; clear: none; }
/* 6.0.2: a flex row, so half-width fields pair up two by two whatever sits between them ( a hidden field, a third half ). */
.wpec-cf-placement, .wpec-cf-after { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 2%; }
.wpec-cf-placement > *, .wpec-cf-after > * { flex: 0 0 100%; width: 100%; min-width: 0; float: none; box-sizing: border-box; }
.wpec-cf-placement > .wpec-cf-half, .wpec-cf-after > .wpec-cf-half { flex: 0 0 49%; width: 49%; }
.wpec-cf-required { margin-left: 2px; }
/* 6.0.2: the help line floats and clears like the checkout's own rows. As a plain block after the floated label and input its
   box started at the top of the row, and its opacity layered it over the input, so clicks never reached the field. */
.wpec-cf-help { float: left; clear: both; width: 100%; box-sizing: border-box; font-size: .85rem; line-height: 1.45; opacity: .8; margin-top: 4px; }
.wpec-cf-help a { text-decoration: underline; }
.wpec-cf-check { display: flex !important; gap: 8px; align-items: flex-start; font-weight: normal; cursor: pointer; }
.wpec-cf-check input[type="checkbox"] { width: auto !important; margin: 3px 0 0 0; flex: 0 0 auto; }
.wpec-cf-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
/* 6.0.2: a choice list's question reads like every other field's label ( .ec_cart_input_row label ), not the row's 12px. */
.wpec-cf-choices legend { padding: 0; margin: 0 0 6px 0; font-size: inherit; }
.ec_cart_input_row .wpec-cf-choices > legend { color: #222222; font-family: 'Lato', Arial, sans-serif; font-size: .93rem; font-weight: 400; line-height: 1.5em; }
.wpec-cf-placement-account .wpec-cf-choices > legend { font-size: inherit; }
.wpec-cf-choice { display: flex !important; gap: 8px; align-items: center; margin: 0 0 6px 0; font-weight: normal; cursor: pointer; }
.wpec-cf-choice input { width: auto !important; margin: 0; flex: 0 0 auto; }
.wpec-cf-heading { margin-top: 10px; }
.wpec-cf-text { margin: 4px 0 8px 0; }
.wpec-cf-has-error input[type="text"], .wpec-cf-has-error input[type="email"], .wpec-cf-has-error input[type="tel"],
.wpec-cf-has-error input[type="number"], .wpec-cf-has-error input[type="date"], .wpec-cf-has-error select,
.wpec-cf-has-error textarea { border-color: #dc2626 !important; }
.wpec-cf-error { clear: both; }
.wpec-cf-after { float: left; width: 100%; margin: 0 0 24px 0; }
.wpec-cf-after-intro { margin: 0 0 12px 0; }
.wpec-cf-after-done { padding: 12px 14px; border-radius: 6px; background: #ecfdf5; color: #14532d; }
/* 6.0.2: the floating-label layout ( Elementor account widgets ) floats a label that follows its input; a field's label comes
   first and its row can carry a help line, so it stays above the input. Check boxes keep their label beside the box. */
.wp-easycart-label-type-floating .ec_cart_input_row label.wpec-cf-check, .wp-easycart-label-type-floating .ec_cart_input_row label.wpec-cf-choice,
.wp-easycart-label-type-floating .ec_cart_input_row.wpec-cf > label { position: static; top: auto; left: auto; transform: none; padding: 0; pointer-events: auto; color: inherit; background: transparent; }

/* 6.0.2: remembered answers on My Account › Personal information, laid out like the account form around them. */
.wpec-cf-placement-account { margin: 0 0 10px 0; }
.wpec-cf-placement-account > .ec_cart_input_row { font-size: inherit; margin: 10px 0 0 0; }
.wpec-cf-placement-account > .ec_cart_input_row > label { float: none; display: block; width: auto; margin: 0 0 4px 0; font-size: inherit; }
.wpec-cf-placement-account > .ec_cart_input_row > input, .wpec-cf-placement-account > .ec_cart_input_row > select,
.wpec-cf-placement-account > .ec_cart_input_row > textarea { float: none; display: block; width: 100% !important; max-width: 400px; }
.wpec-cf-placement-account textarea { height: auto !important; min-height: 80px; }

/* 6.0.2: gift options and PO number ( wp_easycart_order_extras_pro ). Shipped with WP EasyCart PRO, so a store's copy of
   ec-store.css still gets them. Each block is self-contained ( .ec_cart_extras ), so it reads the same at any placement. */
.ec_cart_extras { float: left; width: 100%; }
.ec_cart_extras::after { content: ""; display: table; clear: both; }
/* The gift options: a gift card-like panel in a warm gift-wrap tone that reads on any light theme ( the store's dark
   background option switches to .wpec-gift-dark ). The switch is the ec_is_gift checkbox ( role switch ) with a drawn knob,
   so the keyboard, screen readers and the checkout fields' "gift order" condition all keep working. Contrast: the heading ink
   #6b4200 and the accent #b45309 both pass 4.5:1 on the panel. The fields stay white with dark text on a dark theme too,
   as the checkout's own fields do ( ec-store.css sets their text colour with !important ). */
/* 6.0.2 ( bug round 7 ): space above the panel, as above a section of its own: it sat right on the order notes box in both
   checkouts. The panel carries it ( nothing is added where the notes would be, so a store without order notes gets no empty
   space ), and theme copies of the templates get it too. Checkout fields placed right after the order notes get the same. */
.wpec-gift { --wpec-gift-bg: #fff7e0; --wpec-gift-border: #f1cf73; --wpec-gift-ink: #6b4200; --wpec-gift-accent: #b45309; --wpec-gift-icon: #fde58a; --wpec-gift-field-bg: #ffffff; --wpec-gift-field-ink: #222222; margin: 18px 0 12px 0; }
.ec_cart_notes_part + .wpec-cf-placement-order_notes { margin-top: 9px; }
.wpec-gift.wpec-gift-dark { --wpec-gift-bg: rgba(251, 191, 36, .1); --wpec-gift-border: rgba(251, 191, 36, .4); --wpec-gift-ink: #fcd34d; --wpec-gift-accent: #fbbf24; --wpec-gift-icon: rgba(251, 191, 36, .2); }
.wpec-gift .ec_cart_header { margin-bottom: 12px; }
.wpec-gift .wpec-gift-card { display: flex; align-items: center; gap: 14px; float: none; clear: both; width: 100%; box-sizing: border-box; margin: 0; padding: 16px 18px; border: 1px solid var(--wpec-gift-border); border-radius: 12px; background: var(--wpec-gift-bg) linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%); color: var(--wpec-text-color, #222222); font-weight: normal; line-height: 1.45; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; position: relative; transform: none; pointer-events: auto; }
.wpec-gift.wpec-gift-dark .wpec-gift-card { background-image: none; }
.wpec-gift .wpec-gift-card:hover { border-color: var(--wpec-gift-accent); }
.wpec-gift.is-on .wpec-gift-card { border-color: var(--wpec-gift-accent); box-shadow: inset 0 0 0 1px var(--wpec-gift-accent); }
.wpec-gift.is-on.has-fields .wpec-gift-card { border-radius: 12px 12px 0 0; }
.wpec-gift .wpec-gift-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wpec-gift-icon); color: var(--wpec-gift-accent); }
.wpec-gift .wpec-gift-icon svg { display: block; width: 24px; height: 24px; }
.wpec-gift .wpec-gift-copy { flex: 1 1 auto; min-width: 0; }
.wpec-gift .wpec-gift-title { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: var(--wpec-gift-ink); }
.wpec-gift .wpec-gift-help { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.45; opacity: .85; }
/* The ec_is_gift checkbox stays in the page, visually hidden, for the keyboard and screen readers ( role switch ); the knob
   beside it is drawn. */
.wpec-gift input.wpec-gift-switch { position: absolute; top: 50%; right: 18px; float: none; width: 1px !important; height: 1px; margin: 0 !important; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none; }
.wpec-gift .wpec-gift-toggle { position: relative; flex: 0 0 auto; display: block; width: 48px; height: 28px; border-radius: 999px; background: #c5cbd3; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); transition: background-color .2s ease; }
.wpec-gift .wpec-gift-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.wpec-gift input.wpec-gift-switch:checked + .wpec-gift-toggle { background: var(--wpec-gift-accent); }
.wpec-gift input.wpec-gift-switch:checked + .wpec-gift-toggle::before { transform: translateX(20px); }
[dir="rtl"] .wpec-gift .wpec-gift-toggle::before { left: auto; right: 3px; }
[dir="rtl"] .wpec-gift input.wpec-gift-switch:checked + .wpec-gift-toggle::before { transform: translateX(-20px); }
.wpec-gift input.wpec-gift-switch:focus-visible + .wpec-gift-toggle { outline: 2px solid var(--wpec-gift-accent); outline-offset: 3px; }
@media ( forced-colors: active ) {
	.wpec-gift .wpec-gift-toggle { border: 1px solid CanvasText; }
	.wpec-gift input.wpec-gift-switch:checked + .wpec-gift-toggle { background: Highlight; }
}
.wpec-gift .wpec-gift-fields { float: none; clear: both; width: 100%; box-sizing: border-box; padding: 16px 18px 18px; border: 1px solid var(--wpec-gift-accent); border-top: 0; border-radius: 0 0 12px 12px; background: var(--wpec-gift-bg); }
.wpec-gift .wpec-gift-fields[hidden] { display: none !important; }
.wpec-gift .wpec-gift-field { margin: 0 0 14px 0; }
.wpec-gift .wpec-gift-field:last-child { margin-bottom: 0; }
.wpec-gift .wpec-gift-field label { display: block; float: none; position: static; transform: none; width: auto; margin: 0 0 6px 0; padding: 0; background: transparent; color: var(--wpec-text-color, #222222); font-size: .9rem; font-weight: 600; line-height: 1.4; pointer-events: auto; }
.wpec-gift .wpec-gift-field textarea,
.wpec-gift .wpec-gift-field input[type="text"] { display: block; float: none; width: 100% !important; max-width: 100%; box-sizing: border-box; margin: 0 !important; padding: 10px 12px; border: 1px solid var(--wpec-border-color, #cfd4da); border-radius: 8px; background: var(--wpec-gift-field-bg); color: var(--wpec-gift-field-ink); font: inherit; font-size: 1rem; line-height: 1.5; box-shadow: none; }
.wpec-gift .wpec-gift-field textarea { min-height: 96px; height: auto; resize: vertical; }
.wpec-gift .wpec-gift-field textarea::placeholder { font-style: italic; opacity: .7; }
.wpec-gift .wpec-gift-field textarea:focus,
.wpec-gift .wpec-gift-field input[type="text"]:focus { outline: none; border-color: var(--wpec-gift-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, .18); }
.wpec-gift .wpec-gift-field.has-error input[type="text"] { border-color: var(--wpec-error-color, #b91c1c); }
.wpec-gift .wpec-gift-count { margin-top: 4px; font-size: .8rem; line-height: 1.4; text-align: end; opacity: .75; font-variant-numeric: tabular-nums; }
.wpec-gift .wpec-gift-count.is-near { color: var(--wpec-gift-accent); font-weight: 700; opacity: 1; }
.wpec-gift .wpec-gift-hint { margin-top: 6px; font-size: .85rem; line-height: 1.45; opacity: .85; }
.wpec-gift .wpec-gift-error { margin-top: 6px; color: var(--wpec-error-color, #b91c1c); font-size: .85rem; font-weight: 600; line-height: 1.45; }
.wpec-gift .wpec-gift-error[hidden] { display: none !important; }
@media ( prefers-reduced-motion: reduce ) {
	.wpec-gift .wpec-gift-card, .wpec-gift .wpec-gift-toggle, .wpec-gift .wpec-gift-toggle::before { transition: none; }
}
@media only screen and ( max-width: 600px ) {
	.wpec-cf-half, .wpec-cf-placement > .wpec-cf-half, .wpec-cf-after > .wpec-cf-half { flex-basis: 100%; width: 100%; }
	.wpec-gift .wpec-gift-card { padding: 14px; gap: 12px; }
	.wpec-gift .wpec-gift-icon { width: 38px; height: 38px; }
	.wpec-gift .wpec-gift-fields { padding: 14px; }
}