/* ==========================================================================
   VapeIran B2B - responsive & bug fixes (loaded after main.css)
   1) password show/hide  2) login page overflow  3) mobile footer / cart / checkout spacing
   4) WooCommerce Blocks (cart & checkout) dark theme  5) general mobile hardening
   ========================================================================== */

/* 1) Password visibility toggle (added by assets/js/password-toggle.js) ------- */
.vi-pw { position: relative; display: block; width: 100%; }
.vi-pw > input { width: 100%; padding-left: 50px !important; }
.vi-pw-toggle {
	position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	background: transparent; color: var(--vi-muted); transition: color .2s, background .2s;
	-webkit-tap-highlight-color: transparent;
}
/* !important: Elementor / Hello Elementor give every <button>:hover a white background */
.vi-pw .vi-pw-toggle, .vi-pw .vi-pw-toggle:active { background: transparent !important; color: var(--vi-muted) !important; border: 0 !important; box-shadow: none !important; }
.vi-pw .vi-pw-toggle:hover, .vi-pw .vi-pw-toggle:focus-visible { background: rgba(255,255,255,.12) !important; color: #fff !important; outline: none; }
.vi-pw .vi-pw-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(255,31,45,.4) !important; }
.vi-pw .vi-pw-toggle svg { stroke: currentColor; fill: none; }
.vi-pw-toggle svg { width: 20px; height: 20px; pointer-events: none; }
.vi-pw-toggle .vi-eye-off { display: none; }
.vi-pw-toggle[aria-pressed="true"] .vi-eye { display: none; }
.vi-pw-toggle[aria-pressed="true"] .vi-eye-off { display: block; }
/* WooCommerce's own toggle (My Account / classic forms) */
.woocommerce form .password-input { display: block; position: relative; }
.woocommerce form .show-password-input { color: var(--vi-muted); }
.woocommerce form .show-password-input:hover { color: var(--vi-text); }

/* 2) Login page (Elementor page "login"): the root container was saved with
      width: 137% which made the whole page wider than the phone screen. -------- */
.elementor-element-23d800e { --width: 100%; width: 100% !important; max-width: 100% !important; }
body.page-id-91, body.vi-gate-page { overflow-x: clip; max-width: 100%; }
.vi-gate, .vi-gate-main { max-width: 100%; }
/* the card keeps its own width (520-540px) and never exceeds the screen */
.vi-gate-box { width: 100%; max-width: min(540px, 100%); margin-inline: auto; }
.vi-gate-logo { max-width: 70%; height: auto; }

/* 3) Footer + cart/checkout spacing ------------------------------------------ */
html, body { max-width: 100%; overflow-x: clip; }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin-bottom: 0 !important; }
.woocommerce-cart .entry-content > :last-child,
.woocommerce-checkout .entry-content > :last-child,
.woocommerce-cart .page-content > :last-child,
.woocommerce-checkout .page-content > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.woocommerce-cart .site-main, .woocommerce-checkout .site-main,
.woocommerce-cart .vi-site-main, .woocommerce-checkout .vi-site-main { min-height: 0 !important; padding-bottom: 0; }

@media (max-width: 782px) {
	.vi-footer { margin-top: 32px; }
	.vi-footer-grid { padding-top: 36px; padding-bottom: 12px; gap: 22px; }
	.vi-footer-word { font-size: clamp(44px, 17vw, 88px); margin-bottom: 0; }
	.vi-copy { padding: 14px 0; }

	/* Cart & checkout: no decorative wordmark, tight footer -> no empty band at the bottom */
	body.woocommerce-cart .vi-footer, body.woocommerce-checkout .vi-footer,
	body.woocommerce-cart .elementor-location-footer, body.woocommerce-checkout .elementor-location-footer { margin-top: 16px !important; }
	body.woocommerce-cart .vi-footer-word, body.woocommerce-checkout .vi-footer-word,
	body.woocommerce-cart .elementor-element-98ad59a, body.woocommerce-checkout .elementor-element-98ad59a { display: none !important; }
	body.woocommerce-cart .elementor-element-1f75934, body.woocommerce-checkout .elementor-element-1f75934 { padding-bottom: 16px !important; min-height: 0 !important; }

	/* Reservation countdown bar (wholesale-stock-reserve): smaller, hugging the bottom edge */
	#wsr-bar { bottom: 8px !important; font-size: 12.5px !important; padding: 8px 12px !important; border-radius: 12px !important; width: calc(100% - 24px); }
}

