* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
-webkit-text-size-adjust: none;
  text-size-adjust: none; /* For other browsers */
}

/* Default Variables */
:root {
    --font-color-main: #111;
    --button-color: #fff;
    --button-font-color: #111;
    --button-description-color: #666;
    --button-coupon-color: #fff;
    --button-coupon-font-color: #111;
    --newsletter-input-background-color: #fff;
    --newsletter-input-font-color: #111;
    --newsletter-input-button-color: #111;
    --newsletter-input-button-font-color: #fff;
    --accent-color: #111;
    --background-color-basic: #fafafa;
    --background-color-accent: #efefef;
    --profile-image-border: 4px solid #fff;
    --profile-image-radius: 50%;
    --font-family-theme: Arial, sans-serif;
    --font-family-titles: Arial, sans-serif;
    --font-family-text: Arial, sans-serif;
    --font-family-fixed: Arial, sans-serif;
    --border-radius-large-item: 10px;
    --border-radius-medium-item: 5px;
    --border-radius-small-item: 5px;
    --border-radius-favicon: 5px;
    --border-radius-square: 0px;
    --background-image: none;
    --background-overlay: rgba(255, 255, 255, 0.5);
    --background-overlay-blur: 10px;
    --spacing-basic: 16px;
    --spacing-basic-negative: -16px;
    --spacing-scrollable-grid-last-item-padding: 3px;
    --box-shadow-profile-image: rgba(0, 0, 0, 0.3) 3px 3px 6px 0px;
    --box-shadow-basic: rgba(0, 0, 0, 0.3) 1px 1px 3px 0px;
    --box-shadow-heavy: rgba(0, 0, 0, 0.4) 2px 2px 3px 0px;
    --box-shadow-heaviest:rgba(0, 0, 0, 0.4) 3px 3px 3px 0px;
    --placeholder-gradient: linear-gradient(140deg, #e2e2e2, 74%, #c2c2c2);
    --border-button: none;
    --item-overlay-background-color: rgba(0, 0, 0, 0.2);
    --item-overlay-font-color: rgba(255, 255, 255, 1);
    --animation-time: 8;
    --animation-type: swing;
    --btn-min-height: 58px;
    --favicon-background-color: transparent;
    
    --sponsored-grid-gap: 12px;
    --sponsored-min-width: 140px; /* minimum logo block width */
    
    --sponsored-min-width-medium: 160px;
    --sponsored-logo-max-width: 140px;
    --sponsored-logo-max-height: 80px;
    --sponsored-item-max-width: 160px;
    
    /* default logo size (medium) */
    --sponsored-logo-max-width: var(--sponsored-logo-max-width-medium);
    --sponsored-logo-max-height: var(--sponsored-logo-max-height-medium);
    --sponsored-item-max-width: var(--sponsored-item-max-width-medium);
    
    
    /*DARK Theme Admin UI colors - Use for for themes where the background color is DARK*/
    --dark-theme-ui-bg-hover:#00000044;
    --dark-theme-ui-border-hover:#00000044;
    --dark-theme-ui-modal-bg-hover:#ffffffee;
    --dark-theme-ui-modal-border-hover: #ccccccee;
    --light-theme-ui-inactive-opacity: 0.4;
    --light-theme-ui-inactive-opacity-hover: 0.5;
    
    /*LIGHT Theme Admin UI colors - Use for for themes where the background color is LIGHT*/
    --light-theme-ui-bg-hover:#ffffff80;
    --light-theme-ui-border-hover:#cccccc80;
    --light-theme-ui-modal-bg-hover:#ffffffee; 
    --light-theme-ui-modal-border-hover: #ccccccee;
    --light-theme-ui-inactive-opacity: 0.2;
    --light-theme-ui-inactive-opacity-hover: 0.3;
    
    /*Button Styles*/
    --button-outline-border: 2px solid;
    --button-outline-color: var(--button-color);
    --button-outline-font-color: var(--button-color);
    --button-outline-description-font-color: var(--button-color);
    --button-outline-coupon-font-color: var(--button-color);
        
    /*ADMIN UI - By default use the LIGHT THEME for Admin UI*/ 
    --ui-bg-hover: var(--light-theme-ui-bg-hover);
    --ui-border-hover: var(--light-theme-ui-border-hover); 
    --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover);
    --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover);
    
    --ui-inactive-opacity:var(--light-theme-ui-inactive-opacity);    
    --ui-inactive-opacity-hover:var(--light-theme-ui-inactive-opacity-hover);

  
}

/*ANIMATIONS*/
.animation-swing{
    --animation-type: swing;
}
.animation-pulse{
    --animation-type: pulse;
}
.animation-shake{
    --animation-type: shake;
}
.animation-bounce{
    --animation-type: bounce;
}
.animation-glow{
    --animation-type: glow;
}



/*SHAPES*/

.shapes-pill{
    --border-radius-large-item: 30px;
    --border-radius-medium-item: 30px;
    --border-radius-small-item: 5px;
    --border-radius-square: 0px;
    --border-radius-favicon: 50%;
}

.shapes-square{
    --border-radius-large-item: 0px;
    --border-radius-medium-item: 0px;
    --border-radius-small-item: 0px;
    --border-radius-square: 0px;
    --profile-image-radius: 0px;
    --border-radius-favicon: 0px;
}

.shapes-rounded{
    --border-radius-large-item: 10px;
    --border-radius-medium-item: 10px;
    --border-radius-small-item: 5px;
    --border-radius-square: 0px;
    --border-radius-favicon: 5px;
}

/*THEMES - colors*/
.colors-default{
    --font-color-main: #111;
    --button-color: #fff;
    --button-font-color: #111;
    --button-description-color: #666;
    --button-coupon-color: #fff;
    --button-coupon-font-color: #111;
    --newsletter-input-background-color: #fff;
    --newsletter-input-font-color: #111;
    --newsletter-input-button-color: #111;
    --newsletter-input-button-font-color: #fff;
    --accent-color: #111;
    --background-color-basic: #fafafa;
    --background-color-accent: #efefef;
    --profile-image-border: 4px solid #fff;
}

.colors-ocean{
    --font-color-main: #111; /* Deep ocean blue */
--button-color: #fff; /* Aquatic teal */
--button-font-color: #111;
--button-description-color: #666;
    --button-coupon-color: #fff;
    --button-coupon-font-color: #111;
    --newsletter-input-background-color: #fff;
    --newsletter-input-font-color: #111;
    --newsletter-input-button-color: #111;
    --newsletter-input-button-font-color: #fff;
--accent-color: #2a9d8f; /* Sandy yellow */
--background-color-basic: #fafafa; /* Soft sea foam white */
--background-color-accent: #efefef; /* Pastel turquoise */
--profile-image-border: 4px solid #fff; /* Coastal teal touch */
}

