/* ============================================================================
   NEW STYLING CSS - Template2 Theme System
   ============================================================================
   
   PURPOSE:
   This stylesheet provides styling for the "Template2" theme system used by
   specific retailers (e.g., Sams Club/Confident Remodels). It uses CSS custom
   properties (variables) prefixed with --template2-* for theming.
   
   USAGE:
   - Loaded conditionally via BundleConfig.cs for specific retailers
   - Currently NOT loaded for Wayfair (commented out in bundle config)
   - Works in conjunction with reskin CSS files that define the CSS variables
   
   ARCHITECTURE:
   - Uses CSS custom properties for dynamic theming
   - Provides utility classes that map to template2 variables
   - Includes mobile stepper/pizza tracker navigation component
   - Overrides default Bootstrap/component styles for Template2 look
   
   ============================================================================ */


/* ============================================================================
   SECTION 1: CSS VARIABLE MAPPING - Template2 Utility Classes
   ============================================================================
   These classes map to CSS custom properties defined in reskin files.
   They provide semantic naming for Template2 color scheme and styling.
   ============================================================================ */

/* Text Message Components */
.txt-message-url {
    color: var(--template2-PrimaryColor);
}

.txt-message-sms-image {
    width: 45px;
    height: auto;
    margin: auto;
}

@media (max-width: 767px) {
    .txt-message-sms-image {
        width: 30px;
    }
}

/* Base Body Background */
body {
    background-color: var(--template2-DefaultBackgroundColor);
}

/* Border Color Utilities */
.template2-HeaderVerticalLineColor {
    border-color: var(--template2-HeaderVerticalLineColor);
}

.template2-ContentBorderColor {
    border-color: var(--template2-ContentBorderColor);
}

.template2-StepBorderColor {
    border-color: var(--template2-LineUnderContentColor);
}

.template2-MeasurementBorderColor {
    border-color: var(--template2-MeasurementBorderColor);
}

.template2-ImageBorderColor {
    border-color: var(--template2-ImageBorderColor);
}

/* Background Color Utilities */
.template2-MainDescBackgroundColor {
    background-color: var(--template2-SecondaryBackgroundColor);
}

.template2-ThirdBackgroundColor {
    background-color: var(--template2-ThirdBackgroundColor);
}

.template2-ZipCodeBackgroundColor {
    background-color: var(--template2-ZipCodeBackgroundColor);
}

.template2-ImageBackgroundColor {
    background-color: var(--template2-ImageBackgroundColor);
}

.template2-TitleBackgroundColor {
    background-color: var(--template2-QuoteSectionTitleBackgroundColor);
}

.template2-DefaultBackgroundColor {
    background-color: var(--template2-DefaultBackgroundColor);
}

/* Text Color Utilities */
.template2-PrimaryTextColor {
    color: var(--template2-PrimaryColor);
}

.template2-HeaderTextColor {
    color: var(--colorHeaderText-reskin);
}

.template2-SecondaryTextColor {
    color: var(--template2-SecondaryColor);
}

.template2-ThirdTextColor {
    color: var(--template2-ThirdColor);
}

.template2-TextRedColor {
    color: var(--template2-RedColor);
}

.template2-StepIconColor {
    color: var(--template2-LineUnderContentColor);
}

.newStylig-PriceColor {
    color: var(--template2-PriceColor);
}

.template2-QuotePriceColor {
    color: var(--template2-LineUnderContentColor);
}

.template2-QuotePromoColor {
    color: var(--template2-QuotePromoColor);
}

.template2-quantityBtnColor {
    color: var(--template2-LineUnderContentColor);
}

