/* ═══════════════════════════════════════════════════

   UTOPIA FAST CHECKOUT — Modern Design

   ═══════════════════════════════════════════════════ */



/* ── Existing WooCommerce / theme overrides ── */

.summary .detail-meta-top { margin-bottom: 0px !important; }



.woocommerce div.product .summary p.price .amount,

div.product .summary .ts-variation-price .amount {

    color: #050505 !important;

    font-size: 20px !important;

    margin-right: 10px !important;

    font-weight: 500 !important;

}



.ts-product-attribute > div a {

    border: 1px solid #000 !important;

    padding: 10px 17px;

    display: inline-block;

    cursor: pointer;

    font-size: 12px;

    line-height: normal;

    border-radius: 0px !important;

    background: unset !important;

}



.ts-product-attribute > div.option.selected a {

    border: 1px solid #000 !important;

    padding: 10px 17px;

    display: inline-block;

    cursor: pointer;

    font-size: 12px;

    line-height: normal;

    border-radius: 5px !important;

    background: #000 !important;

    color: #fff;

}



.woocommerce div.product form.cart .variations_button { grid-template-columns: auto !important; }

.woocommerce div.product form.cart div.quantity {

    display: flex !important;

    gap: 0 5px !important;

    margin: 0px !important;

    align-items: center;

    max-width: 110px !important;

}

.woocommerce .summary .quantity .number-button { width: 110px !important; }



button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed,

button.single_add_to_cart_button.button.alt,

button.single_add_to_cart_button.button.alt.loading {

    position: absolute;

    left: 135px;

    width: calc(100% - 135px) !important;

    bottom: 0px;

}



.woocommerce .quantity input.qty, .quantity input.qty {

    height: auto;

    border-color: #dadada;

    background-color: #fff;

    margin: 0;

    padding: 5px;

    border-radius: 50px;

}



.quantity input.minus, .quantity input.plus {

    color: #7c7c7c00 !important;

    padding: 0px !important;

    font-size: 16px !important;

    border: none !important;

    background: rgba(232,232,232,.43) !important;

    font-weight: 800 !important;

    margin: 3px !important;

    display: flex !important;

    align-items: center !important;

}

.quantity input.minus { border-radius: 50px 0 0 50px !important; }

.quantity input.plus  { border-radius: 0 50px 50px 0 !important; }



.quantity .number-button:before { left: 2px !important; font-size: 3px !important; font-weight: 600 !important; }

.quantity .number-button:after  { right: 2px !important; font-size: 9px !important; font-weight: 600 !important; }



button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {

    border-radius: 50px !important;

    width: 100%;

    margin: auto;

    border: unset !important;

}

