/* WP EasyCart Offers v2 — front-end styles.
 * Neutral, theme-friendly defaults using EasyCart's existing spacing scale.
 * Color accents inherit from currentColor/theme where possible; the accent
 * variable can be overridden per theme. */

:root {
	--ec-offer-accent: #2e7d32;
	--ec-offer-accent-bg: #edf7ee;
	--ec-offer-gift: #c2185b;
	--ec-offer-gift-bg: #fdeef4;
	--ec-offer-bundle: #37474f;
	--ec-offer-bundle-bg: #eceff1;
}

/* ---- applied code chips ---- */
.ec_offer_codes_container { float: left; width: 100%; box-sizing: border-box; clear: both; }
.ec_offer_codes_container .ec_cart_input_row, .ec_offer_codes_container .ec_cart_button_row, .ec_offer_code_notices { float: left; width: 100%; box-sizing: border-box; }
.ec_offer_applied_codes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 0; float: left; width: 100%; box-sizing: border-box; }
.ec_offer_code_chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--ec-offer-accent); background: var(--ec-offer-accent-bg); color: var(--ec-offer-accent); border-radius: 16px; font-size: 13px; line-height: 1.4; }
.ec_offer_code_chip .dashicons { font-size: 14px; width: 14px; height: 14px; }
.ec_offer_code_chip_code { font-weight: 600; letter-spacing: .03em; }
.ec_offer_code_chip_amount { opacity: .85; }
.ec_offer_code_chip_remove { color: inherit; text-decoration: none; font-size: 15px; line-height: 1; padding-left: 2px; }
.ec_offer_code_chip_remove:hover { opacity: .7; }
.ec_offer_code_chip_legacy { border-style: dashed; }
.ec_offer_code_notice { margin-bottom: 8px; }

/* ---- itemized totals rows ---- */
.ec_offer_totals_row .ec_offer_totals_row_label { font-size: 13px; opacity: .9; }
.ec_offer_totals_row .dashicons { font-size: 14px; width: 14px; height: 14px; vertical-align: text-bottom; color: var(--ec-offer-accent); }
.ec_offer_totals_row_code { opacity: .7; margin-left: 4px; }
.ec_offer_totals_row_amount { color: var(--ec-offer-accent); }

/* ---- progress messages ---- */
.ec_offer_progress_container { margin: 0 0 16px 0; }
.ec_offer_progress_row { padding: 10px 12px; border: 1px solid var(--ec-offer-accent); background: var(--ec-offer-accent-bg); border-radius: 6px; margin-bottom: 8px; }
.ec_offer_progress_message { font-size: 14px; color: var(--ec-offer-accent); }
.ec_offer_progress_message .dashicons { font-size: 15px; width: 15px; height: 15px; vertical-align: text-bottom; }
.ec_offer_progress_bar_track { height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.ec_offer_progress_bar_fill { height: 100%; background: var(--ec-offer-accent); border-radius: 3px; transition: width .4s ease; }

/* ---- per-line tags + discounts ---- */
.ec_offer_line_tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 3px; margin: 6px 6px 0 0; }
.ec_offer_line_tag .dashicons { font-size: 12px; width: 12px; height: 12px; }
.ec_offer_line_tag_gift { color: var(--ec-offer-gift); background: var(--ec-offer-gift-bg); }
.ec_offer_line_tag_bundle { color: var(--ec-offer-bundle); background: var(--ec-offer-bundle-bg); }
.ec_offer_line_discount { font-size: 12px; color: var(--ec-offer-accent); margin-top: 4px; }
.ec_offer_line_discount .dashicons { font-size: 13px; width: 13px; height: 13px; vertical-align: text-bottom; }
.ec_offer_line_discount_amount { font-weight: 600; margin-left: 4px; }

/* ---- gift chooser ---- */
.ec_offer_gift_chooser_container { margin: 0 0 20px 0; }
.ec_offer_gift_chooser { border: 1px solid var(--ec-offer-gift); background: var(--ec-offer-gift-bg); border-radius: 6px; padding: 14px; margin-bottom: 12px; }
.ec_offer_gift_chooser_working { opacity: .5; pointer-events: none; }
.ec_offer_gift_chooser_title { font-weight: 600; color: var(--ec-offer-gift); margin-bottom: 12px; }
.ec_offer_gift_chooser_title .dashicons { vertical-align: text-bottom; }

/* Carousel viewport: options scroll horizontally with snap; arrows are shown
 * by JS only when the row actually overflows. */
.ec_offer_gift_chooser_viewport { display: flex; align-items: center; gap: 8px; }
.ec_offer_gift_chooser_options { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.ec_offer_gift_chooser_options::-webkit-scrollbar { display: none; }
.ec_offer_gift_chooser_nav { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ec-offer-gift); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; user-select: none; }
.ec_offer_gift_chooser_nav:hover { opacity: .85; }
.ec_offer_gift_nav_hidden { display: none; }

.ec_offer_gift_option { flex: 0 0 160px; scroll-snap-align: start; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: 10px; text-align: center; box-sizing: border-box; }
.ec_offer_gift_option_image { max-width: 100%; height: 90px; object-fit: contain; margin-bottom: 6px; }
.ec_offer_gift_option_title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ec_offer_gift_option_strike { text-decoration: line-through; opacity: .5; font-size: 12px; }
.ec_offer_gift_option_free { color: var(--ec-offer-gift); font-weight: 700; font-size: 12px; margin-left: 4px; }