/* Decorative Elements */
.template2-StrangeDots {
    width: 160px;
    height: 270px;
    background-color: var(--template2-ThirdBackgroundColor);
    background-image: radial-gradient(var(--template2-PrimaryColor) 2px, transparent 4px);
    background-size: 15px 15px;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.template2-LineUnderContentColor {
    background-color: var(--template2-LineUnderContentColor);
}

.template2-colors-border {
    border-color: var(--template2-DefaultBackgroundColor);
}

/* ============================================================================
   SECTION 2: BASE LAYOUT & STRUCTURE
   ============================================================================
   Core layout components: header, footer, main container
   ============================================================================ */

#header {
    max-height: max-content;
    background-color: var(--template2-PrimaryBackgroundColor);
}

.main-container {
    min-height: 90%;
}

.footer, .footer a, .footer .copyright p {
    background-color: var(--template2-PrimaryBackgroundColor);
    color: var(--template2-PrimaryColor);
}


/* ============================================================================
   SECTION 3: LINKS & NAVIGATION
   ============================================================================
   Link states, dropdown menus, navigation components
   ============================================================================ */

/* Non-active link states - prevents color changes on interaction */
a.a-nonactive:visited,
a.a-nonactive:hover,
a.a-nonactive:active,
a.a-nonactive:focus {
    color: inherit;
}

/* Dropdown Menu Styling */
.dropdown-menu > li > a:hover {
    background-color: var(--template2-SecondaryBackgroundColor);
    color: var(--template2-SecondaryColor);
}

.dropdown > a:focus {
    outline: none;
}

.dropdown-menu {
    left: auto;
}

/* Full-width Navigation Bar Reset */
.full-width-navigationbar-reskin {
    position: static;
    height: unset;
    width: unset;
    transform: unset;
}

/* Navigation Checkmark Icon */
.checkmark-navigationbar:before {
    content: '\2713';
    color: var(--template2-PrimaryColor);
    font-weight: bold;
}


/* ============================================================================
   SECTION 4: FORM ELEMENTS & INPUTS
   ============================================================================
   Form controls, validation, measurement inputs, dropdowns
   ============================================================================ */

/* Form Validation */
.field-validation-error {
    color: red;
}

/* Measurement Input Fields */
.ths-measurements-wrapper input[type="text"] {
    background-color: var(--template2-DefaultBackgroundColor);
    width: 60px;
    font-size: inherit !important;
    height: auto !important;
}

/* Dropdown/Select Styling */
.dropdown-select-reskin {
    padding-right: 50px;
}

.sort-items-reskin {
    margin: 0;
}

    .sort-items-reskin:after {
        padding-right: 0;
    }

.template2-dropdown-select-reskin {
    padding-right: 50px;
    height: 44px;
    color: var(--colorDarkGrey-reskin);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: normal;
    padding-left: 15px;
}


/* ============================================================================
   SECTION 5: BUTTONS & ACTIONS
   ============================================================================
   Button styles, continue buttons, payment buttons, disabled states
   ============================================================================ */

.template2-continueButton {
    background-color: var(--template2-ContinueButtonBgColor);
    border-color: var(--template2-BtnBorderColor);
    color: var(--template2-PrimaryColor);
}

button.button-popup-next-reskin {
    background-color: var(--template2-ContinueButtonBgColor) !important;
    color: var(--template2-PrimaryColor);
}

.template2-assortmentContinueButton {
    background-color: var(--template2-LineUnderContentColor);
    color: var(--template2-PrimaryColor);
}

a.template2-assortmentContinueButton:hover {
    text-decoration: none !important;
    color: var(--template2-PrimaryColor);
}

    .template2-assortmentContinueButton[disabled] {
        opacity: 70%;
    }

.template2-MakePaymentBtn {
    color: var(--template2-PrimaryColor);
    background-color: var(--template2-MakePaymentBackgroundColor);
}

.template2-QuoteBtn {
    color: var(--template2-SecondaryColor);
    background-color: var(--template2-LightGray);
}

.template2-ApplyFinancingButton {
    color: var(--template2-PrimaryColor);
    background-color: var(--template2-FinancingBtnBackgroundColor);
}

