/* TYPOGRAPHY */
@font-face {
  font-family: 'DINNextLTPro-Bold';
  src: url('/fonts/2ECE00_0_0.eot');
  src: url('/fonts/2ECE00_0_0.eot?#iefix') format('embedded-opentype'), url('/fonts/2ECE00_0_0.woff2') format('woff2'), url('/fonts/2ECE00_0_0.woff') format('woff'), url('/fonts/2ECE00_0_0.ttf') format('truetype');
}
@font-face {
  font-family: 'DINNextLTPro-Regular';
  src: url('/fonts/2ECE00_1_0.eot');
  src: url('/fonts/2ECE00_1_0.eot?#iefix') format('embedded-opentype'), url('/fonts/2ECE00_1_0.woff2') format('woff2'), url('/fonts/2ECE00_1_0.woff') format('woff'), url('/fonts/2ECE00_1_0.ttf') format('truetype');
}
@font-face {
  font-family: 'DINNextLTPro-Light';
  src: url('/fonts/2ECE00_2_0.eot');
  src: url('/fonts/2ECE00_2_0.eot?#iefix') format('embedded-opentype'), url('/fonts/2ECE00_2_0.woff2') format('woff2'), url('/fonts/2ECE00_2_0.woff') format('woff'), url('/fonts/2ECE00_2_0.ttf') format('truetype');
}


/* ================================
   Custom Styles for easyhome Gift Claim Page
   Override Bootstrap defaults with company branding
   ================================ */

/* CSS Variables for Brand Colors */
:root {
    --primary-color: #005EA5;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #DDDDDD;
    --dark-color: #343a40;
    
    /* Brand specific colors - easyhome branding */
    --brand-primary: #158709;
    --brand-secondary: #005EA5;
    --brand-accent: #fbbf24;
    --brand-success: #10b981;
    --brand-danger: #ef4444;
    
    /* Typography */
    --font-family-primary: 'DINNextLTPro-Regular', Helvetica !important;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Spacing */
    --section-padding: 80px;

    --border-radius: 8px;
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --box-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);


    --brand-success: #158709;
    --brand-danger: #ef4444;
    --brand-warning: #f59e0b;
    --brand-info: #3b82f6;
    --brand-light: #f3f4f6;
    --brand-dark: #1f2937;
}



/* HelperStyles */
.easy-blue {
    color: var(--brand-secondary) !important;
}
.easy-blue-bg {
    background-color: var(--brand-secondary) !important;
}
.easy-green {
    background-color: var(--brand-primary) !important;
}
.easy-green-bg {
    color: var(--brand-primary) !important;
}
.lt-gray-bg {
    background-color: #DDDDDD !important;
}
.lt-gray2-bg {
    background-color: #F1F1F1 !important;
}

/* Global Overrides */


body {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--dark-color);
}

strong,
.fw-bold {
    font-family: "DINNextLTPro-Bold";
}

.legal-text {
    font-size: 0.875rem;
    color: var(--secondary-color);
}

.fs-5 {
    font-size: 1.125rem !important
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
}



/* CrossSell */

#cross-sell-banner {
    background-color: var(--brand-secondary);
    color: white;
}

#cross-sell-banner a {
    color: white;
}
#cross-sell-banner a:hover {
    font-weight: 700;
}
.notificationWrapper .h5-styling, .notificationWrapper .notification-txt, .notificationWrapper p {
    display: inline;
}
.notificationWrapper {
   padding: 0.25rem 1rem 0.25rem 0;
}
.notification-txt {
    padding-right: 10px;
}

.util-language .bt-Primary.bt-undefined.bt {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 0;
    line-height: 1.25;
    padding: 0.1rem 0.2rem 0rem 0.2rem !important;
    transition: all 0.2s ease;
    margin-left: 5px;
}
.util-language .bt-Primary.bt-undefined.bt:hover {
    scale: 1.05;
    font-weight: bold;
}
.util-language .bt-Primary.bt-undefined.bt.active {
    background-color: #FFFFFF;
    color: var(--brand-secondary);
    font-weight: bold;
}
@media screen and (max-width: 768px) {
    .notificationWrapper,
    .notificationWrapper .h5-styling,
    .notificationWrapper .bt-Primary.bt-undefined.bt {
        font-size: 0.9rem;
        line-height: 1.2;
    }
    
}



.payment-btn { text-decoration: none !important; }


