/**
 * Promo Coupon Display Module Styles
 * File: views/css/promocoupon.css
 */

/* Main container */
.promo-coupon-block {
    margin: 20px 0;
    padding: 0;
    width: 100%;
}

/* Promo container with gradient background */
.promo-coupon-container {
    background: linear-gradient(135deg, #332512 0%, #43321d 100%);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    color: #ffffff;
    max-width: max-content;
    font-size: 0.875rem;    line-height: 1.4em;
}

.promo-coupon-container a {
    color:white;
    text-decoration: underline;
    font-weight: 600;
}

.promo-coupon-container p {
    font-size: 0.875rem;
    margin-bottom: 0; 
}

.promo-coupon-container small {
    font-size: 0.675rem;
    line-height: 1.4em;
    display: block;
    position: relative;
    left: 6px;
}
.promo-coupon-container small::before {
    content: "*";
    position: absolute;
    left: -8px;
    top: 2px;
}
.promo-coupon-container .price {
    font-weight: 800;
  } 
span.old-price {
    text-decoration: line-through;
    font-weight: normal;
}   

.promo-code-wrapper {
    display: flex;
    align-items: stretch;
    margin: 16px 0;
}
.promo-coupon-content .product a {
    margin-bottom: 0.25rem;
    display: block;
}
.promo-message span.material-symbols-outlined {
    font-size: 1rem;
    position: relative;
    bottom: -3px;
}

/* Promo code display */
.promo-code {
    background: #ffffff;
    color: #332512;
    min-height: 48px;
    border-radius: 1.75rem 0 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .75rem 0 1.25rem;
}

.copy-code-btn {
    border-radius: 0 1.75rem 1.75rem 0;
    background: linear-gradient(45deg, #89765b, #9d7d4f);
    font-size: 0.875rem;
    min-height: 48px;
    min-width: 154px;
}

.copy-code-btn:hover {
    background: linear-gradient(45deg, #a18e73, #b3a086);
}


.promo-coupon-block img {
    border-radius: 0.5rem;
}

/* Referral note on the promoted product - same skin, no product teaser, so the
   code sits closer to the message. */
.promo-coupon-block--referral .promo-code-wrapper {
    margin-bottom: 0.75rem;
}

.promo-coupon-block--referral .old-price {
    color: #d8cec0;
}

@media (max-width:650px) {
    .promo-code-wrapper {
        margin-top: 0;
    }
}