.colors-desert{
    --font-color-main: #3a1900; /* Deep ocean blue */
--button-color: #fff; /* Aquatic teal */
--button-font-color: #3a1900;
--button-description-color: #7d6757;
    --button-coupon-color: #fff;
    --button-coupon-font-color: #3a1900;
    --newsletter-input-background-color: #fff;
    --newsletter-input-font-color: #3a1900;
    --newsletter-input-button-color: #3a1900;
    --newsletter-input-button-font-color: #fff;
--accent-color: #8d3e00; /* Sandy yellow */
--background-color-basic: #fbf3ec; /* Soft sea foam white */
--background-color-accent: #f6e4d4; /* Pastel turquoise */
--profile-image-border: 4px solid #fff; /* Coastal teal touch */
}

.colors-forest{
    --font-color-main: #022c12; /* Deep ocean blue */
--button-color: #022c12; /* Aquatic teal */
--button-font-color: #dfeede;
--button-description-color: #a2d4b5;
    --button-coupon-color: #022c12;
    --button-coupon-font-color: #dfeede;
    --newsletter-input-background-color: #dfeede;
    --newsletter-input-font-color: #022c12;
    --newsletter-input-button-color: #022c12;
    --newsletter-input-button-font-color: #dfeede;
    
--accent-color: #1e3627; /* Sandy yellow */
--background-color-basic: #fbf3ec; /* Soft sea foam white */
--background-color-accent: #c2e9d1; /* Pastel turquoise */
--profile-image-border: 4px solid #fff; /* Coastal teal touch */
}

/*THEMES - fonts*/
.fonts-default{
    --font-family-theme: "Arial", sans-serif;
    --font-family-titles: "Arial", sans-serif;
    --font-family-text: "Arial", sans-serif;
}
.fonts-urban{
    --font-family-theme: "Monospace", sans-serif;
    --font-family-titles: "Arial", sans-serif;
    --font-family-text: "Monospace", sans-serif;
}
.fonts-timeless{
    --font-family-theme: "Montserrat", sans-serif;
    --font-family-titles: "Playfair Display", sans-serif;
    --font-family-text: "Montserrat", sans-serif;
}
.fonts-simple{
    --font-family-theme: "Roboto", sans-serif;
    --font-family-titles: "Helvetica", sans-serif;
    --font-family-text: "Roboto", sans-serif;
}
.fonts-writer{
    --font-family-theme: "Special Elite", sans-serif;
    --font-family-titles: "Ultra", sans-serif;
    --font-family-text: "Special Elite", sans-serif;
}



/* --- Logo size modifiers (update both frame + img together) --- */

        .sponsored-block-list.logo-size-small {
          --sponsored-min-width: 130px;
        
          --sponsored-logo-max-width: 120px;
          --sponsored-logo-max-height: 60px;
          --sponsored-item-max-width: 130px;
        }
        
        .sponsored-block-list.logo-size-medium {
          --sponsored-min-width: 160px;
          --sponsored-logo-max-width: 140px;
          --sponsored-logo-max-height: 80px;
          --sponsored-item-max-width: 160px;
        }
        
        .sponsored-block-list.logo-size-large {
          --sponsored-min-width: 180px;
          --sponsored-logo-max-width: 156px;
          --sponsored-logo-max-height: 90px;
          --sponsored-item-max-width: 180;
        }
        
        

/* BODY */
body {
    font-family: var(--font-family-theme);
    color: var(--font-color-main);
    line-height: 1.3em;
    background-color: var(--background-color-basic);
    background: linear-gradient(140deg, var(--background-color-basic), 74%, var(--background-color-accent));
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(140deg, var(--background-color-basic), 74%, var(--background-color-accent));
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

/*
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-overlay);
    pointer-events: none;
    z-index: -1;
    backdrop-filter: blur(var(--background-overlay-blur));
    -webkit-backdrop-filter: blur(var(--background-overlay-blur));
    display: none;  Initially hide the overlay 
}*/

a{
    color: var(--accent-color);
    outline: none;
    border: none;
}

/* UTILITIES */

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-basic);
    position: relative;
    }
    
/*ELEMENTS - Profile Top*/
.cover-image {
    width: calc(100% + (2 * var(--spacing-basic)));
    top: var(--spacing-basic-negative);
    left: var(--spacing-basic-negative);
    height: 220px;
    background-image: url('/images/tayrona-background-image.jpg'); /* Add cover image path */
    /*background-image: url('/images/default-image.jpg');*/ /* Add cover image path */
    background-position: center;
    background-size: cover;
    border-radius: var(--border-radius-square);
        border-top-left-radius: var(--border-radius-square);
        border-top-right-radius: var(--border-radius-square);
        border-bottom-right-radius: var(--border-radius-square);
        border-bottom-left-radius: var(--border-radius-square);
    position: relative;
    }

.profile-section {
    position: relative;
    margin-top: -80px; /*(50% of profile-image-height) + spacing-basic (I think)*/
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-bottom: var(--spacing-basic);
    border-top-right-radius: 100px; /*IMPORTANT TO MAKE "camera" icon of header image clickable...*/
    background: none;
}

.profile-image, #cropped_profile_image_preview{
    position: relative;
    display: block;
    width: 120px;
    height: 120px;
    border-radius: var(--profile-image-radius);
    border: var(--profile-image-border);
    background-image: url('/images/default-profile-image.png'); /* Add profile image path */
    background-size: cover;
    background-position: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: var(--spacing-basic);
    box-shadow: var(--box-shadow-profile-image);
}

    .profile-image-large{
        width: 160px;
        height: 160px;
        border-radius: 50%;
    }
        
    #cropped_profile_image_preview{
        width: 160px;
        height: 160px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.blue-verified-icon{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
   
.profile-name {
    font-family: var(--font-family-titles);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: var(--spacing-basic);
    position: relative;
    width: 100%;
    color: var(--font-color-main);
}

.profile-handle{
    font-size: 14px;
    font-family: var(--font-family-fixed);
    margin-top: calc(var(--spacing-basic-negative) * (0.6));
    margin-bottom: calc(var(--spacing-basic) /2);
    opacity: 0.6;
    font-style: italic;
    display: none;
}

.profile-logo{
    max-width: 70%;
    max-height: 112px;
    margin-top: calc(var(--spacing-basic) / 2);
}

.bio {
    font-size: 16px;
    color: var(--font-color-main);
    margin-bottom: calc(var(--spacing-basic) / 2);
}

.bio p{
    margin-block-start: 0em;
    margin-block-end: 0em;
}
        
.website {
    margin-bottom: var(--spacing-basic);
    margin-bottom: 0px;
    font-size: 14px;
}
        
    .website a{
        font-weight: normal;
        color: var(--accent-color);
    }

.social-links{
    display: flex;
    justify-content: center;
    gap: var(--spacing-basic);
    margin-bottom: calc(var(--spacing-basic) / 2);
    width: 100%;
    max-width: 100%;
    padding: 4px;
    position: relative;
    font-size: 24px;
}

.social-links a{
    color: var(--font-color-main);
    transition: scale 0.2s ease;
}

.social-links a:hover{
    scale: 110%;
}

.social-links.manage a:hover{
    scale: 100%;
}

.section {
    margin-bottom: var(--spacing-basic);
    margin-top: 0px;
    background: transparent;
    padding: calc(var(--spacing-basic) / 2);
    width: calc(100% + var(--spacing-basic));
    margin-left: calc(var(--spacing-basic-negative) / 2);
    border: 1px solid transparent;
    border-radius: var(--border-radius-large-item);
    transition: box-shadow 0.3s ease;
}
/*
.section-title {
    font-family: var(--font-family-titles);
    text-align: center;
    margin-bottom: var(--spacing-basic);
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--font-color-main);
}*/

.pro-badge, .coming-soon-badge, .new-feature-badge{
    background-color: gold;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
    color: #111;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    margin-left: 2px;
    line-height: 12px;
    border-radius: 4px;
    text-transform: uppercase;
    vertical-align: middle;
    display: inline-block;
    text-indent: 0;
}

.pro-badge-float{
    display: flex;
    align-items: center;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) !important;
}

    .pro-badge{
        background-color: gold;
        color: #111 !important;
    }
    .coming-soon-badge{
        background-color: #d9d9d9;
        color: #111 !important;
    }
    
    .new-feature-badge{
        background-color: #00ff85;
        color: #111 !important;
    }
    
    .pro-badge i, .coming-soon-badge i, .new-feature-badge i, .dropdown-menu a .coming-soon-badge i, .dropdown-menu a .new-feature-badge i{
        font-size: inherit;
        font-size: 8px !important;
        margin-right: 2px !important;
        width: unset !important;
        color: inherit !important;
    }
    

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-family-titles);
    font-size: 20px;
    font-weight: bold;
    color: var(--font-color-main);
    margin-bottom: var(--spacing-basic);
    text-align: center;
    
    margin-bottom: calc(var(--spacing-basic) * 1.5);
    line-height: 1.4em;
    padding-left: 8%;
    padding-right: 8%;
}