.template2-CancelBtn {
    color: var(--template2-LineUnderContentColor);
    background-color: inherit;
    border-color: var(--template2-LineUnderContentColor);
}

.template2-greyed-out-btn {
    background: var(--template2-GreyedBtnColor);
    border: 1px solid var(--template2-GreyedBtnColor);
}

.greyed-out-template2 {
    background-color: var(--template2-LightGray) !important;
}

/* Toggle Button Rotation */
.new-styling-toggle-section-btn-rotate {
    transform: rotate(180deg);
}


/* ============================================================================
   SECTION 6: MODALS & POPUPS
   ============================================================================
   Modal dialogs, popup styling, close buttons
   ============================================================================ */

.modal-header {
    display: flex;
    justify-content: end;
}

    .modal-header > .icon-x-reskin {
        color: var(--template2-SecondaryColor);
        border-color: var(--template2-SecondaryColor);
    }


/* ============================================================================
   SECTION 7: CAROUSEL & SLIDER COMPONENTS
   ============================================================================
   Slick carousel arrows, slider sections, option lists
   ============================================================================ */

/* Slick Carousel Arrow Styling */
.slick-arrow:before {
    font-size: 32px;
    border-radius: 20px;
    padding: 4px 3px 0 2px;
    background-color: var(--template2-LineUnderContentColor);
}

.slick-arrow:focus:before,
.slick-arrow:hover:before {
    opacity: 0.75;
}

.slick-prev {
    left: -62px;
    top: 45%;
}

.slick-next {
    right: -16px;
    top: 45%;
}

@media (max-width: 767px) {
    .slick-prev {
        left: -47px;
    }

    .slick-next {
        right: -27px;
    }
}

/* Slider Section Visibility Toggle */
#slider-section-hidden, #slider-section-show {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
}

/* Option List Borders */
.option-list {
    border-top: 0;
    border-bottom: 0;
}


/* ============================================================================
   SECTION 8: ASSORTMENT & PRODUCT SELECTION
   ============================================================================
   Product cards, active states, measurement sections, images
   ============================================================================ */

#assortmentsDataId {
    border: none;
}

.option-item.active, .template2-MeasurementSection {
    border-color: var(--template2-LineUnderContentColor);
    background-color: var(--template2-AssortmentHighlightColor);
}

.flex-col-1, .template-2 .flex-col-1,
.template-2 .tile-card-assortment.flex-col-1 {
    flex: 1 1 calc(100% - 20px);
    max-width: 100%;
}

.flex-col-2, .template-2 .flex-col-2,
.template-2 .tile-card.flex-col-2, .template-2 .tile-card-assortment.flex-col-2 {
    flex: 1 1 calc(50% - 20px);
    max-width: 50%;
}

@media(max-width: 768px) {
    .radio-multiple-question-2.md-flex-col-1 {
        flex: 1 1 calc(100% - 20px);
        max-width: 100%;
    }
}

.template-2.tiles-container {
    gap: 30px;
}

.template-2 > .tile-card {
    flex: 1 1 calc(100% - 20px);
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    align-content: center;
    padding: 15px;
    border-radius: 30px;
}

    .template-2 > .tile-card > .tile-image > img {
        max-width: 180px;
    }

.template-2 .tile-card-selected::after {
    top: 10px;
    right: 10px;
}

.template-2.radio-multiple-option-2-container {
    flex-wrap: wrap;
}

    .template-2.radio-multiple-option-2-container .tile-card-assortment,
    .template-2.radio-multiple-option-2-container .tile-card-assortment-multiple {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 5px 20px;
        border-radius: 30px;
    }

    .template-2.radio-multiple-option-2-container img {
        max-height: 150px;
        max-width: 140px;
    }

    .template-2.radio-multiple-option-2-container .tile-card-selected::after {
        top: 10px;
        right: 10px;
    }

