/* Top of the CSS for ctct.me */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

a {
	color: var(--blue-brand-blue);
    text-decoration: none;
}

a:visited {
	/* color: var(--blue-brand-blue); */
    text-decoration: none;
}


.back-arrow-nav {
    font-size: 22px; /* Slightly larger for emphasis */
    margin-right: 8px; /* Space between arrow and text */
    color: #4a5568; /* Dark blue-gray color for arrow */
    font-weight: bold;
}

.topnav-last-login {
    font-size: 10px;
    opacity: 1;
    color: var(--color-black);
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .topnav-last-login {
        font-size: 14px;
    }
}


/* End of nav */











.label {
	position: relative;
	line-height: 20px;
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: 8px;
}

/* Main Panel */

main {
    padding-top: 70px; /* Adds space below header */
    padding-bottom: 100px; /* Adds space for the footer */
    margin: 0 10px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.page-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 8px;
  }

.page-title-centered {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%; /* Ensure it takes the full width of the container */
}

.page-subtitle-centered {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%; /* Ensure it takes the full width of the container */
}


.center-panel {
    margin: 0 auto;
    width: 360px;
    padding: 20px;
    box-sizing: border-box;
  }
  


.center-panel-tools {
    width: 100%;
    padding: 20px;
    /* margin-left: 30px; */
    box-sizing: border-box;
  }

.centered-image-picker {
    margin-top: 30px;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }


.center-panel-landing {
    width: 340px;
    margin: 0 auto;
    padding: 0px;
    background-color: var(--white);
    border-radius: 5px;
}


.center-panel-chicklets {
    margin: 0 auto;
    padding: 20px;
    width: 400px;
    background-color: var(--white);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;     /* center children horizontally */
    justify-content: center; /* center children vertically (if height is constrained) */
    text-align: center;      /* optional: center text inside */
  }
  
.center-panel-chicklets-saved-lead-magnets {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
    background-color: var(--white);
    border-radius: 5px;
}

.page-content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-page-graphic {
    width: 100%;
    max-width: 200px; /* Default for desktop */
    height: auto;
    margin: 20px auto;
    display: block;
}

/* Media query for mobile */
@media (max-width: 767px) {
    .landing-page-graphic {
        max-width: 280px; /* Size for mobile */
    }
}


/* Label styling */
.data-label {
	margin-top: 20px;
    position: relative;
    line-height: 20px;
}

.select-container {
    margin-bottom: 16px;
}

select {
    width: 300px;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #d9dde1;
    border-radius: 6px;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0,0 20,0 10,10" fill="gray"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}


.tips {
    font-size: 14px;
    margin-bottom: 24px;
    color: #6e6e6e;
    text-align: left;
	padding-bottom: 16px;
}

.formTip {
	font-family: var(--text-small-normal);	
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 0px;
	clear: both;
	align-self: stretch;
	position: relative;
	font-size: var(--text-tiny-normal-size);
	line-height: 18px;
	color: var(--color-black);
	display: block;
	width: 100%;
	height: auto; /* optional: let it grow with content */
}



.formTipTight {
    font-family: var(--text-small-normal);	
    margin-top: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 0px;
    clear: both;
    align-self: stretch;
    position: relative;
    font-size: var(--text-tiny-normal-size);
    line-height: 18px;
    color: var(--color-black);
    display: inline-block;
    height: 16px;
    flex-shrink: 0;
}	




/* Footer */

footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100px;
    z-index: 20;
}

.footer-panel {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    color: var(--color-black); /* Ensure text color is black */
    padding: 10px;
    display: flex;
    justify-content: center;
}

.footer-menu {
    display: flex;
    justify-content: space-between; /* Ensures even spacing between icons */
    align-items: center;
    width: 100%;
}

.menu-item-left,
.menu-item-center,
.menu-item-right {
    text-align: center;
    display: flex;
    justify-content: center;
    flex: 1; /* Ensures equal spacing for each item */
}

.menu-item-left a,
.menu-item-center a,
.menu-item-right a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-black); /* Set text color to black */
    text-decoration: none;
}

.menu-icon {
    height: 32px; /* Icon size for Edit and Tools */
    width: 32px;
}

.home-icon {
    height: 40px; /* Icon size for Home button */
    width: 40px;
}

.menu-label {
    margin-top: 5px;
    font-size: 12px;
}

/* Style specifically for the home button */
.home-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0073ea; /* Blue background */
    border-radius: 10px; /* Rounded corners */
    height: 60px; /* Larger height for Home button */
    width: 60px;  /* Larger width for Home button */
    padding: 5px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .footer-panel {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .footer-menu {
        width: 100%;
    }
}

/* Buttons */

.save-btn, .back-btn, .remove-btn, .input-fields-btn, .view-errors-btn {
    width: 100%; /* Ensure both buttons take the full container width */
    max-width: 350px; /* Maximum width constraint */
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
	text-decoration: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-061) var(--space-08); /* Same padding for both */
    box-sizing: border-box;
    font-size: var(--text-regular-mobile-semi-bold-size);
    font-family: var(--text-regular-mobile-semi-bold);
}