/* Navigation */
/* -------------------------------------------------------- */
/* .navbar {
    padding: 2rem 0;
    box-shadow: var(--box-shadow);
    background-color: white !important;
}


#navbar .navLogo {
    height: auto;
    margin-bottom: 0;
    width: 200px;
}

@media screen and (max-width: 768px) {
    .navbar {
        padding: 1.5rem 0;
    }
    .navbar .navLogo {
        width: 160px !important
    }    
} */


.nav-link {
    font-family: 'DINNextLTPro-Bold';
}








/* Hero Section */
.hero-section {
    background: linear-gradient(65deg, #158709 0%, #80C342 100%);
    color: white;
}

.hero-section .btn-primary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    font-size: 22px;
    line-height: 1.5;
    font-weight: var(--font-weight-bold);
    padding: 12px 32px 8px 32px;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    .hero-section .btn-primary {
        font-size: 18px;
        line-height: 1.5;
        padding: 10px 32px 6px 32px;
        border-radius: var(--border-radius);
    }
}

.hero-section .container {
    position: relative;
    z-index: 1;
}




.product-background {
    padding-top: 5px;
    background: linear-gradient(0deg, #FFFFFF 50%, transparent 50%);
}
.imgTextContainer {
    background-color: #FFFFFF;;
    color: #000;
    padding-bottom: 2rem;
}
@media screen and (min-width: 992px) {
    .product-copy {
        margin-top: -120px;
    }
}



/* Callout Bar */
.callout-bar {
    margin-top: 1rem;
    background-color: #158709 !important;
}

.callout-bar p {
    font-size: 1.1rem;
}



/* Steps Section */
.step-card {
    background: white;
    /* border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease; */
    height: 100%;
}

.step-card:hover {
    transform: translateY(-4px);
    /* box-shadow: var(--box-shadow-lg); */
}

.step-number {
    font-weight: var(--font-weight-bold);
}







/* Gift Form Section */
.gift-form-wrapper {
    background: white;
    padding: 2rem;
}

.form-section-label {
    font-size: 1rem !important;
}


.product-option {
    border: 2px dotted #e5e7eb;
    position: relative;
    background-color: #FFFFFF !important;
}

.form-check-input:checked + .product-option {
    border: 2px solid var(--brand-primary);
}
.form-check-input:checked + .product-option .text-start h6 {
    font-weight: var(--font-weight-bold) !important;
    color: var(--brand-primary);
}

.prod-selected {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 2px solid #e5e7eb;
    background-color: #FFFFFF;

    position:absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.prod-selected i.fa-solid {
    display: none;
}
.form-check-input:checked ~ .product-option .prod-selected i.fa-solid {
    display: block !important;
}
.form-check-input:checked ~ .product-option .prod-selected {
    border: 2px solid var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
}

@media screen and (min-width: 768px) {
    .prod-selected {
        top: 0.5rem;
        left: 0.5rem;
        right: auto;
    }
}




/* Floating label pattern for form fields */
.form-floating-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-floating-group .form-label {
  position: absolute;
  top: 55%;
  left: 1rem;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 0.25rem;
  color: #6c757d;
  pointer-events: none;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.form-floating-group .form-control.is-invalid ~ .form-label {
  top: 37%;
}

.form-floating-group .form-control:focus ~ .form-label,
.form-floating-group .form-control:not(:placeholder-shown) ~ .form-label {
  top: 0.1rem;
  left: 1.2rem;
  font-size: 0.95rem;

  background: #fff;
  padding: 0 0.25rem;
  z-index: 1;
}

.form-floating-group .form-control {
  padding: 1.25rem 0.75rem 0.5rem 0.75rem;
  height: auto;
  transition: all 0.2s ease;
}

.form-floating-group .form-control:is(:focus) {
  margin-top: 1.5rem !important;
}

.lease-optional {
    background-image: none !important;
}



/* Product Selection Styling */
.product-selection .form-check {
    margin-bottom: 0;
}

.product-option {
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.product-option:hover {
    background-color: #e9ecef;
    border-color: var(--brand-primary) !important;
}

.product-option .form-check-input:not(:checked) ~ .form-check-label {
    background-color: rgba(30, 58, 138, 0.1);
}

.product-option .form-check-input:not(:checked) {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}





/* Form Styling */
.form-label {
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

.form-control.is-invalid {
    border-color: var(--brand-danger);
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

.form-control.is-valid {
    border-color: var(--brand-success);
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
}


.form-select {
    padding: 0.78rem 2.25rem 0.78rem .75rem;
}


.btn-primary.easy-blue-bg {
    border-color: var(--brand-secondary);
}   

#searchPostalBtn {
    width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#searchPostalBtn:hover {
    transform: none;
    box-shadow: none;
    background-color: rgb(1, 76, 133) !important;
}

#searchPostalBtn i {
    transition: all 0.3s ease;
    transform: scale(1.1);
}
#searchPostalBtn:hover i {
    transform: scale(1.3);
}



.invalid-feedback {
    color: var(--brand-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.valid-feedback {
    color: var(--brand-success);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Form Check Styling */
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

/* Form Button States */
#claimGiftBtn:disabled {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    cursor: not-allowed;
    opacity: 0.6;
}

#claimGiftBtn:not(:disabled) {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

#claimGiftBtn:not(:disabled):hover {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

/* Bootstrap Color Overrides */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    font-weight: var(--font-weight-medium);
    padding: 12px 30px;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.text-primary {
    color: var(--brand-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

/* Success/Error Messages */
.alert {
    border-radius: var(--border-radius);
    border: none;
    padding: 1rem 1.5rem;
    margin-top: 1rem;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--brand-success);
    border-left: 4px solid var(--brand-success);
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--brand-danger);
    border-left: 4px solid var(--brand-danger);
}

/* Footer */
footer {
    background-color: var(--dark-color) !important;
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--brand-accent) !important;
}

/* Placeholder Styles for Development */
.logo-placeholder {
    background-color: var(--light-color);
    border: 2px dashed var(--secondary-color);
    display: inline-block;
    text-align: center;
    line-height: 36px;
    color: var(--secondary-color);
    font-size: 12px;
}

.image-placeholder {
    background-color: var(--light-color);
    border: 2px dashed var(--secondary-color);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 14px;
}

.image-placeholder::before {
    content: 'Image Placeholder - Replace with actual image';
}

/* Responsive Design */
@media (min-width: 768px) {
    
    
    .gift-form-wrapper {
        padding: 2rem;
    }
    
    .product-option .d-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .product-image {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .gift-form-wrapper {
        padding: 1.5rem 2rem;
    }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-custom {
    box-shadow: var(--box-shadow-lg);
}





/* Accordion Overrides */


.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
    --bs-accordion-border-color: var(--primary-color);
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.75' stroke='black' stroke-width='0.5'/%3E%3Cline x1='5' y1='9.75' x2='15' y2='9.75' stroke='black' stroke-width='0.5'/%3E%3Cline x1='10.25' y1='5' x2='10.25' y2='15' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.75' stroke='black' stroke-width='0.5'/%3E%3Cline x1='5' y1='9.75' x2='15' y2='9.75' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
    --bs-accordion-btn-focus-border-color: #86b7fe;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem #005EA540;
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--primary-color);
    --bs-accordion-active-bg: none;
}

.accordion-item {
    border: none !important;
}
.accordion-item:last-child {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-item button {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
    padding: 1.25rem 0 !important;
}


.accordion-button:not(.collapsed),
.accordion-button.collapsed {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-body {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 1.25rem !important;
}

/* Custom accordion button styles */
.accordion-button.collapsed {
    /* background-color: var(--light-color); */
}
.accordion-button:not(.collapsed)::after {
    content: url(/assets/close_icon.svg) !important;
}

/* Prevent customerNum field from showing valid/invalid states */
.form-control.lease-optional.is-valid,
.form-control.lease-optional.is-invalid {
  box-shadow: none !important;
  border-color: #e5e7eb !important;
}

.form-control.lease-optional ~ .invalid-feedback,
.form-control.lease-optional ~ .valid-feedback {
  display: none !important;
}

/* Language Toggle Styles */
.language-toggle {
    display: flex;
    justify-content: center;
}

.language-switch {
    display: none;
}

html[lang="en"] .en-visible {
    display: block;
}

html[lang="fr"] .fr-visible {
    display: block;
}

/* Language Toggle Button Styling */
.util-language .bt {
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
}

/* Language-specific images */
[data-i18n-img] {
    transition: opacity 0.3s ease;
}

/* Apply a small fade effect during image transition */
/* html.transitioning [data-i18n-img] {
    opacity: 0.5;
} */

.img-fluid {
    width: 95%;
}



/* From Easyhome Footer */
.padded-container {
    padding-right: 50px !important;
    padding-left: 65px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 991.25px) {
    .padded-container {
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 768px) {
    .site-logos {
        width: 50%;
    }
    
}