button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed:hover { background-color: #c39348 !important; }



.button-in.wishlist { margin-left: 10px; }



body.image-button-radius .ts-product-attribute > div.color a.variation-img:after,

.ts-product-attribute > div.color a.img-color.variation-img img,

body.image-button-radius .ts-product-attribute > div.color a.variation-img,

body.image-button-radius .ts-product-attribute > div a { border-radius: 5px !important; }



body.image-button-radius :is(a.button,button.button,input.button,a.button.alt,button.button.alt,input.button.alt,a.button.disabled,a.button:disabled,button.button.disabled,button.button:disabled,input.button.disabled,input.button:disabled) {

    border-radius: 50px !important;

}



.quantity .minus, .quantity .plus, .quantity .number-button:before, .quantity .number-button:after { width: 30px !important; }



.woocommerce div.product form.variations_form.cart .button { min-width: unset !important; }

.woocommerce div.product form.cart .single_variation_wrap { position: relative; }



.single_add_to_cart_se {

    display: flex;

    padding: 0;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}



section#glozin-sticky-add-to-cart form.cart .glozin-product-atc-group.d-flex.flex-wrap.align-items-end div#utopia-fast-checkout { display: none; }



.single-product .product-type-simple form.cart { display: block !important; }

.single-product .product-type-simple form.cart button.single_add_to_cart_button.button.alt { position: relative !important; left: 28px !important; }



@media only screen and (max-width: 330px) {

    .single-product .product-type-simple form.cart button.single_add_to_cart_button.button.alt { left: 15px !important; }

}



.single-product .product-type-simple form.cart .product-featured-icons.product-featured-icons--single-product { position: absolute !important; right: 0; top: 10px; }

.single-product div.product.product-type-simple form.cart div.quantity { margin: 0 0 25px 0 !important; }



.single-product div.product form.cart div.quantity {

    display: flex !important;

    gap: 0 5px !important;

    margin: 0 !important;

    align-items: center;

    max-width: 110px !important;

    position: relative;

    letter-spacing: 0;

    overflow: hidden;

    max-width: 100%;

    border: 1px solid #dadada;

    border-radius: 50px;

    width: 139px;

    background: transparent;

    padding: 0;

    height: 44px;

}



.single-product .quantity input.qty, .quantity input.qty {

    height: auto;

    border-color: unset;

    background-color: unset;

    margin: 0;

    padding: 5px;

    border-radius: unset;

    border: unset;

}



span.glozin-svg-icon.glozin-svg-icon--minus.glozin-qty-button.decrease,

span.glozin-svg-icon.glozin-svg-icon--plus.glozin-qty-button.increase {

    display: inline-block;

    height: 35px;

    text-align: center;

    border-radius: 4px;

    cursor: pointer;

    user-select: none;

    color: #000 !important;

    padding: 7px !important;

    border: none !important;

    background: rgba(232,232,232,.43) !important;

    font-weight: 900 !important;

    margin: 3px !important;

}

span.glozin-svg-icon.glozin-svg-icon--minus.glozin-qty-button.decrease { line-height: 21px !important; font-size: 11px !important; border-radius: 50px 0 0 50px !important; }

span.glozin-svg-icon.glozin-svg-icon--plus.glozin-qty-button.increase  { line-height: 20px !important; font-size: 9px  !important; border-radius: 0 50px 50px 0 !important; }



.woocommerce .quantity .glozin-qty-button:hover::before { background-color: unset; }



.variations_button button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {

    opacity: 1;

    cursor: not-allowed !important;

    pointer-events: all;

}

.variations_button button.single_add_to_cart_button.button.alt { bottom: 0 !important; left: 0 !important; padding: 14px; border-radius: 25px; }

.variations_button button.single_add_to_cart_button.button.alt:hover { background: #c39348; }

.variations_button .product-featured-icons.product-featured-icons--single-product { margin-top: 25px; }



.single-product .product-type-simple form.cart button.single_add_to_cart_button.button.alt { position: relative !important; bottom: 25px; border-radius: 50px; padding: 14px; left: 2px !important; }

.single-product .product-featured-icons.product-featured-icons--single-product { position: absolute !important; top: -20px; right: 0; }



#utopia-fast-checkout { width: 100%; }

.woocommerce div.product form.cart .single_variation_wrap { position: unset; }

button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed { position: relative; left: 0; bottom: 0; }

button.single_add_to_cart_button.button.alt { position: relative !important; }



body:not(.button-eff-hover-disabled).single-product div.product .single_add_to_cart_button:not(.loading):after,

body:not(.button-eff-hover-disabled).single-product div.product .woocommerce-Reviews .comment-respond .comment-form .form-submit .submit:not(.loading):after { background-color: #c39348 !important; border-color: #c39348 !important; }



@media (min-width: 1025px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    body:not(.button-eff-hover-disabled).single-product div.product .single_add_to_cart_button:not(.loading):after { background-color: #c39348 !important; border-color: #c39348 !important; }

}



.single-product div.product .single_add_to_cart_button.loading { position: absolute; }



@media (max-width: 340px) {

    .variations_button button.single_add_to_cart_button.button.alt { padding: 14px 0 !important; }

}



/* ═══════════════════════════════════════════════════

   MODERN FAST CHECKOUT FORM — New Design

   ═══════════════════════════════════════════════════ */



@keyframes shakeCart {

    0%, 100% { transform: translateX(0); }

    15%  { transform: translateX(3px); }

    20%  { transform: translateX(-3px); }

    30%  { transform: translateX(1.5px); }

    50%  { transform: translateX(0); }

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(6px); }

    to   { opacity: 1; transform: translateY(0); }

}



#utopia-fast-checkout {

    margin-top: 0;

    margin-bottom: 20px;

    border: none !important;

    border-radius: 20px !important;

    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);

    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);

    padding: 0 !important;

    overflow: hidden;

    animation: fadeIn 0.35s ease-out;

    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

}



/* ── Header ── */

