/* Domain Promo Boxes Custom Backgrounds */
.domain-promo-box.domain-promo-hosting {
    background: url('../assets/img/domain-register-paket-1.svg') no-repeat center center;
    background-size: cover;
    position: relative;
    border: none;
    box-shadow: 0 18px 36px rgba(5, 30, 84, 0.3);
    overflow: hidden;
    color: #fff !important;
    border-radius: 16px;
}

.domain-promo-box.domain-promo-transfer {
    background: url('../assets/img/domain-register-paket-2.svg') no-repeat center center;
    background-size: cover;
    position: relative;
    border: none;
    box-shadow: 0 18px 36px rgba(5, 30, 84, 0.3);
    overflow: hidden;
    color: #fff !important;
    border-radius: 16px;
}

/* Ensure text and icons are white */
.domain-promo-box.domain-promo-hosting h3,
.domain-promo-box.domain-promo-hosting p,
.domain-promo-box.domain-promo-transfer h3,
.domain-promo-box.domain-promo-transfer p,
.domain-promo-box.domain-promo-hosting i,
.domain-promo-box.domain-promo-transfer i {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Add subtle shadow for better readability */
}

/* .domain-promo-box.domain-promo-hosting i,
.domain-promo-box.domain-promo-transfer i{
    color: #27509f !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
} */

/* Override Bootstrap text colors */
.domain-promo-box.domain-promo-hosting .text-warning,
.domain-promo-box.domain-promo-transfer .text-primary {
    color: #ffffff !important;
}

/* Add overlay to ensure text readability if needed, though user didn't ask explicitly, it's safer */
.domain-promo-box.domain-promo-hosting::before,
.domain-promo-box.domain-promo-transfer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.4); */
    /* Dark overlay */
    z-index: 0;
}

/* Ensure content is above overlay*/
.domain-promo-box.domain-promo-hosting>*,
.domain-promo-box.domain-promo-transfer>* {
    position: relative;
    z-index: 1;
}

/* Button styling - Requirements: White background, theme text color */
.domain-promo-box.domain-promo-hosting .btn,
.domain-promo-box.domain-promo-transfer .btn {
    background: #27509f !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.domain-promo-box.domain-promo-hosting .btn:hover,
.domain-promo-box.domain-promo-transfer .btn:hover {
    background: #f8f9fa !important;
    color: #0f3f8c !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Fix shadows below 1220px - User Request */
@media (max-width: 1220px) {

    .domain-promo-box.domain-promo-hosting,
    .domain-promo-box.domain-promo-transfer {
        box-shadow: 0 5px 15px rgba(5, 30, 84, 0.1) !important;
    }
}