/* Variables */
:root {
    /* Spaces */
    --space-step: 1rem;
    --xsm-space: calc(var(--space-step) * 1.25);
    --small-space: calc( var(--space-step) * 1.5 );
    --regular-space: calc( var(--space-step) * 2 );
    --large-space: calc( var(--space-step) * 3 );
    --huge-space: calc( var(--space-step) * 5 );
    --extra-huge-space: calc( var(--space-step) * 6 );

    /* Colors */
    --color-main-dark: #033A35;
    --c-m-d-rgb: 3, 58, 53;
    --color-main-dark-hover: #3D655D;
    --color-main-light: #FDF6E3;
    --color-light: #ECDCBB;
    --c-l-rgb: 236, 220, 187;
    --color-second-dark: #1F2E43;
    --color-black: #000000;
    --color-black-2: #333333;
    --color-white: #ffffff;
    --color-primary-btn: rgba(194, 165, 123, 1); /* Hex #C2A57B*/
    --c-p-btn-h: rgba(194, 165, 123, 0.2); /* Hex #C2A57B*/
    --color-light-text: rgba(194, 165, 123, .6);
    --color-light-text-lighter: rgba(194, 165, 123, .5);
    --color-secondary-dark: rgba(61, 101, 93, 1);
    --color-secondary-dark-lighter: rgba(61, 101, 93, .6);
    --color-medication-card-bg: rgba(194, 165, 123, .1);

    /* Font Sizes */
    --font-size-text: 1rem;
    --font-size-small-text: calc( var(--font-size-text) * 0.875 );
    --fs-highlight-text: calc(var(--font-size-text) * 1.375 );
    --font-size-small-title: calc( var(--font-size-text) * 1.5 );
    --font-size-text-large: calc( var(--font-size-text) * 2.5 );
    --font-size-title: calc( var(--font-size-text) * 3 );
    --font-size-huge-text: calc( var(--font-size-text) * 5.25 );
    --font-size-large-text: calc( var(--font-size-text) * 3.25 );
    --font-size-huge-title: calc( var(--font-size-text) * 5.125 );
    --fs-w-section-ttl: calc( var(--font-size-text) * 4 );
    --fs-large-title: calc( var(--font-size-text) * 4.5 );

    @media screen and (max-width: 767px) {
        --small-space: calc( var(--space-step) * 1 );
        --regular-space: calc( var(--space-step) * 1.5 );
        --huge-space: calc( var(--space-step) * 2.5 );
        --extra-huge-space: calc( var(--space-step) * 3 );

        --font-size-huge-title: calc( var(--font-size-text) * 3.125 );
        --font-size-huge-text: calc( var(--font-size-text) * 3.25 );
        --font-size-large-text: calc( var(--font-size-text) * 2.25 );
        --font-size-small-title: calc( var(--font-size-text) * 1.25 );
        --font-size-title: calc( var(--font-size-text) * 2 );
    }
}

.padding-0 {
    padding: 0;
}

.margin-0 {
    margin: 0;
}

.button {
    padding: 11px;
    border: 1px solid var(--color-main-dark);
    font-family: 'Open Sans', sans-serif;
    color: var(--color-main-dark);
    text-transform: uppercase;
    font-size: calc( var(--font-size-text) * 1.125);
    transition: all .3s ease;

    &:hover {
        background-color: var(--color-main-dark);
        color: var(--color-white);
    }
}

/* Reusable short styles */
.hidden-text {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

body:is(.page-template-opusmeds_home_page) #main-content .container {
    padding-top: 0;
}

/* Modal bg */
.mfp-bg {
    background: rgba(11, 11, 11, .8);
}

.section {
    position: relative;
    z-index: 2;
    padding-bottom: var(--huge-space);

    &:first-child {
        padding-top: var(--huge-space);
    }

    &.full-width-slider:first-child {
        padding-top: 0;
    }

    .container {
        width: 90%;
    }
}

.et_pb_button:after {
    top: 50%;
    transform: translateY(-50%);
}

.swiper-pagination-bullet-active {
    background: var(--color-main-dark);
}

.section-title {
    color: var(--color-second-dark);
    font-size: var(--font-size-text-large);
    text-align: center;
    padding-bottom: var(--huge-space);
}

body.site_mode_women .section-title {
    color: #033A35;
    font-weight: 700;
}

#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FDF6E3;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999910;
}

.spinner {
  width: 80px;
  height: 80px;
  border: 7px solid var(--color-light-text-lighter);
  border-top: 7px solid var(--color-main-dark);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.dcp_mini_cart_module .dcp_mini_cart_wrapper {
    padding: 15px;
    background-color: var(--color-white);
}

.switch-mode-btn {
    color: var(--color-white);
    background-color: var(--color-main-dark);
    border: none;
    padding: 6px var(--space-step);
    padding-right: calc(var(--space-step) + 4px);
    cursor: pointer;
    transition: .3s ease-in-out;
    font-size: var(--font-size-small-title);
    font-weight: 500;
    text-transform: uppercase;

    svg {
        margin-left: 0.5rem;
        transition: .4s linear;

        path {
            fill: var(--color-white);
            transition: .3s ease-in-out;
        } 
    }

    &:hover {
        opacity: 0.9;
        svg {
            transform: translateX(6px);
        }
    }
}