/* ============================================================
   WooInstaCheckout — Frontend styles
   All design tokens are CSS custom properties so the future
   Style settings tab can override them with a single <style>
   block, without touching this file.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
	/* Font Family */
	--wic-global-font: "Roboto";
	/* Overlay */
	--wic-overlay-bg:            rgba(0, 0, 0, 0.55);

	/* Popup container */
	--wic-popup-bg:              #ffffff;
	--wic-popup-max-width:       430px;
	--wic-popup-radius:          6px;
	--wic-popup-shadow:          0 8px 32px rgba(0, 0, 0, 0.22);

	/* Header */
	--wic-header-border:         #e5e5e5;
	--wic-title-color:           #111111;
	--wic-title-size:            1.5rem;
	--wic-title-weight:          600;
	--wic-close-color:           #555555;
	--wic-close-size:            20px;

	/* Icon (SVG mask) */
	--wic-icon-color:            #aaaaaa;
	--wic-icon-size:             18px;

	/* Line items */
	--wic-img-size:              52px;
	--wic-qty-bg:                #444444;
	--wic-qty-color:             #ffffff;
	--wic-qty-size:              11px;
	--wic-item-name-color:       #222222;
	--wic-item-price-color:      #222222;

	/* Totals */
	--wic-totals-border:         #eeeeee;
	--wic-totals-label-color:    #555555;
	--wic-totals-value-color:    #222222;
	--wic-grand-label-color:     #111111;
	--wic-grand-value-color:     #111111;
	--wic-grand-weight:          700;
	--wic-grand-size:            1.4rem;

	/* Form heading */
	--wic-heading-color:         #111111;
	--wic-heading-size:          1.4rem;
	--wic-heading-weight:        600;

	/* Fields */
	--wic-field-border:          #ddd;
	--wic-field-radius:          3px;
	--wic-field-bg:              #ffffff;
	--wic-field-text:            #222222;
	--wic-field-placeholder:     #aaaaaa;
	--wic-field-focus-border:    #1a73e8;
	--wic-field-focus-shadow:     0 0 0 2.5px rgb(12, 107, 247, .25);
	--wic-field-height:          40px;
	--wic-field-padding-x:       14px;
	--wic-field-padding-icon:    38px;
	--wic-field-font-size:       1.4rem;

	/* Extra product checkbox  */
	--wic-extra-bg:              #4aef4d;
	--wic-extra-border:          #111111;
	--wic-extra-radius:          4px;
	--wic-extra-text-color:      #111111;

	/* Validation */
	--wic-error-color:           #d32f2f;
	--wic-error-bg:              #fff5f5;

	/* Buy Now button */
	--wic-buy-now-bg:            #41bc3f;
	--wic-buy-now-color:         var(--wic-submit-color);
	--wic-buy-now-radius:        var(--wic-submit-radius);
	--wic-buy-now-font-size:     1.2rem;
	--wic-buy-now-height:        44px;

	/* Submit button #41bc3f*/
	--wic-submit-bg:             #ff3333;
	--wic-submit-color:          #ffffff;
	--wic-submit-radius:         3px;
	--wic-submit-font-size:      1.5rem;
	--wic-submit-font-weight:    600;
	--wic-submit-height:         48px;
	--wic-submit-shadow:         0 2px 7px rgba(0, 0, 0, 0.15);
}


/* ── Overlay ─────────────────────────────────────────────────── */
.wic-overlay {
	position:         fixed;
	inset:            0;
	background:       var(--wic-overlay-bg);
	z-index:          99999;
	overflow-y:       auto;
	padding:          16px;
}

.wic-overlay--hidden {
	display: none;
}

/* ── Popup ───────────────────────────────────────────────────── */
.wic-popup {
	background:     var(--wic-popup-bg);
	border-radius:  var(--wic-popup-radius);
	box-shadow:     var(--wic-popup-shadow);
	width:          100%;
	max-width:      var(--wic-popup-max-width);
	margin:         0 auto;
	font-family: var(--wic-global-font);
}

/* ── Header ──────────────────────────────────────────────────── */
.wic-popup__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 16px;
	border-bottom:   1px solid var(--wic-header-border);
}