.save-btn {
    background-color: var(--blue-brand-blue);
    color: var(--white);
    border: 1px solid var(--blue-brand-blue); /* Ensure border consistency */
}

.view-errors-btn {
    background-color: var(--blue-brand-blue);
    color: var(--white);
    border: 1px solid var(--white); /* Ensure border consistency */
    width: 120px;
}

.login-btn {
    width: 100%; /* Ensure both buttons take the full container width */
    max-width: 350px; /* Maximum width constraint */
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-061) var(--space-08); /* Same padding for both */
    box-sizing: border-box;
    font-size: var(--text-regular-mobile-semi-bold-size);
    font-family: var(--text-regular-mobile-semi-bold);
    color: inherit; /* Use inherit to ensure child elements inherit the correct color */
    background-color: var(--blue-brand-blue);
    color: var(--white); /* Ensure text is white */
    border: 1px solid var(--blue-brand-blue); /* Ensure border consistency */
}

.login-btn:hover {
    text-decoration: none; /* Ensure no underline on hover */
    color: var(--white); /* Maintain white text on hover */
}


.back-btn {
    background-color: var(--white);
    color: var(--blue-brand-blue);
    border: 1px solid var(--blue-brand-blue); /* Ensure border consistency */
    text-decoration: none; /* Ensure no underline if using <a> */
    cursor: pointer; /* Ensure back button behaves like a button */
}

.remove-btn {
    background-color: var(--remove);
    color: var(--white);
    border: 1px solid var(--white); /* Ensure border consistency */
	text-decoration: none; /* Ensure no underline if using <a> */
    cursor: pointer; /* Ensure back button behaves like a button */
}


.input-fields-btn {
    background-color: var(--burnt-yellow);
    color: var(--white);
    border: 1px solid var(--white); /* Ensure border consistency */
	text-decoration: none; /* Ensure no underline if using <a> */
    cursor: pointer; /* Ensure back button behaves like a button */
}