.section-title > span:first-child {
    flex: 0; /* Prevents the drag handle from stretching */
}

.section-title > span:nth-child(2) {
    flex: 1;
    text-align: center;
}

.section-title > span:last-child {
    flex: 0; /* Ensures the action icons only take necessary space */
    display: flex;
    gap: 10px; /* Adds spacing between icons */
    align-items: center;
}

.section-title.edit-block-link{
    padding-left: 0;
    padding-right: 0;
}

    .edit-block-link .main_title{
        padding-left: 10px;
        padding-right: 10px;
    }

.section-featured-image{
    width: 100%;
    border-radius: var(--border-radius-large-item);
    margin-bottom: calc(var(--spacing-basic) / 2);
    box-shadow: var(--box-shadow-basic);
    display: block;
}

.section-text-minor, .section-text-main, .section-text-featured, a.section-text-featured {
    font-size: 14px;
    color: var(--font-color-main);
    margin-bottom: calc(var(--spacing-basic) / 2);
    font-weight: normal;
    line-height: 1.6em;
    text-decoration: none;
}
    .section-text-minor, .section-text-main, .section-text-featured {
        text-align: center;
    }
    
    
.text_block_interior{
    font-size: 14px;
    color: var(--font-color-main);
    margin-bottom: calc(var(--spacing-basic) / 2);
    font-weight: normal;
    line-height: 1.6em;
    text-decoration: none;
    text-align: center;
    padding: var(--spacing-basic);
    background: var(--button-color);
    box-shadow: var(--box-shadow-basic);
    border-radius: var(--border-radius-large-item);
}

    .text_block_interior p{
        margin-block-start: 1em;
        margin-block-end: 1em;
    }
    
    .text_block_interior.bg_transparent{
        box-shadow: none;
        border-radius: none;
        background: none;
        padding-bottom: 0;
        padding-top: 0;
    }
    
        .text_block_interior.text_align_center{
            text-align: center;
        }
        .text_block_interior.text_align_left{
            text-align: left;
        }
        .text_block_interior.text_align_right{
            text-align: right;
        }
    
    
        .text_block_interior.font_size_s{
            font-size: 14px;
            line-height: 1.8em;
        }
        .text_block_interior.font_size_m{
            font-size: 16px;
            line-height: 1.6em;
        }
        .text_block_interior.font_size_l{
            font-size: 18px;
            line-height: 1.6em;
        }
        .text_block_interior.font_size_xl{
            font-size: 22px;
            line-height: 1.6em;
        }
    
    

.featured-collection-list {
    display: flex;
    gap: calc(var(--spacing-basic) / 2);
    gap: 12px;
    overflow-x: scroll;
    padding-bottom: var(--spacing-scrollable-grid-last-item-padding);
    padding-right: var(--spacing-scrollable-grid-last-item-padding);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
}

    .featured-collection-list::-webkit-scrollbar {
        display: none;
    }
    
.featured-collection-item,
a.featured-collection-item:focus,
a.featured-collection-item:hover,
a.featured-collection-item:visited,
a.featured-collection-item:active {
    width: 340px;
    min-width: 160px;
    max-width: 80%;
    height: 260px;
    background: var(--placeholder-gradient);
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-large-item);
    display: flex;
    align-items: flex-end;
    padding: 10px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2em;
    position: relative;
    text-decoration: none;  /* Remove underline */
    outline: none;  /* Remove outline when clicked or focused */
    box-shadow: var(--box-shadow-basic);
    scroll-snap-align: start;
}
        
        a.featured-collection-item:focus,
        a.featured-collection-item:hover,
        a.featured-collection-item:active{
            box-shadow: var(--box-shadow-heavy);
        }

.collection-count, .link-type-icon {
    font-size: 12px;
    background: var(--item-overlay-background-color);
    color: var(--item-overlay-font-color);
    padding: 6px 8px;
    border-radius: var(--border-radius-small-item);
    display: flex;
    align-items: center;
    line-height: 1em;
    font-family: var(--font-family-fixed);
}

.inner-top-left{
    position: absolute;
    top: 10px;
    left: 10px;
}

.inner-top-right{
    position: absolute;
    top: 10px;
    right: 10px;
}

.inner-bottom-right{
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.inner-bottom-left{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.inner-middle-right{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.inner-middle-left{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
    
    .inner-middle-right-edge{
        right: 0px;
    }
    
    .inner-middle-left-edge{
        left: 0px;
    }
    
    .inner-bottom-right-edge{
        bottom: 0px;
        right: 0px;
    }
    
    .inner-top-right-edge{
        top: 0px;
        right: 0px;
    }

.collection-count i {
        margin-right: 3px;
    }


.section-separator {
    width: 50%;
    height: 1px;
    background-color: var(--background-color-accent);
    margin: calc(var(--spacing-basic) * 1.5) auto;
    border-radius: 1px;
}

.collections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-basic) / 2);
    gap: 12px;
}

    .collections-grid.grid{
        grid-template-columns: 1fr 1fr;
    }
    .collections-grid.list{
        grid-template-columns: 1fr;
    }

.section iframe{
    box-shadow: var(--box-shadow-basic);
    border-radius: var(--border-radius-large-item);
    max-width: 100%;
}

.collection-item {
    position: relative;
    height: 150px;
    background: var(--placeholder-gradient);
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-medium-item);
    text-decoration: none;  /* Remove underline */
    color: inherit;  /* Ensure it inherits color from the parent */
    outline: none;  /* Remove outline when clicked or focused */
    box-shadow: var(--box-shadow-basic);
}
    
    a.collection-item:focus,
    a.collection-item:hover {
        box-shadow: var(--box-shadow-heavy);
        outline: none;  /* Ensure no outline on hover or focus */
        text-decoration: none;  /* Ensure no underline on hover or focus */
        }
    a.collection-item:visited {
        color: inherit;  /* Ensure visited links don't change color */
        }
    a.collection-item:active {
        color: inherit;  /* Ensure active links don't change color */
        }

