:root {
    /* Default values for logo and date/time position */
    --logo-width: 428px;
    --logo-height: auto;
    --logo-top: 20px;
    --logo-left: 39%;
    --datetime-top: 50px;
    --datetime-right: 20px;
    --gold-section-margin-top: 5rem; /* Default margin-top for the gold section */

    /* Adjustments to prevent overlap */
    --header-height: 50px; /* Set a minimum height for the header section */
}

/* Main content wrapper for scaling */
#content-wrapper {
    transform-origin: top left;
    position: absolute;
    width: 1920px;  /* Set this to your design width */
    height: 1080px; /* Set this to your design height */
}

/* Header section styling */
#header-section {
    position: relative;
    width: 100%;
    height: var(--header-height); /* Ensure the header section has a fixed height */
    padding: 20px;
    box-sizing: border-box;
    z-index: 10; /* Ensure it's above the other elements */
}

#logo-container {
    position: absolute;
    top: var(--logo-top);
    left: var(--logo-left);
    z-index: 10;
}

#logo-image {
    width: var(--logo-width);
    height: var(--logo-height);
    object-fit: contain;
}

#date_time {
    position: absolute;
    top: var(--datetime-top);
    right: var(--datetime-right);
    text-align: right;
    z-index: 10;
}
#time-container {
    position: absolute;
    top: var(--datetime-top);
    left: var(--time-left);  /* Position the time on the left */
    text-align: left;
    z-index: 10; /* Ensure it's above the logo */
}



/* ================== Background Styles ================== */
.bg-custom {
    background-image: url('/img/copyright/alridah/bg-price.jpg');
}

/* ================== Text Styles ================== */
.glow-gold {
    text-shadow: 
        0 0 15px rgba(218, 165, 32, 0.7), 
        0 0 15px rgba(206, 151, 12, 0.6), 
        0 0 15px rgba(184, 91, 25, 0.5);
}

.glow-silver {
    text-shadow: 
        0 0 4px rgba(192, 192, 192, 0.7), 
        0 0 8px rgba(169, 169, 169, 0.6), 
        0 0 12px rgba(128, 128, 128, 0.5);
}

/* ================== Divider Styles ================== */
#divider-gold {
    border: solid 1px #daa520b3;
    height: 3px;
    box-shadow: 
    0 0 15px rgba(241, 214, 196, 0.5), 
    0 0 15px rgba(241, 214, 196, 0.5), 
    0 0 15px rgba(241, 214, 196, 0.5);
}

#divider-silver {
    border: solid 1px #858585;
    height: 3px;
    box-shadow: 
        0 0 15px rgba(2, 192, 192, 0.7), 
        0 0 15px rgba(169, 169, 169, 0.6), 
        0 0 15px rgba(128, 128, 128, 0.5);
}

/* ================== Blur Effect Styles ================== */
#bg-blur-gold {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border-radius: 15px;
    box-shadow: 
        0 0 15px rgba(241, 214, 196, 0.5), 
        0 0 15px rgba(241, 214, 196, 0.5), 
        0 0 15px rgba(241, 214, 196, 0.5);
    margin-left: auto;
    margin-right: auto;
}

#bg-blur-silver {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border-radius: 15px;
    box-shadow: 
        0 0 15px rgba(192, 192, 192, 0.7), 
        0 0 15px rgba(169, 169, 169, 0.6), 
        0 0 15px rgba(128, 128, 128, 0.5);
}

/* Slideshow container styles */
#left-slideshow, #right-slideshow {
    display: var(--slideshow-display);
    width: 500px;  /* Set a fixed width */
    height: 280px; /* Set a fixed height */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    position: relative; /* For absolute positioning of the image inside */
    z-index: 1; /* Ensure it's below the header */
    margin-top: calc(var(--header-height) + 10px); /* Add margin to push below the header */
    margin-left: 20px; /* Add margin-left for spacing from the left edge */
    margin-right: 20px; /* Add margin-right for spacing from the right edge */
    padding: 20px; /* Add padding inside the slideshow container */
    box-sizing: border-box; /* Ensure padding is included in width/height */
}

/* Slideshow image styles */
.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This will crop the image while maintaining aspect ratio */
    object-position: center; /* This centers the cropped image */
}

/* Layout for the gold price row */
#gold-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--header-height); /* Ensure the gold price row starts below the header */
}

/* Center gold price when slideshows are hidden */
body:not(.show-slideshows) #gold-price-row {
    justify-content: center;
}

/* Hide slideshows when not shown */
body:not(.show-slideshows) #left-slideshow,
body:not(.show-slideshows) #right-slideshow {
    display: none;
}

/* Adjust flex grow when slideshows are hidden */
body:not(.show-slideshows) #gold-price-row > .flex-grow {
    flex-grow: 0;
}

/* Adjust spacing for gold section when slideshows are hidden */
#gold-section {
    margin-top: var(--gold-section-margin-top);
}

/* Adjust the grid layout for gold price boxes */
#gold-section .grid {
    display: flex;
    justify-content: space-between;
    grid-template-columns: repeat(4, minmax(300px, 1fr));
    gap: 2rem;
}

/* Ensure minimum width for each gold price box */
#gold-section .grid > div {
    flex: 1;
    min-width: 0; /* This allows the boxes to shrink below their content size if needed */
    max-width: 25%; /* Ensures each box takes up no more than 25% of the container width */
    padding: 1rem;
}


/* Adjust margin when slideshows are visible */
body.show-slideshows .flex-grow {
    margin-top: 100px; /* Push the gold price section down by 20px */
}
/* Adjust margin when slideshows are not shown */
body:not(.show-slideshows) #content-wrapper-inner {
    margin-top: 200px; /* Increase margin-top when slideshows are not shown */
}