.uploadImageButton {
    background: linear-gradient(to right, #0318FF, #157BFF);
    color: white;
    padding: 20px 32px;
    text-align: center;
    width: 150px;
    text-decoration: none;
    display: inline-block;
    border-radius: 6px;
    margin: 8px 2px;
    cursor: pointer;
    transition: all .2s ease, box-shadow .08s ease-in;
    border: none;
    outline: none;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* add a slight soft shadow */
  }

  .removeImageButton {
    background: linear-gradient(to right, #ff0303, #ea3e3e);
    color: white;
    padding: 20px 32px;
    text-align: center;
    width: 150px;
    text-decoration: none;
    display: inline-block;
    border-radius: 6px;
    margin: 8px 2px;
    cursor: pointer;
    transition: all .2s ease, box-shadow .08s ease-in;
    border: none;
    outline: none;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* add a slight soft shadow */
  }

.status-active-btn {
    background-color: #ECFDF3; /* Light background color as per the image */
    color: #085D3A; /* Text color */
    cursor: default; /* Default cursor */
    border: 1px solid #A9EFC5; /* Border color */
    border-radius: 25px; /* Rounded corners */
    padding: 4px 12px; /* Top/Bottom: 4px, Left/Right: 12px */
    font-size: 14px; /* Font size */
    font-family: var(--text-regular-normal); /* Using variable font family */
}

.status-active-error-btn {
    background-color: #FEF3F2; /* Background color as shown in the image */
    color: #A81006; /* Text color */
    cursor: default; /* Default cursor */
    border: 1px solid #FE5A58; /* Border color */
    border-radius: 25px; /* Rounded corners */
    padding: 4px 12px; /* Top/Bottom: 4px, Left/Right: 12px */
    font-size: 14px; /* Font size */
    font-family: var(--text-regular-normal); /* Using variable font family */
}

.status-inactive-btn {
    background-color: #FFF2DE; /* Light background color as per the image */
    color: #93370D; /* Text color */
    cursor: default; /* Default cursor */
    border: 1px solid #FFCA8D; /* Border color */
    border-radius: 25px; /* Rounded corners */
    padding: 4px 12px; /* Top/Bottom: 4px, Left/Right: 12px */
    font-size: 14px; /* Font size */
    font-family: var(--text-regular-normal); /* Using variable font family */
}

.button-container {
	margin-top: 30px;
	width: 100%;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.button-containerTight {
	margin-top: 10px;
	width: 100%;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.button-containerTightTight {
	margin-top: 12px;
    margin-bottom: 12px;
	width: 100%;
    display: flex;
    justify-content: center;
}

.button-icon {
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 10px; /* Space on the left side */
    margin-right: 10px; /* Space on the right side */
}


/* Images */

.imagePreviewUpload {
    display:block;
    max-width: 300px;
    height: auto;
    margin:15px auto 15px;
    border-radius: 5%;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow under the image */
    margin-left: auto;
    margin-right: auto;
  }

.imagePreviewQRCode {
    display:block;
    max-width: 250px;
    height: auto;
    margin:15px auto 15px;
    border-radius: 5%;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow under the image */
    margin-left: auto;
    margin-right: auto;
  }


  .imagePreviewHome {
    display: block;
    max-width: 175px;
    height: auto;
    margin: 15px auto;
    border-radius: 10px; /* More rounded corners */
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow under the image */
    overflow: hidden; /* Ensures the content respects the border-radius */
}


/* Home Page objects */

.qr-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 320px;
    overflow: hidden;
    text-align: left;
    margin-top: 10px;
}

.qr-card-image-section {
    background-color: #e0f4ff;
    padding: 0px;
    display: flex;
    justify-content: center;  /* Centering the image horizontally */
    align-items: center;      /* Centering the image vertically if needed */
    position: relative;       /* Needed for QR code overlay positioning */
}

/* Container to hold both the static image and the QR code */
.qr-image-container {
    position: relative;
    width: 100%;
    height: auto;
}

/* Background image (static image with cakes) */
.qr-image-background {
    width: 100%;
    height: auto;
    display: block;
}

/* QR code overlay */
.qr-code-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the QR code */
    width: 120px; /* Adjust width as necessary */
    height: auto;
}

.qr-card-text-section {
    padding: 20px;
}

.qr-card-heading {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: left;
    margin: 0 0 10px;
}

.qr-card-subheading {
    font-size: 16px;
    color: #666;
    text-align: left;
    margin: 0 0 20px;
}

.qr-card-download-link {
    font-size: 16px;
    color: #186ded;
    text-decoration: none;
    text-align: left;
    font-weight: bold;
}

.qr-card-download-link:hover {
    text-decoration: underline;
}

.social-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 320px;
    overflow: hidden;
    text-align: left;
	margin-top: 10px;
}

.social-card-image-section {
    /* background-color: #e0f4ff; */
    padding: 0px;
    display: flex;
    justify-content: center;  /* Centering the image horizontally */
    align-items: center;      /* Centering the image vertically if needed */
}

.qr-image {
    width: 350px;
    height: auto;
    margin-bottom: 10px;
}

.social-card-text-section {
    padding: 20px;
}

.social-card-heading {
    font-size: 24px;
    font-weight: bold;
    color: #333;
	text-align: left;
    margin: 0 0 10px;
}

.social-card-subheading {
    font-size: 16px;
    color: #666;
	text-align: left;
    margin: 0 0 20px;
}

.social-card-download-link {
    font-size: 16px;
    color: #186ded;
    text-decoration: none;
	text-align: left;
    font-weight: bold;
}

.social-card-download-link:hover {
    text-decoration: underline;
}

.ways-to-share {
    font-size: 24px;
    font-weight: bold;
    color: #333;
	text-align: center;
	margin-top: 60px;
    margin-bottom: 10px;
}

.your-url-display {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.your-url-display .edit-icon {
    width: 26px; /* Adjust size as needed */
    margin-left: 10px;
    cursor: pointer;
    vertical-align: middle; /* Aligns the pencil with the text */
}




/* Cards/Chicklets */

.chicklet-card-parent {
    width: 100%; /* Ensures the container takes the full width */
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px; /* Adjust the max width as needed */
    display: flex;
    flex-wrap: wrap; /* Allows the cards to wrap onto new rows */
    align-items: center;
    justify-content: center;
    gap: 16px; /* Adds space between the cards */
    text-align: left;
    font-size: 20px;
}

.chicklet-card {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    width: 300px; /* Fixed width for each card */
    background-color: #fff;
    border: 1px solid #dce2ec;
    box-sizing: border-box;
    height: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chicklet-card-link-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 24px;
    gap: 16px;
    width: 100%;
}

.chicklet-card-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.chicklet-card-text {
    flex: 1;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chicklet-card-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.chicklet-card-title {
    line-height: 30px;
    font-weight: 600;
}

.chicklet-card-subtext {
    font-size: 14px;
    line-height: 150%;
    color: #5d687e;
    white-space: normal; /* Allow the text to wrap */
    word-wrap: break-word;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chicklet-card-parent {
        flex-direction: column; /* Stack cards vertically on small screens */
        align-items: center;
    }
}


/* Back link navigation */

.back-link-container {
    text-align: left; /* Ensure left alignment of the entire container */
	margin-bottom: 20px; /* Add some space below the link */
}

.back-link {
    display: flex;
    align-items: center;
    font-size: 16px; /* Adjust font size as needed */
    font-family: Arial, sans-serif;
    color: #4a5568; /* Dark blue-gray color for text */
    cursor: pointer; /* Pointer cursor for hover */
    text-decoration: none; /* Removes underline */
    justify-content: flex-start; /* Ensures content is left-aligned in the flexbox */
}

.back-arrow {
    font-size: 18px; /* Slightly larger for emphasis */
    margin-right: 8px; /* Space between arrow and text */
    color: #4a5568; /* Dark blue-gray color for arrow */
}

.back-link:hover {
    color: #2c5282; /* Change color on hover for link */
}

/* Notification dialog box */

/* Notification container - dimmed background */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0); /* Dims the background */
    z-index: 999; /* Ensures the overlay appears on top of everything */
    opacity: 1;
    transition: opacity 0.5s ease;
    display: block; /* Use block instead of flex to control vertical position */
}

/* Fade-out effect */
.notification-overlay.fade-out {
    opacity: 0;
}

/* Notification dialog box - positioned 60px from the top */
.notification {
    max-width: 250px;
    background-color: #f0fff4;
    border: 1px solid #36b37e;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    opacity: 1;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 60px; /* Positioned 60px from the top */
    left: 50%; /* Horizontally centered */
    transform: translateX(-50%); /* Ensures proper centering horizontally */
    z-index: 1000; /* Ensure it's above the dimmed background */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Fade-out effect for the notification box */
.notification.fade-out {
    opacity: 0;
}

/* Icon styling */
.notification .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification .icon svg {
    width: 24px;
    height: 24px;
    fill: #36b37e;
}

/* Message styling */
.notification .message {
    margin-left: 12px;
    flex-grow: 1;
}

.notification .message h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #253858;
}

.notification .message p {
    margin: 0;
    font-size: 14px;
    color: #6b778c;
}

/* Close button styling */
.notification .close {
    cursor: pointer;
    color: #6b778c;
    border: none;
    background: none;
    font-size: 16px;
}

/* Ensure close button cursor doesn't change on hover */
.notification .close:hover {
    cursor: default;
}


/* Data Input Fields */

.wizard-text-area {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	font-size: var(--text-regular-mobile-normal-size);
	color: var(--gray-500);
}

.input-wizard {
	align-self: stretch;
	flex: 1;
	box-shadow: var(--shadows-shadow-xs);
	border-radius: var(--radius-md);
	background-color: var(--white);
	border: 1px solid var(--gray-300);
	overflow: hidden;
	display: flex;
	width: 320px;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
	padding: var(--spacing-lg) var(--padding-9xs) var(--padding-9xs) var(--padding-xs);
	gap: var(--spacing-md);
}

.custom-textarea {
    width: 100%; /* Full width of its container */
    /* max-width: 300px;  */
    padding: 20px 12px; /* 20px padding top & bottom, 12px left & right */
    border: 1px solid #d3d3d3; /* Muted, light gray border */
    border-radius: 8px; /* Smooth rounded corners */
    font-size: 12px; /* Smaller font size */
    line-height: 1.4; /* Adjusted line spacing for smaller text */
    background-color: #ffffff; /* Light background color */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
	font-family: var(--text-small-normal);	
}

.textarea {
    width: 100%; /* Full width of its container */
    max-width: 600px; /* Limit the max width */
    padding: 20px 12px; /* 20px padding top & bottom, 12px left & right */
    border: 1px solid #d3d3d3; /* Muted, light gray border */
    border-radius: 8px; /* Smooth rounded corners */
    font-size: 12px; /* Smaller font size */
    line-height: 1.4; /* Adjusted line spacing for smaller text */
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
	font-family: var(--text-small-normal);	
}


.input-form-wizard {
    display: flex;
    align-items: center;
    font-size: 14px;
    max-width: 300px;
	width: 100%;
    background: #ffffff;
    border: 2px solid #D3D3D3;
    border-radius: 4px;
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    overflow: hidden;
    font-weight: bold;
    color: #999;
    border-radius: 10px;
    font-family: var(--text-small-normal);	
	font-size: 12px;
	line-height: 1.4;
}

/* Outer container for the input field */
.data-input-field {
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

/* Container for the label and input */
.data-input-with-label {
    display: flex;
    flex-direction: column;
}

/* Label styling */
.data-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}

/* Input container */
.data-input-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Input field styling */
.data-input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px; /* Slightly rounded edges */
    background-color: #f9f9f9;
    color: #333;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Focus state for input field */
.data-input:focus {
    border-color: #36b37e; /* Modern green color */
    box-shadow: 0 0 5px rgba(54, 179, 126, 0.5);
    outline: none; /* Remove default outline */
    background-color: #fff;
}

/* Optional additional styles for input content container */
.data-input-content {
    width: 100%;
}

/* Make sure the input fits nicely into its container */
.data-input-content .data-input {
    width: 100%;
    box-sizing: border-box;
}

.data-input-sm {
    flex: 1; /* Allow input field to take available space */
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 0.5rem;
    outline: none;
}


/* Outer container for the input field */
.prepend-url-input-field {
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

/* Container for the label and input */
.prepend-url-input-with-label {
    display: flex;
    flex-direction: column;
}

/* Label styling */
.prepend-url-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}

/* Input container with flex layout */
.prepend-url-input-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Content inside the input container */
.prepend-url-input-content {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Prefix text for the URL (https://) */
.prepend-url-text-prefix {
    font-size: 14px;
    padding: 10px;
    background-color: #f0f0f0; /* Light background for the prefix */
    border: 1px solid #ccc;
    border-radius: 6px 0 0 6px; /* Rounded left edge */
    color: #333;
    white-space: nowrap; /* Ensure it doesn't wrap */
}

/* Input field styling */
.prepend-url-input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-left: none; /* Removes border between prefix and input */
    border-radius: 0 6px 6px 0; /* Rounded right edge */
    background-color: #f9f9f9;
    color: #333;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

/* Focus state for input field */
.prepend-url-input:focus {
    border-color: #36b37e; /* Green border on focus */
    box-shadow: 0 0 5px rgba(54, 179, 126, 0.5);
    outline: none;
    background-color: #fff;
}

/* Unique wrapper for the color picker component */
.unique-frame-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

/* Container for label and color box */
.unique-color-icons-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Label styling */
.unique-label {
    font-size: 16px;
    font-weight: bold;
    color: #253858;
    margin-right: 10px;
}

/* Color box and picker wrapper */
.unique-color-box-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Color box display */
.unique-color-box {
    width: 40px;
    height: 40px;
    background-color: #000000; /* Default color */
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    margin-left: 10px;
    border: 1px solid #ccc;
    display: inline-block;
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
}

/* Hide the color picker but still allow it to function */
.unique-color-picker {
    display: none; /* Completely hide the color picker */
}

.color-picker-input {
    width: 40px;
    height: 40px;
    border: 1px solid #B0BEC5; /* Light border */
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background-color: transparent;
    /* Ensures the color picker stays on the right */
}

/* Countdown Timer */

/* Styles for the loading spinner */
.loading-spinner-overlay {
    position: absolute; /* Changed from fixed to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding-top: 15%;
}

.spinner-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Countdown Timer Styling */
.countdown-timer {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}



.spinner {
    border: 6px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
}

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

.spinner-text {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 14px;
    color: #333;
    text-align: center;  /* Center the text */
    max-width: 400px;  /* Restrict width for better centering */
}

/* Toggle switches */

.column-left-social-toggle {
    flex: 1;
    text-align: left;
    padding-right: 20px;
    word-wrap: break-word;
}

.column-right-social-toggle {
    flex: 1;
	margin-top: 20px;
    text-align: left;
    font-size: 12px;
}

hr.section {
    border: 1px solid rgb(201, 201, 201);
    border-style: solid;
    margin-top: 20px;
    margin-bottom: 20px;
}

hr.sectionASPHP {
    border: 1px solid rgb(201, 201, 201);
    border-style: solid;
    margin-top: 20px;
    margin-bottom: 20px;
}

.switch-wrapper {
    display: flex;
    justify-content: space-between; /* Align label to left and switch to right */
    align-items: center; /* Vertically center both label and switch */
    margin-bottom: 10px;
    width: 100%;
}

.switch-label {
    font-weight: normal;
    margin-right: 10px; /* Adjust space between the label and the switch if needed */
    line-height: 1; /* Make sure the label text height matches the switch height */
}

.switch {
    position: relative;
    display: inline-block;
    padding-right: 20px;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

  /* The slider */
  .slider {
    display: inline-block;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 10px; /* 10px from the right */
    transition: background-color 0.4s;
}
  
  .slider::before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background-color: white;
	left: 4px;
	bottom: 3px;
	transition: transform 0.4s;
  }
  
  /* Checkbox checked */
  input:checked + .slider {
	background-color: #757575; /* Grey color for active state */
  }
  
  input:checked + .slider::before {
	transform: translateX(26px); /* Moves the slider ball */
  }
  
  /* Optional: Add focus styles for accessibility */
  input:focus + .slider {
	box-shadow: 0 0 1px #757575;
  }
  
.just-give-me-some-space-20 {
    margin-top: 20px;
  }

.just-give-me-some-space-40 {
    margin-top: 40px;
  }

.just-give-me-some-space-10 {
        margin-top: 10px;
    }


.idea-icon {
        width: 18px; /* Adjust this size as necessary */
        height: auto;
        margin-right: 8px; /* Spacing between the icon and text */
        vertical-align: sub; /* Moves the image slightly below the text baseline */
    }
    


/* Question related styles */

.questionOverride {
	font-weight: bold;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ccc;
	width: 400px;
	height: 200px;
	top: 50%;
	left: 50%;
	color: rgb(23, 21, 21);
	padding: 10px;
	border-radius: 5px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	text-align: center; /* Center the text horizontally within the alert box */
  }

  .buttonOutlineOnly {
    display: block; /* Makes the anchor tag a block element, taking full width */
    width: 100%;
    height: 100%;
    position: relative;
    padding: 16px var(--spacing-3xl);
    text-decoration: none;
    border: 1px solid var(--gray-200); /* Retained the final border setting */
    margin-bottom: 10px;
    filter: var(--shadows-shadow-xs);
    border-radius: var(--br-xs); /* Retained the final border-radius */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    text-align: left;
    font-size: var(--text-small-normal-size);
    color: var(--gray-900);
    font-family: var(--text-small-normal);
    box-shadow: var(--xsmall);
    background-color: var(--white);
}

.questionLabelSmallLeft {
	flex: 1;
	display:block;
	position: relative;
	line-height: 20px;
	font-weight: 600;
  }

  .questionBlank {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	font-size: smaller;
	opacity: 0.5;
  }

  .questionNotBlank {
	align-self: stretch;
	position: relative;
	line-height: 150%;
	color: var(--gray-700);
  }
  
  .questionNotBlankSmall {
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-size: 8px;
	white-space: pre-wrap;
	opacity: 1;
	font-weight: bold;
	line-height: 0.5;
  }
  
  .questionDisplayLabel {
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: larger;
    opacity: 0.9;
    text-align: left;
    margin-bottom: 15px;
}

.input-form-sm {
    flex: 1; /* Allow input field to take available space */
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 0.5rem;
    outline: none;
}

.input-form-sm::placeholder {
    color: #999;
}

.questionOptionLabelSmall {
	display: block;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	font-size: small;
	opacity: 1;
	text-align: left;
	margin-bottom: 5px;
  }

  .questionOptionLabelNormal {
	display: block;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	font-size: normal;
	opacity: 0.9;
	text-align: center;
	margin-bottom: 5px;
  }

  .questionOptionLabelFollowingPart {
	display: block;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-size: x-small;
	opacity: 0.9;
	text-align: center;
	margin-bottom: 5px;
  }
  
/* Button Styles */

.color-of-social-icons-parent {
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* Favorites */

.favorite-item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.favorite-item > * {
    margin-bottom: 10px; /* Add some space between each element */
    width: 100%;         /* Ensure each element takes up the full width */
}


.favorite-id {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.favorite-site-link {
    font-size: x-small;
    font-weight: normal;
    margin-top: 10px;
}

.favorite-slug {
    color: #666666;
	font-size: 18px;
    font-weight: normal;
}

.favorite-description {
    color: #666666;
	font-size: 12px;
    font-weight: normal;
}

.divider {
    border-top: 1px solid #cccccc;
    margin: 20px 0;
}

.no-favorites {
    font-size: 16px;
    color: red;
    text-align: center;
}

.error-message {
    color: red;
    font-size: 16px;
}

/* Styling specifically for custom radio buttons */
.custom-radio {
    appearance: none; /* Hide default appearance */
    background-color: #fff; /* White background */
    border: 2px solid #007bff; /* Blue border */
    border-radius: 50%; /* Circular border */
    width: 25px; /* Default width */
    height: 25px; /* Default height */
    cursor: pointer;
    margin-right: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for effects */
}

/* Style for checked state */
.custom-radio:checked {
    background-color: #007bff; /* Blue background for checked */
    transform: scale(1.1); /* Scale effect */
    box-shadow: 0 0 8px #007bff; /* Shadow effect */
    animation: pulse 1.5s infinite; /* Pulse animation */
}

/* Styling specifically for custom radio buttons */
.custom-radio-button-styles {
    appearance: none; /* Hide default appearance */
    background-color: #fff; /* White background */
    width: 25px; /* Default width */
    height: 25px; /* Default height */
    cursor: pointer;
    margin-right: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for effects */
}

/* Style for checked state */
.custom-radio-button-styles:checked {
    background-color: #007bff; /* Blue background for checked */
    transform: scale(1.1); /* Scale effect */
    box-shadow: 0 0 8px #007bff; /* Shadow effect */
    animation: pulse 1.5s infinite; /* Pulse animation */
}


/* Pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* Alternate row background colors */
.table tr:nth-child(odd) {
    background-color: #f4f4f4; /* Very light grey background for odd rows */
}

.table tr:nth-child(even) {
    background-color: #ffffff; /* White background for even rows */
}

/* Responsive table adjustments */
@media (max-width: 2600px) {
    .table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 15px; /* Increase padding for better touch interaction */
        text-align: center; /* Center content for mobile view */
    }

    /* Style to make the custom radio buttons larger and easier to touch */
    .custom-radio {
        width: 60px; /* Larger radio button */
        height: 60px; /* Larger radio button */
        margin-top: 10px; /* Add space above the radio button */
    }
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

ul.tools {
	list-style-type: none;
	margin: 10px;
	padding: 20px;
	font-size: 24px;
	line-height: 1.9;
	margin-top: 20px;
  }

  .form-spacing {
    margin-bottom: 20px;
  }

  .explanationNote {
    font-size: 12px;
    color: #666;
    text-align: left;
    margin: 0 0 20px;
  }

  .hint-text {
	align-self: stretch;
	position: relative;
	line-height: 24px;
	color: var(--gray-700);
}

.ai-image-wizard-examples {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

.ai-image-wizard-styled-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.ai-image-wizard-styled-list li {
    padding: 10px;
    margin: 8px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: left;
    width: 100%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.ai-image-wizard-styled-list li:hover {
    background-color: #e6f7ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ai-image-wizard-styled-list li::before {
    content: '✦';
    color: #1976D2;
    margin-right: 10px;
}



/* Spinner container - positioned in the top third */
.lander-5000-spinner-container {
    position: fixed;
    top: 20%;  /* Top third of the page */
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9999; /* Ensures it's on top */
    display: none; /* Initially hidden */
}

/* Spinner - Twice as large */
.lander-5000-spinner {
    border: 20px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3498db;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    animation: lander-5000-spin 1s linear infinite;
}

/* Spinner Animation */
@keyframes lander-5000-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Button disabled state */
.lander-5000-continue-btn-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Modal container */
.wizard-examples-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* Dark background */
}

.wizard-examples-modal-content {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to truly center the modal */
    width: 350px;
    height: 500px;
    background-color: white;
    border-radius: 10px;
    padding: 10px 16px 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: bottom 0.3s ease-in-out;
}


/* Show the modal content when modal is visible */
.wizard-examples-modal.show .wizard-examples-modal-content {
    bottom: 50px;
}

/* Close button */
.wizard-examples-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

/* Card styles */
.wizard-examples-ideas {
    max-height: 400px;
    overflow-y: auto;
}

.wizard-examples-card {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 8px 0 0;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


/* Adjusting image width to take up 40% of the card */
.wizard-examples-card img {
    max-width: 60%;
    margin-right: 10px;
    border-radius: 5px;
    transition: transform 0.3s ease;  /* Smooth transition for resizing and shifting */
}

/* Adjust text styles */
.wizard-examples-text {
    cursor: pointer;
    background-color: #fbfbfb; /* Very light background */
    padding: 8px;
    border-radius: 5px;
    font-size: 14px; /* Smaller text */
    flex: 1; /* Allow text to take the remaining space */
}

.wizard-examples-text:hover {
    background-color: #f0f0f0;
}

/* Container to ensure the link is aligned properly */
.wizard-examples-link-container {
    text-align: left; /* Forces content inside to be aligned left */
    width: 100%; /* Optional: Make sure the container takes up full width */
}

/* Link styling */
.wizard-examples-need-ideas-link {
    margin-top: 15px;
    margin-bottom: 40px;
    display: inline-block; /* Ensures the link behaves like a block for margins */
    text-align: left; /* Text inside the link is left-aligned */
    color: var(--blue-brand-blue);
    text-decoration: none; /* Remove underline if you want */
}


/* Flexbox container for the header */
.wizard-examples-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px; /* Adjust padding as needed */
}

/* Title styling */
.wizard-examples-title {
    font-size: 16px;
    /* font-weight: bold; */
    color: #2f3e46; /* Adjust the color to match the design */
    margin: 0; /* Remove default margins */
}




/* Close button container (keeps the existing styles) */
.wizard-examples-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d1d8e0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* X inside the close button */
.wizard-examples-close-btn span {
    font-size: 24px;
    color: #5a6470;
}

/* Hover effect */
.wizard-examples-close-btn:hover {
    background-color: #e0e6ed;
}

/* Container class to place buttons side by side */
.home-button-container-tight {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Add space between the buttons */
    margin-top: 12px;
    margin-bottom: 12px;
    max-width: 350px; /* Optional: limit container width */
}

/* Individual button styles */
.home-button-container-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid var(--blue-brand-blue);
    background-color: transparent; /* Transparent background */
    color: var(--blue-brand-blue);
    cursor: pointer;
    font-size: 12px;
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease;
    flex-grow: 1; /* Make buttons take equal space */
    text-align: center;
    min-width: 140px; /* Ensures minimum width for both buttons */
}

.home-button-container-btn:hover {
    background-color: #E6F8FF; /* Blue background on hover */

}

.home-button-container-btn img {
    margin-right: 8px; /* Add space between icon and text */
    filter: invert(32%) sepia(91%) saturate(5977%) hue-rotate(196deg) brightness(99%) contrast(104%); /* Blue icon color */
}

/* Button icon styles */
.home-button-container-icon {
    width: 20px;
    height: 20px;
}

/* Expand for more options */

/* For all screens */
.expand-more-options-container {
    width: 100%;
    font-family: Arial, sans-serif;
}

.expand-more-options-header {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left */
    align-items: center;
    cursor: pointer;
    color: #007bff;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

.expand-more-options-title {
    font-size: 1rem;
    font-weight: bold;
    margin-right: 10px; /* Adds space between the title and arrow */
}

.expand-more-options-icon {
    font-size: 1rem;
    color: black;
    transition: transform 0.3s ease;
    margin-left: 10px; /* Adds space after the title before the arrow */
}

.expand-more-options-content {
    font-size: 0.9rem;
    color: #333;
}

.expand-more-options-hidden {
    display: none;
}

.expand-more-options-show {
    display: block;
}

.expand-more-options-rotate {
    transform: rotate(180deg);
}

#countdown, #spinnerMessage {
    will-change: content;
}

.progress-container {
    width: 320px;
    max-width: 320px; /* Limits the width of the container */
    margin: 20px auto; /* Horizontally centers the container */
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    text-align: center; /* Aligns text within the container */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.progress-bar-container {
    display: flex;
    align-items: center; /* Vertically align percentage text */
    gap: 20px; /* Space between the bar and percentage */
}

.progress-bar {
    flex: 1; /* Take all available space */
    background-color: #e5e5e5;
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
    position: relative;
}

.progress-fill {
    background-color: #007bff; /* Blue color */
    width: 0%; /* Initially empty */
    height: 100%;
    transition: width 0.2s ease; /* Smooth width transition */
}

#progressPercentage {
    font-size: 12px; /* Smaller font for the percentage */
    color: #4a4a4a;
    white-space: nowrap; /* Prevents wrapping */
}


.ai-interstitial {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 320px;
    overflow: hidden;
    text-align: left;
	margin-top: 10px;
}

.ai-interstitial-image-section {
    /* background-color: #e0f4ff; */
    padding: 0px;
    display: flex;
    justify-content: center;  /* Centering the image horizontally */
    align-items: center;      /* Centering the image vertically if needed */
}

.ai-interstitial-image {
    width: 300px;
    height: auto;
    margin-bottom: 10px;
}

.ai-interstitial-text-section {
    padding: 20px;
}

.ai-interstitial-heading {
    font-size: 18px;
    font-weight: bold;
    color: #333;
	text-align: left;
    margin: 0 0 10px;
}

.ai-interstitial-subheading {
    font-size: 16px;
    color: #666;
	text-align: left;
    margin: 0 0 20px;
}

.thumbnail-container {
    position: relative;
    display: inline-block;
}

.thumbnail-container img {
    display: block;
    width: 100%; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: to make the thumbnail look better */
}

.preview-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent black background */
    color: rgb(237, 234, 234);
    text-align: center;
    padding: 8px;
    font-size: 14px;
    font-weight: regular;
    border-bottom-left-radius: 8px; /* Match with img border-radius if needed */
    border-bottom-right-radius: 8px;
}

/* General styles for analysis sections */
.analysis-section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Title styles */
.analysis-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* Content styles */
.analysis-content {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* Spacing between sections */
.analysis-section + .analysis-section {
    margin-top: 30px;
}

/* Unique styles for each section */
.analysis-section1 {
    background-color: #e8f5e9; /* Light green */
}

.analysis-section2 {
    background-color: #e3f2fd; /* Light blue */
}

.analysis-section3 {
    background-color: #fbe9e7; /* Light red */
}

/* Title colors for each section */
.analysis-title1 {
    color: #2e7d32; /* Dark green */
}

.analysis-title2 {
    color: #1565c0; /* Dark blue */
}

.analysis-title3 {
    color: #d32f2f; /* Dark red */
}


/* Modal styles for confrimation */
.universal-confirmation-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.universal-confirmation-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    text-align: center;
}

.universal-confirmation-modal-content p {
    margin-bottom: 20px;
}

.universal-confirmation-buttons {
    display: flex;
    justify-content: space-between;
}

.universal-confirmation-button {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.universal-confirmation-button-cancel {
    background-color: #ccc;
}

.universal-confirmation-button-save {
    background-color: #28a745;
}


.universal-confirmation-button-continue {
    background-color: #3498db;
    color: white;
}


.universal-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background-color: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.universal-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.template-page-wrapper {
    width: 400px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
}

.template-card {
    background: #fff;
    border: none;
    height: auto;
    width: 140px;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.template-card-image-wrapper {
    width: 100%;
    /* padding-top: 56.25%;  */
    position: relative;
    background: #f8f8f8;
}

.template-thumbnail {
    /* position: absolute; */
    object-fit: cover;
    border-radius: 8px;
    object-position: top;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-card-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.template-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.template-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 10px;
}

.template-badge {
    background-color: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    align-self: center; /* Center vertically if inside flex parent */
    margin: 0 auto;     /* Center horizontally */
    display: inline-block; /* Ensure it behaves properly */
}

.template-filters {
    margin-bottom: 20px;
}

.template-filters a {
    text-decoration: none;
    color: #333;
    margin-right: 15px;
    font-weight: normal;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.template-filters a.active {
    color: #186DED; /* blue, same as your homepage badge */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid #186DED; /* underline effect */
}