.collection-item:first-child {
    grid-column: span 1; /* The first item takes the full row */
}

.collection-item:nth-child(n+2) {
    grid-template-columns: 1fr; /* Remaining items will be in a single column */
}

.collection-title, .featured-collection-item-title {
    color: var(--item-overlay-font-color);
    font-size: 14px;
    font-weight: bold;
    background: var(--item-overlay-background-color);
    padding: 5px 10px;
    border-radius: var(--border-radius-small-item);
    margin-right: 10px;
    line-height: 1.2em;
    font-family: var(--font-family-fixed);
}


.full_link_entry {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: transparent;
    border: 1px dashed transparent;
    border-radius: var(--border-radius-medium-item);
}



    
.btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-min-height);
    line-height: 20px;
    font-size: 14px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    box-shadow: var(--box-shadow-basic);
    border: var(--border-button);
    border-radius: var(--border-radius-medium-item);
    background-color: var(--button-color);
    color: var(--button-font-color);
    overflow: hidden;
    margin: 10px auto;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    padding: 0px;
}

/* Full */
.button-fill-full .btn {
    background-color: var(--button-color);
    color: var(--button-font-color);
    border: none;
}

/* Outline */
.button-fill-outline .btn {
    background-color: transparent;
    color: var(--button-outline-font-color);
    border: var(--button-outline-border);
    border-color: var(--button-outline-color);
}

    .button-fill-outline .btn .coupon-code, .button-fill-outline .btn .coupon-code-inactive{
        border-color: var(--button-outline-coupon-font-color);
        background: none;
        color: var(--button-outline-coupon-font-color);
    }
    
    .button-fill-outline .btn .btn-link-description{
        color: var(--button-outline-description-font-color);
    }
    
    

/* Semi-transparent */
.button-fill-semi .btn {
    background-color: color-mix(in srgb, var(--button-color) 40%, transparent);
    color: var(--button-font-color);
    border: none;
}


.btn-layout-image .favicon{
    display: none;
}

.btn-layout-default .btn-inner-image{
    display: none;
}

.btn-inner-image{
    background: var(--placeholder-gradient);
    height: 180px;
    justify-content: flex-end;
    background-image: url('/images/tayrona-background-image.jpg'); /* Add cover image path */
    background-position: center;
    background-size: cover;
}

.btn .toggle-link-layout-status{
    position: absolute;
    display: block;
    right: 13px;
    top: 20px;
    border: none;
    font-size: 18px;
    opacity: 0.2;
}

.btn:hover .toggle-link-layout-status{
    opacity: 0.3;
}

.btn:hover .toggle-link-layout-status:hover{
    opacity: 1;
}

.btn .btn-inner-link-actions i, .btn .toggle-link-layout-status i{
    position: static;
    right: unset;
    top: unset;
    left: unset;
    bottom: unset;
    transform: unset;
    font-size: 18px;
    margin: unset;
    border: none;
}

    .link-layout-image .layout-expand-icon {display: none;}
    .link-layout-image .layout-contract-icon{display: block;}
    
    .link-layout-default .layout-expand-icon{display: block;}
    .link-layout-default .layout-contract-icon{display: none;}
    
    

/* Top section of button */
.btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px 58px;
    position: relative;
}

.btn .btn-link-description{
    font-size: 12px;
    font-weight: normal;
    line-height: 1.3em;
    margin-bottom: 6px;
    color: var(--button-description-color);
}

.btn > div:first-of-type {
    padding-top: 18px;
}

.btn > div:last-of-type {
    padding-bottom: 18px;
}




/*LINK ANIMATIONS TO HIGHLIGHT*/

    /* Shake */
    @keyframes shake {
      0% { transform: translateX(0); }
      8% { transform: translateX(-2px); }
      12% { transform: translateX(2px); }
      16% { transform: translateX(-2px); }
      20% { transform: translateX(2px); }
      24% { transform: translateX(-2px); }
      28% { transform: translateX(2px); }
      32% { transform: translateX(-2px); }
      40% { transform: translateX(0); }
      100% { transform: translateX(0); }
    }
    
    /* Pulse */
    @keyframes pulse {
      0%, 16%, 32%, 48%,100% {
        transform: scale(1);
        /*opacity: 1;*/
      }
      8%, 24%, 40% {
        transform: scale(1.03);
        /*opacity: 0.8;*/
      }
    }
    
    /* Bounce */
    @keyframes bounce {
      0%, 50%, 100% {
        transform: translateY(0);
      }
      8%, 24%, 40%{
        transform: translateY(-3px);
      }
      16%, 32% {
        transform: translateY(3px);
      }
      
    }
    
    /* Glow */
    /*@keyframes glow {
      0%, 100% {
        box-shadow: 0 0 2px var(--accent-color), 0 0 4px var(--accent-color);
      }
      50% {
        box-shadow: 0 0 6px var(--accent-color), 0 0 8px var(--accent-color);
      }
    }*/
    
    @keyframes glow {
      0%, 12%, 24%, 40%, 100% {
        box-shadow: 0 0 2px, 0 0 4px ;
      }
      8%, 16%, 32% {
        box-shadow: 0 0 6px , 0 0 8px ;
      }
    }
    
    
    /* Swing */
    
    /*Swing Keyframes NEW (with pause)*/
     @keyframes swing {
     0%, 40%, 100% { transform: rotate(0deg); }  /* Pauses at the start, middle, and end */
  8% { transform: rotate(1deg); }             /* Swing to the right */
  12% { transform: rotate(-1deg); }            /* Swing to the left */
  16% { transform: rotate(1deg); }
  20% { transform: rotate(-1deg); }            /* Swing to the left */
  24% { transform: rotate(1deg); }
  28% { transform: rotate(-1deg); }            /* Swing to the left */
  32% { transform: rotate(1deg); }/* Swing back to the right */
}
     
    .highlight-link {
      animation: var(--animation-type) 4s ease-in-out infinite;
      animation-iteration-count: var(--animation-time); /* Limit shakes to X number of animation (animations are 1s each) cycles */
    }
    
    .button-sample.highlight-link {
        animation: none;
    }
    
    .button-sample.highlight-link:hover {
        animation: var(--animation-type) 4s ease-in-out infinite;
    }
    
    .image-radio input[type="radio"]:checked + .button-sample.highlight-link{
        animation: var(--animation-type) 4s ease-in-out infinite;
    }
    
    
    .highlight-link.manage_single_link, .highlight-link.powered-by {
      animation-iteration-count: 3; /* Limit shakes to X number of animation (animations are 1s each) cycles */
    }
    
    .highlight-link:hover {
      animation: none; /* Stop shaking when hovered */
    }