/* 4) WooCommerce Blocks (cart & checkout are block pages) --------------------- */
.wc-block-cart, .wc-block-checkout { color: var(--vi-text); }
.wc-block-components-sidebar-layout { margin-bottom: 0; }
.wc-block-components-title, .wc-block-cart__totals-title, .wc-block-components-checkout-step__title { color: var(--vi-text) !important; }
.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description,
.wc-block-components-totals-item__description,
.wc-block-components-text-input label,
.wc-block-components-select label { color: var(--vi-muted) !important; }
.wc-block-components-product-name, .wc-block-components-product-name:hover { color: var(--vi-text) !important; }
.wc-block-cart-items, .wc-block-cart-items th, .wc-block-cart-items td,
.wc-block-components-totals-wrapper, .wc-block-components-panel,
.wc-block-components-order-summary, .wc-block-components-order-summary-item,
.wc-block-components-totals-coupon, .wc-block-components-checkout-step { border-color: var(--vi-line) !important; }
.wc-block-cart__sidebar, .wc-block-checkout__sidebar { align-self: start; }
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-combobox .components-combobox-control input,
.wc-block-components-quantity-selector {
	background: var(--vi-surface-2) !important; color: var(--vi-text) !important;
	border: 1px solid var(--vi-line-2) !important; border-radius: 12px !important;
}
.wc-block-components-quantity-selector input, .wc-block-components-quantity-selector button { background: transparent !important; color: var(--vi-text) !important; border: 0 !important; }
.wc-block-components-text-input input:focus, .wc-block-components-textarea:focus { border-color: var(--vi-red) !important; box-shadow: 0 0 0 3px rgba(255,31,45,.18) !important; outline: none; }
.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option,
.wc-block-components-checkout-order-summary__content { border-color: var(--vi-line) !important; }
.wc-block-components-radio-control__option:hover, .wc-block-components-radio-control__option-checked { background: rgba(255,255,255,.03); }
.wc-block-components-radio-control__input { background: transparent !important; border-color: var(--vi-line-2) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--vi-red) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--vi-red) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input { background: var(--vi-surface-2); border-color: var(--vi-line-2); }
.wc-block-components-button:not(.is-link) {
	background: var(--vi-red) !important; color: #fff !important; border: 0 !important;
	border-radius: 999px !important; font-weight: 700; min-height: 48px;
}
.wc-block-components-button:not(.is-link):hover { box-shadow: 0 10px 30px -8px var(--vi-red-glow); }
.wc-block-components-button.outlined { background: transparent !important; border: 1px solid var(--vi-line-2) !important; color: var(--vi-text) !important; }
.wc-block-components-product-badge, .wc-block-components-sale-badge { border-radius: 999px; border-color: var(--vi-red); color: var(--vi-red); }
.wc-block-components-notice-banner { background: var(--vi-surface) !important; color: var(--vi-text) !important; border-radius: 14px; }
.wc-block-components-notice-banner svg { fill: var(--vi-red); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--vi-text); font-weight: 800; }
.wc-block-components-product-price__regular { color: var(--vi-muted); }
/* the empty-cart / cross-sell product grids */
.wc-block-grid__product-title, .wc-block-components-product-title { color: var(--vi-text) !important; }
.wp-block-woocommerce-empty-cart-block { text-align: center; }
.wp-block-woocommerce-empty-cart-block h2 { color: var(--vi-text); }
.wp-block-woocommerce-empty-cart-block hr { border-color: var(--vi-line); }

@media (max-width: 782px) {
	.wc-block-components-sidebar-layout .wc-block-components-main { padding-left: 0; padding-right: 0; }
	.wc-block-components-sidebar-layout .wc-block-components-sidebar { padding-left: 0; padding-right: 0; }
	.wc-block-cart .wc-block-cart-items, .wc-block-cart .wc-block-cart-items td { padding-left: 0; padding-right: 0; }
	.wp-block-woocommerce-cart.alignwide, .wp-block-woocommerce-checkout.alignwide { width: 100%; max-width: 100%; }
	.wc-block-checkout__actions_row { gap: 12px; }
	/* sticky place-order bar must not leave a blank strip under the form */
	.wc-block-checkout__actions { margin-bottom: 0; padding-bottom: 0; }
	.wp-block-woocommerce-product-collection ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* Classic cart/checkout (shortcodes / fallback): stack on phones */
@media (max-width: 782px) {
	.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td { text-align: right !important; }
	.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
	.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100% !important; float: none !important; }
}

/* 5) General mobile hardening ------------------------------------------------- */
img, video, iframe, svg { max-width: 100%; }
@media (max-width: 782px) {
	/* iOS zooms the page when an input smaller than 16px is focused */
	input:not([type="checkbox"]):not([type="radio"]), select, textarea,
	.vi-field input, .vi-field textarea, .vi-quick-order td input { font-size: 16px !important; }
	.vi-icon-btn { width: 44px; height: 44px; }
	.vi-quick-order table { min-width: 560px; }
	.vi-quick-order td input { width: 76px; }
	.vi-gate-box { border-radius: 22px; }
	.vi-reg-form { border-radius: 18px; }
	.vi-tiers th, .vi-tiers td { padding: 8px 8px !important; }
	.woocommerce div.product .product_title { font-size: 24px; }
	.woocommerce div.product form.cart .button { width: 100%; }
}