.wic-popup__title {
	margin:      0;
	font-size:   var(--wic-title-size);
	font-weight: var(--wic-title-weight);
	color:       var(--wic-title-color);
	line-height: 1.3;
}

.wic-popup__close {
	background:  none;
	border:      none;
	padding:     4px;
	cursor:      pointer;
	color:       var(--wic-close-color);
	line-height: 1;
	display:     flex;
	align-items: center;
}

.wic-popup__close:hover {
	color: var(--wic-title-color);
}

.wic-icon {
	width:  var(--wic-close-size);
	height: var(--wic-close-size);
	fill:   currentColor;
	display: block;
}

/* ── Scrollable body ─────────────────────────────────────────── */
.wic-popup__body {
	width: 100%;
}

/* ── Form wrapper ────────────────────────────────────────────── */
.wic-form {
	padding: 0;
	margin:  0;
}

/* ── Line items (order summary) ──────────────────────────────── */
.wic-line-items {
	padding: 10px 16px 14px !important;
	list-style:  none;
	margin:      0;
	padding:     14px 16px;
}

.wic-line-item {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.wic-line-item--tpl {
	display: none;
}

.wic-line-item__img-wrap {
	position:    relative;
	flex-shrink: 0;
	width:       var(--wic-img-size);
	height:      var(--wic-img-size);
}

.wic-line-item__img {
	width:         100%;
	height:        100%;
	object-fit:    cover;
	border-radius: 3px;
	display:       block;
}

.wic-line-item__qty {
	position:    absolute;
	top:         -6px;
	right:       -6px;
	background:  var(--wic-qty-bg);
	color:       var(--wic-qty-color);
	font-size:   var(--wic-qty-size);
	font-weight: 700;
	min-width:   18px;
	height:      18px;
	border-radius: 50%;
	display:     flex;
	align-items: center;
	justify-content: center;
	padding:     0 3px;
	line-height: 1;
}

.wic-line-item__name {
	flex:        1;
	font-size:   1.2rem;
	color:       var(--wic-item-name-color);
	line-height: 1.4;
}

.wic-line-item__price {
	font-size:   1.2rem;
	font-weight: 600;
	color:       var(--wic-item-price-color);
	white-space: nowrap;
}

/* ── Totals ──────────────────────────────────────────────────── */
.wic-totals {
	border-top: 1px solid var(--wic-totals-border);
	padding:    10px 16px 7px;
}

.wic-totals__row {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	padding:         4px 0;
}

.wic-totals__label {
	font-size: 1.2rem;
	color:     var(--wic-totals-label-color);
}

.wic-totals__value {
	font-size: 1.2rem;
	color:     var(--wic-totals-value-color);
}

.wic-totals__row--grand {
	border-top:  1px solid var(--wic-totals-border);
	margin-top:  6px;
	padding-top: 10px;
}

.wic-totals__row--grand .wic-totals__label,
.wic-totals__row--grand .wic-totals__value {
	font-size:   var(--wic-grand-size);
	font-weight: var(--wic-grand-weight);
	color:       var(--wic-grand-value-color);
}

/* ── Form heading ────────────────────────────────────────────── */
.wic-form__heading {
	margin:      0;
	padding:     7px 16px 10px;
	text-align:  center;
	font-size:   var(--wic-heading-size);
	font-weight: var(--wic-heading-weight);
	color:       var(--wic-heading-color);
}

/* ── Fields ──────────────────────────────────────────────────── */
.wic-field {
	position: relative;
	padding:  0 16px 10px;
}

.wic-field__input {
	font-family:  var(--wic-global-font) !important;
	width:            100% !important;
	height:           var(--wic-field-height) !important;
	padding:          0 var(--wic-field-padding-x) 0 var(--wic-field-padding-icon) !important;
	border:           1px solid var(--wic-field-border) !important;
	border-radius:    var(--wic-field-radius) !important;
	background:       var(--wic-field-bg) !important;
	color:            var(--wic-field-text) !important;
	font-size:        var(--wic-field-font-size) !important;
	box-sizing:       border-box !important;
	outline:          none !important;
	transition:       border-color 0.15s !important;
	/* Icon css */
	background-repeat: no-repeat !important;
    background-size: 38px auto !important;
    background-position: 0 50% !important;
    padding-left: calc(38px + 10px) !important;
}

.wic-field__input::placeholder {
	color: var(--wic-field-placeholder);
}

.wic-field__input:focus {
	border-color: var(--wic-field-focus-border);
	box-shadow: var(--wic-field-focus-shadow);
}
.wic-field--button{
	padding: 0 16px 14px;
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
}

/* ── Extra product checkbox ──────────────────────────────────── */
.wic-extra-product {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	background:    var(--wic-extra-bg);
	border:        2px dotted var(--wic-extra-border);
	border-radius: var(--wic-extra-radius);
	padding:       20px 12px;
	cursor:        pointer;
}

.wic-extra-product__checkbox {
	flex-shrink:  0;
	margin-top:   2px;
	accent-color: var(--wic-extra-border);
	width:        16px;
	height:       16px;
	cursor:       pointer;
}

.wic-extra-product__body {
	flex: 1;
}

.wic-extra-product__text {
	font-size:   1.2rem;
	color:       var(--wic-extra-text-color);
	line-height: 1.4;
	font-weight: 600;
	text-transform: uppercase !important;
}
.wic-extra-product__text .amount{
	font-size:   1.5rem;
}
.short-desc{
	font-weight: 400;
	font-size:   1.2rem;
}
/* ── Submit button ───────────────────────────────────────────── */
.wic-submit {
	font-family: var(--wic-global-font) !important;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          var(--wic-submit-height);
	background:      var(--wic-submit-bg);
	color:           var(--wic-submit-color);
	border:          none;
	border-radius:   var(--wic-submit-radius);
	font-size:       var(--wic-submit-font-size) !important;
	font-weight:     var(--wic-submit-font-weight);
	box-shadow:      var(--wic-submit-shadow);
	cursor:          pointer;
	transition:      filter 0.15s;
}

.wic-submit:hover {
	filter: brightness(1.08);
}

.wic-submit:active {
	filter: brightness(0.95);
}

/* ── Submit loading state ────────────────────────────────────── */
.wic-submit--loading {
	opacity: 0.7;
	cursor:  not-allowed;
}

/* ── Field validation error state ────────────────────────────── */
.wic-field--invalid .wic-field__input {
	border-color:     var(--wic-error-color);
	background-color: var(--wic-error-bg);
}

.wic-field__error {
	display:     block;
	font-size:   1.2rem;
	color:       var(--wic-error-color);
	margin-top:  3px;
	padding-left: var(--wic-field-padding-icon);
	line-height: 1.3;
}

/* ── General form error ──────────────────────────────────────── */
.wic-general-error {
	margin:        8px 16px;
	padding:       10px 14px;
	border-radius: var(--wic-field-radius);
	background:    var(--wic-error-bg);
	color:         var(--wic-error-color);
	font-size:     1rem;
	border:        1px solid var(--wic-error-color);
}

/* ── Body scroll lock ────────────────────────────────────────── */
body.wic-body-lock {
	overflow: hidden;
}

/* ── Utility ─────────────────────────────────────────────────── */
.wic-hidden {
	display: none;
}

/* ── Buy Now button ──────────────────────────────────────────── */
.wic-buy-now {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           21%;
	height:          var(--wic-buy-now-height);
	background:      var(--wic-buy-now-bg);
	color:           var(--wic-buy-now-color);
	border:          none;
	border-radius:   var(--wic-buy-now-radius) !important;
	font-size:       var(--wic-buy-now-font-size) !important;
	font-weight:     600;
	cursor:          pointer;
	transition:      filter 0.15s;
	text-transform: uppercase !important;
}

.wic-buy-now:hover:not(:disabled) {
	filter: brightness(1.08);
}

.wic-buy-now--disabled,
.wic-buy-now:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}
/* ── RESPONSIVE ──────────────────────────────────────────── */
/*mobile*/
@media only screen and (max-width: 767px) {    
   .wic-buy-now{
	width: 100% !important;
	order: 1;
    margin: 0px !important;
   }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {   
   .wic-buy-now{
	width: 50% !important;
   }
}