.btn .favicon {
    height: 32px;
    width: 32px;
    border-radius: var(--border-radius-favicon);
    background-color: var(--favicon-background-color);
}

.btn i, .btn .favicon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    margin-right: 15px;
    border: none;
    font-size: 24px;
}

.btn-layout-default .favicon{
    
}
.btn-layout-image{
    
}

.link-main-section {
    display: block;
    width: 100%;
    margin-left: 30px;
    margin-right: 30px;
}

.btn i.fa-inline{
    position: static;
    top: unset;
    transform: unset;
    left: unset;
    margin-left: 10px;
    font-size: 1em;
}

.btn:hover {
    box-shadow: var(--box-shadow-heavy);
    /*background: var(--accent-color);
    color: var(--button-color);*/
}


.coupon-code, .coupon-code-inactive{
    background: var(--button-coupon-color);
    color: var(--button-coupon-font-color);
    text-align: center;
    padding: 8px 0;
    font-family: var(--font-family-fixed);
    letter-spacing: 2px;
    text-transform: none;
    text-align: center;
    /*font-size: 14px;*/
    padding: 2px 16px;
    font-family: var(--font-family-fixed);
    letter-spacing: 2px;
    text-transform: none;
    border: 2px dashed var(--button-coupon-font-color);
    /*background: none;*/
    color: var(--button-coupon-font-color);
    margin-bottom: 12px;
    position: relative;
    padding-left: 34px;
    border-radius: 30px;
    border-radius: var(--border-radius-medium-item);
    transform: translateY(0);
    top: unset;
    right: unset;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn .coupon-code i, .btn .coupon-code-inactive i{
    left: 12px;
    font-size: 10px;
    margin-right: 0px;
    display: inline-block;
    width: 16px;
}
    
    .btn .coupon-code-inactive{
        text-decoration: line-through;
        opacity: 0.2;
    }
    .btn .coupon-code-inactive:hover{
        opacity: 0.1;
        text-decoration: none;
        text-decoration: line-through;
    }
/*.btn */.btn .coupon-code:hover{
    background-color: var(--button-coupon-font-color);
    color: var(--button-coupon-color);
    /*border-color: var(--button-coupon-color);*/
}


.video-container-multi {
    display: flex;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    height: auto;
    gap: 12px;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-right: var(--spacing-scrollable-grid-last-item-padding);
}
    .video-container-multi::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
}

    .video-container-multi iframe {
        flex: 0 0 auto; /* Prevent the iframe from shrinking */
        max-width: 90%; /* Limit the width to 100% of the container */
        width: 420px;
        height: auto; /* Set height to auto to maintain aspect ratio */
        aspect-ratio: 16 / 9; /* Set the aspect ratio to 16:9 */
        border-radius: var(--border-radius-large-item); /* Optional: round the corners of the iframes */
        scroll-snap-align: start; /* Optional: align items on scroll */
        gap: 15px;
        box-shadow: var(--box-shadow-basic);
    }
    
        .video-container-multi iframe:hover {
            box-shadow: var(--box-shadow-heavy);
        }


/*Youtube section*/
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-radius: var(--border-radius-large-item);
    box-shadow: var(--box-shadow-basic);
}
    
    .video-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        
    }
    
    .video-container:hover{
        box-shadow: var(--box-shadow-heavy);
    }
            

/*Newsletter*/

.newsletter-form {
    display: flex;
    justify-content: center;
}

.input-stack{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.input-group {
    font-family: var(--font-family-fixed);
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: var(--border-radius-medium-item);
    overflow: hidden;
    background: var(--newsletter-input-background-color);
    border: var(--border-button);
    box-shadow: var(--box-shadow-basic);
    min-height: var(--btn-min-height);
    margin-top: 0px;
}

.newsletter-input {
    width: 100%;
    padding: 12px;
    padding-left: 16px;
    font-size: 14px;
    border: none;
    outline: none;
    box-sizing: border-box;
    color: var(--newsletter-input-font-color);
    background: none;
    font-family: var(--font-family-fixed);
}

    .input-group:hover{
        box-shadow: var(--box-shadow-heavy);
    }

.newsletter-btn {
    background-color: var(--newsletter-input-button-color);
    color: var( --newsletter-input-button-font-color);
    padding: 12px 20px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 250px;
    max-width: 30%;
    font-weight: bold;
    height: 110%;
    font-family: var(--font-family-fixed);
}
    .newsletter-btn:hover {
        background-color: var(--newsletter-input-button-font-color);
        color: var(--newsletter-input-button-color);
    }


/*FOOTER*/
/*Footer Section*/
.footer {
    padding: var(--spacing-basic);
    text-align: center;
    margin-top: var(--spacing-basic);
}

.footer-content {
    font-size: 14px;
    color: #6c757d;
}

.disclosure {
    font-size: 12px;
    color: #bbb;
    margin-bottom: 70px;
}

.powered-by-container-container{
    height: 100px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0px;
    margin: auto;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 70%)
}

