/* Country Pies Gift Vouchers - customer-facing product styling.
   This file is only enqueued on configured gift voucher product pages. */

body.single-product div.product form.cart .cpgv-recipient-fields,
.cpgv-recipient-fields{
    clear:both;
    box-sizing:border-box;
    margin:22px 0 20px;
    padding:20px;
    border:1px solid #dfb72f;
    border-radius:10px;
    background:#8b1026;
    color:#ffffff;
    box-shadow:0 2px 12px rgba(0,0,0,.18);
}

.cpgv-recipient-fields *,
.cpgv-recipient-fields *::before,
.cpgv-recipient-fields *::after{box-sizing:border-box}

.cpgv-recipient-fields h3{
    margin:0 0 10px;
    color:#dfb72f!important;
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:1.15;
    font-size:clamp(1.25rem,2vw,1.65rem);
}

.cpgv-recipient-intro,
.cpgv-recipient-fields p,
.cpgv-recipient-fields label,
.cpgv-recipient-fields .optional,
.cpgv-recipient-fields .description{
    color:#ffffff!important;
}

.cpgv-recipient-intro{
    margin:0 0 16px;
    line-height:1.5;
}

.cpgv-recipient-fields .form-row{
    margin:0 0 15px;
    padding:0;
}

.cpgv-recipient-fields label{
    display:block;
    margin:0 0 6px;
    font-weight:700;
    line-height:1.3;
}

.cpgv-recipient-fields .required{
    color:#dfb72f!important;
    text-decoration:none;
}

.cpgv-recipient-fields input.input-text,
.cpgv-recipient-fields textarea.input-text,
.cpgv-recipient-fields input[type="text"],
.cpgv-recipient-fields input[type="email"],
.cpgv-recipient-fields textarea{
    display:block;
    width:100%;
    min-height:44px;
    margin:0;
    padding:10px 12px;
    border:1px solid rgba(223,183,47,.95);
    border-radius:5px;
    background:#fffaf0!important;
    color:#200b05!important;
    line-height:1.35;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}

.cpgv-recipient-fields textarea{
    min-height:96px;
    resize:vertical;
}

.cpgv-recipient-fields input.input-text::placeholder,
.cpgv-recipient-fields textarea.input-text::placeholder{
    color:#6f5b4a!important;
    opacity:1;
}

.cpgv-recipient-fields input.input-text:focus,
.cpgv-recipient-fields textarea.input-text:focus,
.cpgv-recipient-fields input[type="text"]:focus,
.cpgv-recipient-fields input[type="email"]:focus,
.cpgv-recipient-fields textarea:focus{
    outline:2px solid #dfb72f;
    outline-offset:2px;
    border-color:#dfb72f;
    background:#ffffff!important;
    color:#200b05!important;
}

/* Keep Safari/Chrome autofill readable on macOS/iOS. */
.cpgv-recipient-fields input:-webkit-autofill,
.cpgv-recipient-fields input:-webkit-autofill:hover,
.cpgv-recipient-fields input:-webkit-autofill:focus,
.cpgv-recipient-fields textarea:-webkit-autofill,
.cpgv-recipient-fields textarea:-webkit-autofill:hover,
.cpgv-recipient-fields textarea:-webkit-autofill:focus{
    -webkit-text-fill-color:#200b05!important;
    -webkit-box-shadow:0 0 0 1000px #fffaf0 inset!important;
    caret-color:#200b05!important;
}

/* Voucher product value/variation controls. Scoped by enqueue: this CSS only loads on voucher products. */
body.single-product div.product form.cart .variations,
body.single-product div.product form.cart .variations tbody,
body.single-product div.product form.cart .variations tr,
body.single-product div.product form.cart .variations td,
body.single-product div.product form.cart .variations th{
    border-color:rgba(223,183,47,.45);
}

body.single-product div.product form.cart .variations label,
body.single-product div.product form.cart .variations .label{
    color:#dfb72f!important;
    font-weight:700;
}

body.single-product div.product form.cart .variations select{
    min-height:42px;
    border:1px solid rgba(223,183,47,.95);
    border-radius:5px;
    background:#fffaf0!important;
    color:#200b05!important;
}

body.single-product div.product form.cart .reset_variations{
    color:#dfb72f!important;
}

body.single-product div.product form.cart .single_add_to_cart_button,
body.single-product div.product form.cart button.single_add_to_cart_button.button{
    background:#dfb72f!important;
    color:#200b05!important;
    border:0!important;
    border-radius:5px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
}

body.single-product div.product form.cart .single_add_to_cart_button:hover,
body.single-product div.product form.cart .single_add_to_cart_button:focus{
    filter:brightness(1.04);
    transform:translateY(-1px);
}

@media (max-width:768px){
    body.single-product div.product form.cart .cpgv-recipient-fields,
    .cpgv-recipient-fields{
        margin:18px 0;
        padding:16px;
        border-radius:8px;
    }
}


/* v1.0.4: clear voucher redemption guidance across the product page,
   mini-basket and classic WooCommerce checkout. */
.cpgv-redemption-note{
    margin:0 0 16px;
    padding:10px 12px;
    border-left:4px solid #dfb72f;
    background:rgba(255,255,255,.09);
    color:#fff!important;
    line-height:1.45;
}

.cpgv-checkout-redemption{
    box-sizing:border-box;
    margin:0 0 24px;
    padding:18px 20px;
    border:1px solid #dfb72f;
    border-radius:8px;
    background:#fffaf0;
    color:#200b05;
}

.cpgv-checkout-redemption h2{
    margin:0 0 8px;
    color:#8b1026!important;
    font-size:1.35rem;
    line-height:1.2;
}

.cpgv-checkout-redemption p{
    margin:0 0 12px;
    color:#200b05!important;
    line-height:1.45;
}

.cpgv-checkout-coupon-form{
    display:flex;
    align-items:stretch;
    gap:10px;
    margin:0;
}

.cpgv-checkout-coupon-form input.input-text{
    flex:1 1 260px;
    min-width:0;
    min-height:44px;
    margin:0;
    padding:10px 12px;
    border:1px solid #b8982b;
    border-radius:5px;
    background:#fff!important;
    color:#200b05!important;
}

.cpgv-checkout-coupon-form button.button{
    flex:0 0 auto;
    min-height:44px;
    margin:0!important;
    padding:10px 18px!important;
    border:0!important;
    border-radius:5px!important;
    background:#dfb72f!important;
    color:#200b05!important;
    font-weight:700!important;
}

.cpgv-mini-cart-note{
    margin:10px 0!important;
    padding:9px 10px;
    border-left:3px solid #dfb72f;
    background:#fffaf0;
    color:#200b05!important;
    font-size:.92em;
    line-height:1.4;
}

@media (max-width:600px){
    .cpgv-checkout-redemption{
        padding:16px;
    }

    .cpgv-checkout-coupon-form{
        display:block;
    }

    .cpgv-checkout-coupon-form input.input-text,
    .cpgv-checkout-coupon-form button.button{
        width:100%;
    }

    .cpgv-checkout-coupon-form button.button{
        margin-top:10px!important;
    }
}