/* Self-contained button: ec_cart_button is theme-styled and several layouts
 * only style it in specific containers, leaving this rendered as bare text. */
.ec_offer_gift_option_button { display: inline-block; margin-top: 8px; padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .03em; background: var(--ec-offer-gift); color: #fff !important; border: none; border-radius: 4px; cursor: pointer; user-select: none; text-decoration: none !important; text-transform: uppercase; }
.ec_offer_gift_option_button:hover { opacity: .85; text-decoration: none !important; }

.ec_offer_gift_chooser_error { margin-top: 10px; padding: 8px 12px; background: #fff; border-left: 3px solid #c62828; color: #c62828; font-size: 13px; }

/* ---- product badge ---- */
/* Hardened against theme/product-template CSS that sizes generic divs in
 * the image wrapper (width/height inflation produced a giant color block). */
.ec_offer_product_badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-block; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: calc(100% - 16px); box-sizing: border-box; background: var(--ec-offer-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.4; padding: 4px 9px; border-radius: 3px; text-transform: uppercase; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Merchant-selectable badge shapes (display config: badge_shape). */
.ec_offer_badge_shape_square { border-radius: 0; }
.ec_offer_badge_shape_rounded { border-radius: 3px; }
.ec_offer_badge_shape_pill { border-radius: 999px; }
.ec_offer_badge_shape_ribbon { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); padding-right: 16px; }

/* ---- product callouts + countdown ---- */
.ec_offer_product_callouts { margin: 10px 0; }
.ec_offer_product_callout { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-left: 3px solid var(--ec-offer-accent); background: var(--ec-offer-accent-bg); font-size: 14px; margin-bottom: 6px; }
.ec_offer_product_callout .dashicons { color: var(--ec-offer-accent); }
.ec_offer_countdown { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.ec_offer_countdown_label { opacity: .7; }
.ec_offer_countdown_clock { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ec-offer-accent); }

/* ---- strikethrough price preview (listing + details) ---- */
.ec_offer_price_strike { text-decoration: line-through; opacity: .55; margin-right: 6px; }
.ec_offer_price_preview { color: var(--ec-offer-accent); font-weight: 700; }

/* ---- bundle product page ---- */
.ec_bundle_container { margin: 16px 0; }
.ec_bundle_items_title { font-weight: 600; margin-bottom: 10px; }
.ec_bundle_item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.ec_bundle_item_image { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; }
.ec_bundle_item_title { font-size: 14px; font-weight: 600; }
.ec_bundle_item_price { font-size: 13px; opacity: .7; }
.ec_bundle_item_options { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.ec_bundle_item_option_select { font-size: 13px; padding: 4px 6px; }
.ec_bundle_pricing { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 6px 0; }
.ec_bundle_pricing_strike { text-decoration: line-through; opacity: .55; }
.ec_bundle_pricing_savings { display: inline-block; background: var(--ec-offer-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; }
.ec_bundle_pricing_price { font-size: 22px; font-weight: 700; }

/* ---- cart bundle grouping ---- */
.ec_offer_bundle_group { border-left: 3px solid var(--ec-offer-bundle); }
.ec_offer_bundle_group_header { display: flex; align-items: center; gap: 6px; font-weight: 600; padding: 8px 12px; background: var(--ec-offer-bundle-bg); color: var(--ec-offer-bundle); font-size: 13px; }
.ec_offer_bundle_group_header .dashicons { font-size: 15px; width: 15px; height: 15px; }
.ec_offer_bundle_group .ec_cart_table_row { border-left: none; }
.ec_offer_bundle_group .ec_cartitem_quantity_input { pointer-events: none; opacity: .6; }

@media ( max-width: 600px ) {
	/* One (mostly) full-width card per view; the sliver of the next card
	 * signals there is more to swipe. */
	.ec_offer_gift_option { flex-basis: 85%; }
	.ec_bundle_pricing { flex-wrap: wrap; }
}

/* ---- claimed gift chooser (change selection) ---- */
.ec_offer_gift_chooser_claimed .ec_offer_gift_chooser_viewport { display: none; }
.ec_offer_gift_chooser_claimed.ec_offer_gift_chooser_open .ec_offer_gift_chooser_viewport { display: flex; margin-top: 10px; }
.ec_offer_gift_claimed_bar { margin-bottom: 0; }
.ec_offer_gift_change_link { margin-left: 10px; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; color: var(--ec-offer-gift); }
.ec_offer_gift_option_selected { background: #fff !important; color: var(--ec-offer-gift) !important; border: 1px solid var(--ec-offer-gift) !important; cursor: default; pointer-events: none; }


/* ---- offer-managed cart lines ---- */
/* Gift/bundle rows are managed by the offer system (claim / change / sync);
 * their remove and quantity controls are emitted with this class and must
 * not be operable. This rule was referenced by the cart templates but was
 * never defined — the X stayed fully live on gift rows. */
.ec_offer_locked_control { display: none !important; }