.powered-by-container {
  font-family: var(--font-family-fixed);
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

    .powered-by-container.manage{
        transform: none;
        position: static;
        margin-left: auto;
        margin-right: auto;
    }

a.powered-by{
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: #333;
    margin-bottom: var(--spacing-basic);
    border-radius: 30px;
    width: 100%;
    padding: 12px 36px 12px 36px;
    line-height: 20px;
    background: rgba(255, 255, 255, 1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--box-shadow-basic);
    position: relative;
}

a.powered-by:hover{
    background: #fff;
    box-shadow: var(--box-shadow-heavy);
    text-decoration: none;
}

a.powered-by .tripinbio{
    font-size: 16px;
    color: #111;
    font-weight:bold;
}

a.powered-by:hover .tripinbio{
    text-decoration: underline;
}




/*Styles for MANAGE / ADMIN PAGE*/
.full_link_entry.manage:hover{
    border: 1px dashed #999;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
    background-color: #f2f2f2;
    
    background-color: var(--ui-bg-hover);
}

.inactive{
    opacity: 0.2;
    opacity: var(--ui-inactive-opacity);
}
.inactive:hover{
    opacity: 0.3;
    opacity: var(--ui-inactive-opacity-hover);
}

.hidden-collection, .hidden-link, .hidden {
    display: none;
}

.add-item-button,
.manage-form-container,
.section-show-more,
.top-bar{
    font-family:var(--font-family-fixed);
}



.visitor-share-button{
 background: rgba(0,0,0,0.15);
    padding: 8px;
    display: inline-flex; /* Use flexbox for better alignment */
    align-items: center; /* Align icon and text vertically */
    border-radius: 50%;
    border-radius: var(--border-radius-large-item);
    position: fixed;
    right: var(--spacing-basic);
    top: var(--spacing-basic);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    font-weight: normal;
    font-family: var(--font-family-fixed);
    box-shadow: var(--box-shadow-basic);
    z-index: 1;
    color: #eee;
    color: #fff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0.8;
    opacity: 0.9;
    
}

    .top-bar .visitor-share-button{
       backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
    }
    
    .top-bar .visitor-share-button:hover{
         background: none;
         backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
        box-shadow: var(--box-shadow-basic);
    }

.visitor-share-button i{
    font-size: 16px;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.visitor-share-button .share-text-cta{
    display: none;
    margin-left: 6px;
    line-height: 18px;
    display: inline-block;
}


.share-modal{
position: fixed; /* Ensures it stays in place */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 24px;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1000;
    /* background: #f1f1f1; */
    background: #fcfcfc;
    font-family: var(--font-family-fixed);
    display: none;
    max-height: 90%;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .share-modal::-webkit-scrollbar {
        display: none;
    }


.share-modal.active{
    display: block;
}

.share-modal .close{
    font-size: 22px;
    position: absolute;
    right: 12px;
    top: 12px; /* Adjust position inside modal */
    border-radius: 50%;
    background: none;
    display: flex; /* Use flexbox for centering */
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    text-align: center;
    cursor: pointer;
}

.share-modal .close:hover{
    background: rgba(0,0,0,0.1);
}

.share-modal-copy-url{
    font-size: 16px;
    font-weight: normal;
    color: #111;
    display: block;
    text-decoration: none;
    box-shadow: var(--box-shadow-basic);
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 24px;
    font-weight: normal;
    color: #0d0d0d;
    background: #ffffff;
    /* background: #fefefe; */
    line-height: 24px;
    color: #444;
    text-align: left;
    position: relative;
}

.share-modal-copy-url:hover{
    box-shadow: var(--box-shadow-heavy);
}

.share-modal-copy-url i{
    position: absolute;
    right: 12px;
    /* background: orange; */
    font-size: 22px;
    line-height: 24px;
}

.share-modal-copy-url-slug{
    font-weight: bold;
    color: #111;
    display: inline-block;
    overflow-x: scroll;
    /* width: 50%; */
    width: 100%;
    line-height: 24px;
    top: 12px;
    margin-bottom: -7px;
    max-width: calc(100% - 92px);
     -webkit-overflow-scrolling: touch;
    scrollbar-width: none;     /* Firefox */
    
}

    .share-modal-copy-url-slug::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}
    
    /* Fade effect on the right */
.share-modal-copy-url-slug::after {
    content: "";
    position: absolute;
    right: 32px; /* adjust if needed to not block the icon */
    top: 0;
    height: 100%;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, #fff);
}

.share-modal-profile-name{
    font-size: 24px;
    font-weight: bold;
    color: #111;
    /*font-family: var(--font-family-titles);*/
    display: block;
    margin-bottom: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.3em;
}

.social-shares{
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    max-width: 100%;
    flex-direction: row;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 12px;
}

    .social-shares::-webkit-scrollbar {
        display: none;
    }


.social-shares a {
    flex: 1 1 calc(20% - 10px); /* Ensures even distribution, adjusts for spacing */
    text-align: center;
    display: inline-block;
}

.social-shares img {
    width: 40px;
    height: 40px;/* Adjust size as needed */
    display: block;
}

.share-modal-separator{
    width: 50%;
    height: 1px;
    background-color: #ededed;
    margin: 24px auto;
    border-radius: 1px;
}

.share-secondary-text{
    text-align: center;
}
.share-secondary-headline{
    font-size: 18px;
    font-weight: bold;
    color: #111;
    display: block;
    margin-bottom: 12px;
}
.share-secondary-description{
    font-size: 14px;
    font-weight: normal;
    color: #666;
    display: block;
}

.share-cta-main {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap if needed */
    justify-content: center; /* Centers buttons */
    gap: 10px; /* Space between buttons */
    margin-top: 24px;
    margin-bottom: 24px;
}

.share-cta-main a {
     display: flex;
    align-items: center; /* Ensures vertical alignment */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 30px;
    text-decoration: none;
    flex: 1 1 200px;
    max-width: 100%;
    box-shadow: var(--box-shadow-basic);
    position: relative;
    justify-content: center;
    gap: 8px; /* Adds spacing between icon and text */
}

    .share-cta-main a i {
        font-size: 16px;
        display: flex;
        align-items: center;
        position: absolute;
        left: 18px;
        }

    .share-cta-main a:hover{
        box-shadow: var(--box-shadow-heavy);
    }

.share-cta-main .primary {
    background-color: #111;
    color: #fff;
}

.share-cta-main .secondary {
    background-color: #fff;
    color: #111;
}

.share-cta-tertiary{
    font-size: 14px;
    color: #666;
}

.share-cta-tertiary a{
    color: #111;
    font-weight: bold;
    text-decoration: none;
}

.share-cta-tertiary a:hover{
    text-decoration: underline;
}





.manage-form-modal h4{
    margin-bottom: 12px;
    font-size: 18px;
}

.manage-form-modal .form-section-note{
    font-size: 14px;
}

.modal-pricing-table{
    text-align: center;
    color: #666;
    margin-bottom: 20px;
}

.feature-list-div{
    margin: auto;
    max-width: 90%;
    display: block;
    text-align: center;
    box-shadow: var(--box-shadow-basic);
    padding: 24px;
    border-radius: var(--border-radius-large-item);
    background: #fff;
}

ul.upgrade-feature-checklist{
    list-style: none;
    padding: 0;
    margin-bottom: 24px; 
    color: #333;
    font-size: 14px;
    text-align: left;
    display: inline-block;
    margin: 0 auto;
    padding-left: 0;
    list-style: none;
}

ul.upgrade-feature-checklist li{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
    padding-left: 22px;
    text-indent: -22px;
}

ul.upgrade-feature-checklist li.feature-list-section-header{
    font-weight: bold;
}

ul.upgrade-feature-checklist li i{
    font-size: 12px;
    margin-right: 0px;
    color: #03da73;
    width: 22px;
    display: inline-block;
    text-align: center;
}

/* Keep original styling */
.pricing-select {
    margin: auto;
    padding: 0;
}

.pricing-select .plan {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 5px;
    box-shadow: var(--box-shadow-basic);
    padding: 12px 16px;
    cursor: pointer;
    transition: border 0.1s, background-color 0.1s, box-shadow 0.1s;
}

/* Radio input visible */
.pricing-select input[type="radio"] {
    display: inline;
    padding: revert;
    width: revert;
    font-size: revert;
    margin: revert;
    background: revert;
    border: revert;
    color: revert;
    margin-right: 12px;
}

/* Target .plan when its child input is checked (with :has — only modern browsers!) */
.pricing-select .plan:has(input[type="radio"]:checked) {
    border-color: #333;
    background-color: #fff;
    box-shadow: var(--box-shadow-heavy);
}

/* Plan label layout */
.pricing-select .plan-label {
    flex-grow: 1;
    cursor: pointer;
    padding: 6px 12px;
    font-size: revert;
    margin: revert;
    margin-top: 4px;
    font-weight: normal;
}

/* Text styling */
.pricing-select .plan-name {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: bold;
    display: block;
}

.pricing-select .plan-price {
    font-size: 16px;
    color: #888;
    display: block;
    font-weight: normal;
}

.plan-price .savings-text,
.plan-price .regular-price {
    color: #aaa;
    font-size: 14px;
    font-weight: normal;
}

.plan-price .regular-price {
    text-decoration: line-through;
}

.manage-form-modal form .share-cta-main{
    margin-top: 12px;
    margin-bottom: 24px;
}

.manage-form-modal form .share-cta-main button {
     display: flex;
    align-items: center; /* Ensures vertical alignment */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 30px;
    text-decoration: none;
    flex: 1 1 200px;
    max-width: 100%;
    box-shadow: var(--box-shadow-basic);
    position: relative;
    justify-content: center;
    gap: 8px; /* Adds spacing between icon and text */
    cursor: pointer;
    border: none;
    margin-top: 0;
    margin-bottom: 0;
}

    .manage-form-modal form .share-cta-main button i {
        font-size: 16px;
        display: flex;
        align-items: center;
        position: absolute;
        left: 18px;
        }

    .manage-form-modal form .share-cta-main button:hover{
        box-shadow: var(--box-shadow-heavy);
    }



 .username-availability-notice{
            background: #d4edda;
            color: #155724;
            font-size: 16px;
            margin-top: 20px;
            padding: 12px 10px;
            display: inline-block;
            line-height: 1.6em;
            border-radius: 4px;
            margin-bottom: 20px;
            /* font-size: 1.1em; */
            /* text-align: center; */
            /* margin-top: 10px; */
            /* border: 1px solid #c3e6cb;*/
        }
    
    .manage-form-modal .username-availability-notice{
        width: 100%;
    }
        
        .availability-notice-error{
            background:#f8d7da;
            color: #721c24;
        }
        
        .username-availability-notice i{
            margin-right: 8px;
            font-size: 14px;
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border: 1px solid;
            border-radius: 50%;
            display: inline-block;
            padding: 0px;
        }



.expandable-form-section{
    display: none;
}

.block-expanded{
    display: block;
}


.blog-articles-grid {
    display: flex;
    overflow-x: scroll;
    gap: 12px;
    padding-bottom: 4px;
    padding-right: var(--spacing-scrollable-grid-last-item-padding);
    scroll-snap-type: x mandatory; /* Optional: makes it feel smooth*/
    scrollbar-width: none;
    -ms-overflow-style: none;
}
    
    .blog-articles-grid::-webkit-scrollbar {
        display: none; /* Hide scrollbar on Webkit browsers (Chrome/Safari) */
    }

.blog-article-card {
    flex: 0 0 auto;
    max-width: 90%;
    width: 420px;
    background: var(--button-color);
    border-radius: var(--border-radius-medium-item);
    overflow: hidden;
    box-shadow: var(--box-shadow-basic);
    display: flex;
    flex-direction: column;
    text-decoration: none;      /* <--- Prevents underline */
    color: inherit;             /* <--- Keeps your existing colors */
    scroll-snap-align: start;
}

.blog-article-card:hover {
    box-shadow: var(--box-shadow-heavy);
}

.blog-card-image {
    width: 100%;
    height: 237px;
    object-fit: cover;
    background: var(--placeholder-gradient);
}

.blog-card-title {
    font-weight: bold;
    padding: 16px 16px;
    padding-bottom: 8px;
    /* margin-top: 8px; */
    font-size: 16px;
    color: var(--button-font-color);
}

.blog-article-card:hover .blog-card-title {
    text-decoration: none;      /* Ensure title stays clean */
}

.blog-card-snippet, .blog-card-read-more{
    padding: 0 16px 8px 16px;
    color: var(--button-description-color);
    font-size: 14px;
    line-height: 1.5em;
}

.blog-card-read-more{
    color: var(--button-font-color);
    text-decoration: none;
    padding-bottom: 16px;
    font-weight: bold;
}

.blog-card-read-more:hover{
    text-decoration: underline;
}
      





/* --- Sponsored Block Display --- */
.sponsored-block-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-basic);
  /*box-shadow: var(--box-shadow-basic);
  background: #fff;*/
  border-radius: var(--border-radius-medium-item);
  max-width: var(--sponsored-item-max-width);
  object-fit: contain;
  box-shadow: 0;
  outline: 0;
  border: 0;
}
.sponsored-block-item:hover, .sponsored-block-item:focus {
  box-shadow: var(--box-shadow-basic);
  /*background: #fff;*/
}