div#utopia-fast-checkout h3 {

    text-align: center;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #fff;

    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);

    margin: 0;

    padding: 14px 20px;

}



/* ── Form body ── */

#fast-checkout-form {

    padding: 20px 18px 16px;

}



/* ── Input grid ── */

.form-input-box {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}



.form-input-box p { margin: 0; }



.form-input-box p input,

.form-input-box p select {

    width: 100%;

    border-radius: 12px !important;

    padding: 11px 14px !important;

    background-color: #f7f7f8 !important;

    color: #1a1a1a !important;

    border: 1.5px solid #e8e8e8 !important;

    font-size: 13.5px !important;

    font-family: inherit;

    transition: border-color .2s, box-shadow .2s, background .2s;

    box-shadow: none !important;

    line-height: 1.4;

    -webkit-appearance: none;

    appearance: none;

    outline: none;

}



.form-input-box p select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: right 14px center !important;

    padding-right: 36px !important;

    cursor: pointer;

}



.form-input-box p input:focus,

.form-input-box p select:focus {

    border-color: #1a1a1a !important;

    background-color: #fff !important;

    box-shadow: 0 0 0 3px rgba(26,26,26,0.07) !important;

    outline: none !important;

}



.form-input-box p input::placeholder { color: #aaa; }



.form-input-box p select option:checked { background-color: #1a1a1a; color: #fff; }



div#fast-checkout-form .form-input-box p input,

div#fast-checkout-form .form-input-box p select { width: 100%; }



/* ── Order summary ── */

#utopia-fast-checkout .order-summary {

    background: #f7f7f8;

    border: 1.5px solid #ececec;

    border-radius: 14px;

    padding: 14px 16px;

    margin: 14px 0 0;

}



#utopia-fast-checkout .order-summary h4 {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    color: #888;

    margin: 0 0 10px;

}



.order-line {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 13px;

    color: #555;

    padding: 4px 0;

    border-bottom: 1px solid #ebebeb;

    gap: 8px;

}



.order-line:last-child { border-bottom: none; }



.order-line .label { flex: 1; }

.order-line .value { font-weight: 600; color: #1a1a1a; white-space: nowrap; }



.order-line.total {

    margin-top: 6px;

    padding-top: 10px;

    border-top: 2px solid #1a1a1a;

    border-bottom: none;

    font-size: 14.5px;

    font-weight: 700;

    color: #1a1a1a;

}

.order-line.total .value { font-size: 16px; }



/* ── Turnstile ── */

.utopia-turnstile-wrap {

    margin: 14px 0 4px;

    display: flex;

    justify-content: center;

}



/* ── Bottom: quantity + CTA ── */

.utopia-fast-bottom-set {

    display: flex;

    gap: 12px;

    margin-top: 16px;

    align-items: center;

}



/* Quantity box */

.quantity-box {

    position: relative;

    display: flex;

    align-items: center;

    border: 1.5px solid #e0e0e0;

    border-radius: 12px;

    overflow: hidden;

    width: 120px;

    flex-shrink: 0;

    background: #fff;

    height: 46px;

}



.quantity-box input[type="number"] {

    width: 36px;

    text-align: center;

    font-size: 14px;

    font-weight: 700;

    color: #1a1a1a;

    padding: 0 !important;

    border: none !important;

    background: transparent;

    margin: 0;

    -moz-appearance: textfield;

    outline: none;

}



.quantity-box input[type="number"]::-webkit-inner-spin-button,

.quantity-box input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }



.quantity-box span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 100%;

    font-size: 20px;

    font-weight: 300;

    color: #1a1a1a;

    cursor: pointer;

    user-select: none;

    background: transparent;

    border: none !important;

    border-radius: 0 !important;

    transition: background .15s;

    line-height: 1 !important;

    padding: 0 !important;

    margin: 0 !important;

}



.quantity-box span.btn-minus {

    border-right: 1.5px solid #e0e0e0 !important;

    font-size: 22px;

    border-radius: 0 !important;

    background: transparent !important;

}



.quantity-box span.btn-plus {

    border-left: 1.5px solid #e0e0e0 !important;

    border-radius: 0 !important;

    background: transparent !important;

}