.template-2.radio-multiple-container {
    flex-direction: column;
    gap: 20px;
}

    .template-2.radio-multiple-container img {
        max-height: 100px;
        width: auto;
    }

    .template-2.radio-multiple-container .tile-card-yn-assortment {
        flex-direction: row;
        padding: 5px 20px;
        border-radius: 20px;
    }


/* ============================================================================
   SECTION 9: QUOTE & PAYMENT SECTION
   ============================================================================
   Quote summary, financing options, payment buttons, pricing
   ============================================================================ */

.template2-FinancingAvailable {
    color: var(--template2-FinancingTextColor);
    background-color: var(--template2-FinancingBackgroundColor);
}


/* ============================================================================
   SECTION 10: TABS & CONTENT AREAS
   ============================================================================
   Tab content, content sections
   ============================================================================ */

.tab-content {
    min-height: 0 !important;
}


/* ============================================================================
   SECTION 11: MOBILE STEPPER / PIZZA TRACKER NAVIGATION
   ============================================================================
   Mobile step indicator component showing wizard progress.
   Displays as horizontal stepper with circles and connecting lines.
   ============================================================================ */

.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

    /* Step Counter Circle */
    .stepper-item .step-counter {
        position: relative;
        z-index: 5;
        border: 2px solid var(--template2-MobilePizzaTracker);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--template2-MobilePizzaTracker);
        color: var(--template2-MobilePizzaTrackerIcons);
    }

    /* Connecting Line Before Step */
    .stepper-item::before {
        position: absolute;
        content: "";
        border-bottom: 2px solid var(--template2-MobilePizzaTracker);
        width: 100%;
        top: 20px;
        left: -50%;
        z-index: 2;
    }

    /* Connecting Line After Step */
    .stepper-item::after {
        position: absolute;
        content: "";
        border-bottom: 2px solid var(--template2-MobilePizzaTracker);
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 2;
    }

    /* Remove line before first step */
    .stepper-item:first-child::before {
        content: none;
    }

    /* Remove line after last step */
    .stepper-item:last-child::after {
        content: none;
    }

/* Active Step State */
.nav-active > .step-counter {
    border: 2px solid var(--template2-MobilePizzaTrackerCompleted);
    background-color: var(--template2-MobilePizzaTracker);
}

.stepper-item.nav-active {
    font-weight: bold;
}

.nav-active > .step-counter > i {
    color: var(--template2-MobilePizzaTrackerCompleted);
}

/* Completed Step State */
.stepper-item.nav-completed .step-counter {
    background-color: var(--template2-MobilePizzaTrackerCompleted);
    border-color: var(--template2-MobilePizzaTrackerCompleted);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-content: center;
}

.stepper-item.nav-completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--template2-MobilePizzaTrackerCompleted);
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

.stepper-item.nav-completed:last-child::after {
    content: none
}


/* Checkmark Icon Rotation */
.fa-check {
    transform: rotate(225deg);
}


/* Desktop-first (default) */
.stepper-mobile {
    display: none;
}

.stepper-desktop {
    display: block;
}

/* Mobile */
@media (max-width: 1001px) {
    .stepper-mobile {
        display: block;
    }

    .stepper-desktop {
        display: none;
    }
}



/* ============================================================================
   SECTION 12: UTILITY CLASSES & HELPERS
   ============================================================================
   Text colors, pseudo-elements, miscellaneous utilities
   ============================================================================ */

.text-white:before {
    color: #ffffff;
}

.legend-border,
.additional-information-image-container {
    margin-top: 12.5px;
    border-radius: 0.75rem !important;
}

    .additional-information-image-container img {
        border-radius: 0.75rem !important;
    }

@media(min-width:768px) {
    .legend-border,
    .additional-information-image-container {
        margin-top: 0px;
    }

    .legend-border {
        border-right: none !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    .additional-information-image-container,
    .additional-information-image-container img {
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

    .last-table-row-bottom-border {
        border-bottom-width: 2px;
    }
}