.sponsored-block-item:active{
  box-shadow: var(--box-shadow-heavy);
}



.sponsored-block-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: auto;
  max-width: var(--sponsored-logo-max-width);
  max-height: var(--sponsored-logo-max-height);
  border-radius: var(--border-radius-small-item);
  box-shadow: 0;
  outline: 0;
  border: 0;
  text-decoration: none;
  
}


/* Hide duplicate logos by default */
.sponsored-block-item.duplicate { display: none; }
.sponsored-block-list.horizontal-autoscroll .sponsored-block-item.duplicate, .sponsored-block-list.horizontal .sponsored-block-item.duplicate { display: flex;}

.smooth-autoscroll {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}



/* --- Base container --- */
.sponsored-block-list {
  display: flex;
  gap: var(--sponsored-grid-gap);
  justify-content: center;
  flex-wrap: wrap; /* default wrap for grid layouts */
  
  margin-bottom: calc(var(--spacing-basic) / 2);
  border: var(--border-button);
  border-radius: var(--border-radius-medium-item);
  background-color: var(--button-color);
  color: var(--button-font-color);
  box-shadow: var(--box-shadow-basic);
  padding: var(--spacing-basic);
}

/* Optional variation with background */
.sponsored-block-list.with_bg {
  border: var(--border-button);
  border-radius: var(--border-radius-medium-item);
  background-color: var(--button-color);
  color: var(--button-font-color);
  box-shadow: var(--box-shadow-basic);
  padding: var(--spacing-basic);
}

/* --- Grid layouts --- */

/* Auto-fit grid → flex-based */
.sponsored-block-list.grid-auto .sponsored-block-item {
  flex: 1 1 var(--sponsored-min-width);
  max-width: var(--sponsored-item-max-width);
}

/* Fixed-column grids (use CSS variables for item width) */
.sponsored-block-list.grid-2 .sponsored-block-item {
  flex: 1 1 calc(50% - var(--sponsored-grid-gap));
  max-width: var(--sponsored-logo-max-width-medium);
  max-width: var(--sponsored-item-max-width);
}
.sponsored-block-list.grid-3 .sponsored-block-item {
  flex: 1 1 calc(33.333% - var(--sponsored-grid-gap));
  max-width: var(--sponsored-logo-max-width-medium);
  max-width: var(--sponsored-item-max-width);

}
.sponsored-block-list.grid-4 .sponsored-block-item {
  flex: 1 1 calc(25% - var(--sponsored-grid-gap));
  max-width: var(--sponsored-logo-max-width-medium);
  max-width: var(--sponsored-item-max-width);
}