.quantity-box span:hover { background: #f5f5f5 !important; }



/* CTA button */

.utopia-fast-bottom-set button.button.alt {

    flex: 1;

    border-radius: 12px !important;

    background: var(--ufc-btn-color, #1a1a1a) !important;

    color: #fff !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    letter-spacing: 0.03em;

    padding: 13px 16px !important;

    border: none !important;

    cursor: pointer;

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 8px;

    animation: shakeCart 2.5s ease-in-out infinite;

    transition: background .2s, transform .15s, box-shadow .2s;

    box-shadow: 0 4px 14px rgba(0,0,0,0.18);

    width: auto !important;

    margin: 0 !important;

    height: 46px;

    position: relative !important;

    left: auto !important;

    bottom: auto !important;

}



.utopia-fast-bottom-set button.button.alt:hover {

    background: var(--ufc-btn-hover-color, #c39348) !important;

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

    animation: none;

    transform: translateY(-1px);

}



.utopia-fast-bottom-set button.button.alt:active { transform: translateY(0); }



/* ── Terms ── */

#utopia-fast-checkout .terms {

    font-size: 11px;

    color: #aaa;

    margin: 10px 0 4px;

    text-align: center;

    line-height: 1.5;

}



/* ── Single product quantity label ── */

#utopia-fast-checkout .quantity label,

.single-product .summary .quantity label { display: none !important; }



/* ── Feedback message ── */

.fast-checkout-message {

    margin-top: 12px !important;

}



#utopia-fast-checkout .fast-checkout-message .ufc-msg {

    display: flex !important;

    align-items: flex-start !important;

    gap: 10px !important;

    padding: 11px 14px !important;

    border-radius: 10px !important;

    font-size: 13.5px !important;

    font-weight: 500 !important;

    line-height: 1.5 !important;

    margin: 0 !important;

    box-shadow: none !important;

    text-align: left !important;

    animation: fadeIn 0.25s ease-out;

}



#utopia-fast-checkout .fast-checkout-message .ufc-msg.ufc-error {

    background: #fff5f5 !important;

    border: 1.5px solid #fed7d7 !important;

    color: #c53030 !important;

}



#utopia-fast-checkout .fast-checkout-message .ufc-msg.ufc-success {

    background: #f0fff4 !important;

    border: 1.5px solid #9ae6b4 !important;

    color: #276749 !important;

}



#utopia-fast-checkout .fast-checkout-message .ufc-msg-icon {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

    width: 20px !important;

    height: 20px !important;

    border-radius: 50% !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    color: #fff !important;

    margin-top: 1px !important;

}



#utopia-fast-checkout .fast-checkout-message .ufc-error .ufc-msg-icon {

    background: #e53e3e !important;

}



#utopia-fast-checkout .fast-checkout-message .ufc-success .ufc-msg-icon {

    background: #38a169 !important;

}



/* ── Popup overlay ── */

.check_ui_popop_after_submit {

    display: none;

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0,0,0,0.55);

    z-index: 9999;

    justify-content: center;

    align-items: center;

    backdrop-filter: blur(3px);

}



.popup-body {

    width: 100%; height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.check_ui_popop_after_submit .popup-content {

    background: #fff;

    padding: 32px 36px;

    border-radius: 20px;

    text-align: center;

    max-width: 400px;

    width: 90%;

    box-shadow: 0 20px 50px rgba(0,0,0,0.2);

    animation: popupScale 0.3s cubic-bezier(0.34,1.56,0.64,1);

}



@keyframes popupScale {

    from { transform: scale(0.75); opacity: 0; }

    to   { transform: scale(1);    opacity: 1; }

}



.check_ui_popop_after_submit .popup-content h3 { margin-top: 0; font-size: 22px; color: #1a1a1a; }

.check_ui_popop_after_submit .popup-content p  { font-size: 15px; color: #555; margin: 10px 0 24px; }

.check_ui_popop_after_submit .popup-content .close-btn {

    background: #1a1a1a;

    color: #fff;

    border: none;

    padding: 12px 24px;

    border-radius: 10px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    transition: background .2s;

}

.check_ui_popop_after_submit .popup-content .close-btn:hover { background: #c39348; }



/* ── Responsive ── */

@media (max-width: 600px) {

    .form-input-box { grid-template-columns: 1fr; gap: 8px; }

    .quantity-box   { width: 110px; }

    .utopia-fast-bottom-set button.button.alt { font-size: 13px !important; }

}



@media (max-width: 340px) {

    .quantity-box { width: 105px; }

    .utopia-fast-bottom-set { gap: 8px; }

}