/* --- Vertical stack --- */
.sponsored-block-list.vertical {
  flex-direction: column;
  align-items: center;
}
.sponsored-block-list.vertical .sponsored-block-item {
  flex: 0 0 auto;
  max-width: var(--sponsored-item-max-width);
  width: var(--sponsored-item-max-width);
}

/* --- Horizontal layouts (override wrapping) --- */
.sponsored-block-list.horizontal,
.sponsored-block-list.horizontal-autoscroll {
  flex-wrap: nowrap;   /* prevent wrapping */
  justify-content: start;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
  /*padding-bottom: var(--spacing-scrollable-grid-last-item-padding);
  padding-right: var(--spacing-scrollable-grid-last-item-padding);*/
}
.sponsored-block-list.horizontal::-webkit-scrollbar,
.sponsored-block-list.horizontal-autoscroll::-webkit-scrollbar { display: none; }

.sponsored-block-list.horizontal {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--spacing-basic);
  scroll-padding-right: var(--spacing-basic);
}


.sponsored-block-list.horizontal .sponsored-block-item {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.sponsored-block-list.horizontal .sponsored-block-item img,
.sponsored-block-list.horizontal-autoscroll .sponsored-block-item img {
  width: auto;
  flex-shrink: 0;
}

/* --- Horizontal auto-scroll --- */
.sponsored-block-list.horizontal-autoscroll {
  overflow: hidden;
  position: relative;
}
.sponsored-block-list.horizontal-autoscroll .sponsored-block-track {
  display: flex;
  gap: var(--sponsored-grid-gap);
  animation: scroll-left 20s linear infinite;
}
.sponsored-block-list.horizontal-autoscroll:hover .sponsored-block-track {
  animation-play-state: paused;
}



.bg_transparent{
        box-shadow: none;
        border-radius: none;
        background: none;
        padding-bottom: 0;
        padding-top: 0;
    }
    
    .sponsored-block-list.horizontal.bg_transparent, .sponsored-block-list.horizontal-autoscroll.bg_transparent{
        scroll-padding-left: 2px;
        scroll-padding-right: 0;
        padding-bottom: var(--spacing-scrollable-grid-last-item-padding);
        padding-right: var(--spacing-scrollable-grid-last-item-padding);
        padding-top: var(--spacing-scrollable-grid-last-item-padding);
        padding-left: 2px;
    }
    
/* Sponsors Animation Animation */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}





.links-list{
     margin-top: -6px;
}

/*WIDGETS SECTION*/
.widget_container iframe{
    border-radius: 0px;
    display: block;          /* avoid inline spacing */
    max-width: 100%;
    border: none;            /* no border */
    outline: none;           /* no outline */
    box-shadow: none; 
    frameborder: 0;
}

.content_zoom_10{
    width: calc(100% + 20px);
    left: -10px;
    position: relative;
}

.with_button_bg{
  border: var(--border-button);
  border-radius: var(--border-radius-large-item);
  background-color: var(--button-color);
  color: var(--button-font-color);
  box-shadow: var(--box-shadow-basic);
  padding: var(--spacing-basic);
}

    .with_button_bg:hover{
        box-shadow: var(--box-shadow-heavy);
    }

.with_white_bg{
  border: var(--border-button);
  border-radius: var(--border-radius-large-item);
  background-color: #ffffff;
  color: #111111;
  box-shadow: var(--box-shadow-basic);
  padding: var(--spacing-basic);
}

    .with_white_bg:hover{
        box-shadow: var(--box-shadow-heavy);
    }

.no_padding{
  padding: 0;
}

.widget_container.no_padding iframe{
    border-radius: var(--border-radius-large-item);
}

.spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





 /* Responsive Styling - DESKTOP*/
@media (min-width: 600px) {

:root {
  --sponsored-grid-gap: 12px;
  --sponsored-min-width: 180px; /* minimum logo block width */
    
  --sponsored-min-width-medium: 180px;
  --sponsored-logo-max-width-medium: 156px;
  --sponsored-logo-max-height-medium: 90px;
  --sponsored-item-max-width-medium: 180;
    
  /* default logo size (medium) */
  --sponsored-logo-max-width: var(--sponsored-logo-max-width-medium);
  --sponsored-logo-max-height: var(--sponsored-logo-max-height-medium);
  --sponsored-item-max-width: var(--sponsored-item-max-width-medium);
  
 
}
    
    
.sponsored-block-list.logo-size-small {
    --sponsored-min-width: 130px;

  --sponsored-logo-max-width: 110px;
  --sponsored-logo-max-height: 55px;
  --sponsored-item-max-width: 130px;
}

.sponsored-block-list.logo-size-medium {
  --sponsored-min-width: 180px;
  --sponsored-logo-max-width: 156px;
  --sponsored-logo-max-height: 90px;
  --sponsored-item-max-width: 180;
}

.sponsored-block-list.logo-size-large {
  --sponsored-min-width: 260px;
  --sponsored-logo-max-width: 240px;
  --sponsored-logo-max-height: 120px;
  --sponsored-item-max-width: 260px;
}

    .btn:hover .toggle-link-layout-status:hover{
        opacity: 1;
    }
    .btn:hover .toggle-link-layout-status{
        opacity: 0.3;
    }
    .btn .toggle-link-layout-status{
        opacity: 0;
    }
    
    .visitor-share-button{
         padding: 8px 12px;
         border-radius: var(--border-radius-large-item);
    }
    
    .visitor-share-button .share-text-cta{
        display: inline-block;
        
    }
    
    
    .collection-item {
        height: 180px;
    }
    .cover-image {
        border-top-left-radius: var(--border-radius-square);
        border-top-right-radius: var(--border-radius-square);
        border-bottom-right-radius: var(--border-radius-large-item);
        border-bottom-left-radius: var(--border-radius-large-item);
        box-shadow: var(--box-shadow-basic);
    }
    
    .btn{
        font-size: 16px;
        line-height: 24px;
        margin: 12px auto;
    }
    
    .btn .favicon {
    height: 32px;
    width: 32px;
    }
    
    .btn i{
        font-size: 22px;
        left: 16px;
    }
    
    .btn .coupon-code i{
            left: 12px;
            font-size: 10px;
    }
    
    .section-text-minor, .section-text-main, .section-text-featured, a.section-text-featured {
        font-size: 16px;
        line-height: 1.7em;
    }
    
    .text_block_interior{
    font-size: 16px;
    line-height: 1.7em;
    }
    
        .text_block_interior.font_size_s{
            font-size: 14px;
            line-height: 1.8em;
        }
        .text_block_interior.font_size_m{
            font-size: 16px;
            line-height: 1.7em;
        }
        .text_block_interior.font_size_l{
            font-size: 18px;
            line-height: 1.6em;
        }
        .text_block_interior.font_size_xl{
            font-size: 22px;
            line-height: 1.6em;
        }
    
    
    .powered-by-container{
            bottom: 10px;
            left: unset;
            right: 20px; /* Move to the center horizontally */
            transform: none;
    }
    
}