/* Amazon-inspired Color Palette */
:root {
    --amazon-primary-blue: #232F3E; /* Amazon Header Blue */
    --amazon-secondary-blue: #007185; /* Amazon Link Blue */
    --amazon-orange: #FF9900; /* Amazon Orange */
    --amazon-yellow-accent: #FFA41C; /* Amazon Yellow/Orange for buttons */
    --amazon-light-grey-bg: #EAEDED; /* Amazon light grey background */
    --amazon-dark-text: #0F1111; /* Amazon dark text */
    --amazon-medium-text: #555555;
    --amazon-light-text: #FFFFFF;
    --amazon-border-color: #DDD;
    --amazon-sale-red: #B12704; /* Amazon's sale price red */
    --amazon-green-accent: #007600; /* A green for success/positive info */
}

/* Global Resets and Base Styles */
body {
    font-family: Arial, sans-serif; /* Common Amazon font stack fallback */
    margin: 0;
    padding: 0;
    background-color: var(--amazon-light-grey-bg);
    color: var(--amazon-dark-text);
    line-height: 1.5; /* Adjusted for readability */
}

/* Shake animation for modals */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Task Box Styles - CSS-only collapse with checkbox */
.task-box {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 600px;
    width: fit-content;
    background-color: #ffffff;
    border: 2px solid var(--amazon-secondary-blue);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10100;
}

/* Hide the checkbox but keep it functional */
.task-box-collapse-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-box-header {
    background-color: var(--amazon-secondary-blue);
    color: white;
    border-radius: 6px 6px 0 0;
}

.task-box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
}

.task-box-title:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.collapse-indicator {
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* Show expand arrow by default */
.task-box-collapse-input:not(:checked) ~ .task-box-header .expand-text {
    display: inline;
}

.task-box-collapse-input:not(:checked) ~ .task-box-header .collapse-text {
    display: none;
}

/* Show collapse arrow when expanded */
.task-box-collapse-input:checked ~ .task-box-header .expand-text {
    display: none;
}

.task-box-collapse-input:checked ~ .task-box-header .collapse-text {
    display: inline;
}

/* Content area - expanded by default */
.task-box-content {
    padding: 15px;
    max-height: none;
    overflow-y: auto;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    opacity: 1;
}

/* Content area - collapsed when checkbox is checked */
.task-box-collapse-input:checked ~ .task-box-content {
    max-height: 0;
    padding: 0 15px;
    opacity: 0;
}

/* Header border radius when collapsed */
.task-box-collapse-input:checked ~ .task-box-header {
    border-radius: 6px;
}

.task-description {
    margin: 0 0 15px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--amazon-dark-text);
}

.task-uuid-display {
    margin: 0 0 15px 0;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.uuid-label {
    font-size: 11px;
    color: var(--amazon-medium-text);
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
}

.uuid-value {
    font-size: 11px;
    color: var(--amazon-dark-text);
    word-break: break-all;
    line-height: 1.2;
}

.task-id-display {
    margin: 0 0 15px 0;
    padding: 8px 10px;
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.task-id-label {
    font-size: 11px;
    color: #0056b3;
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
}

.task-id-value {
    font-size: 10px;
    color: #004085;
    font-weight: normal;
    word-break: break-all;
    line-height: 1.2;
}

.task-box-buttons {
    display: flex;
    gap: 10px;
}

.task-collapse-button {
    flex: 1;
    background-color: var(--amazon-border-color);
    color: var(--amazon-dark-text);
    border: 1px solid var(--amazon-border-color);
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease, border-color 0.3s ease;
}

.task-collapse-button:hover {
    background-color: #f0f0f0;
    border-color: var(--amazon-secondary-blue);
    transform: translateY(-1px);
}

.task-collapse-button:active {
    transform: translateY(0);
}

.task-collapse-button:focus {
    outline: 2px solid var(--amazon-secondary-blue);
    outline-offset: 2px;
}

.task-finish-button {
    flex: 1;
    background-color: var(--amazon-orange);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.task-finish-button:hover {
    background-color: var(--amazon-yellow-accent);
    transform: translateY(-1px);
}

.task-finish-button:active {
    transform: translateY(0);
}

.task-finish-button:focus {
    outline: 2px solid var(--amazon-secondary-blue);
    outline-offset: 2px;
}

.container {
    width: 90%;
    max-width: 1300px; /* Slightly wider max-width */
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
}

.main-content {
    flex-grow: 1;
}

#mini-cart-container {
    width: 25%;
    margin-left: 20px;
    padding: 15px;
    border: 1px solid var(--amazon-border-color);
    border-radius: 4px;
    background-color: #f7f7f7; /* Lighter than page bg */
}

/* Header and Navigation */
header {
    background-color: var(--amazon-primary-blue);
    color: var(--amazon-light-text);
    padding: 0.75em 0; /* Adjusted padding */
    text-align: center;
    border-bottom: 1px solid #131A22; /* Darker border for depth */
}

header .site-title a {
    color: var(--amazon-orange);
    text-decoration: none;
    font-size: 2em;
    font-weight: bold;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 10px; /* Slightly reduced margin */
}

nav ul li a {
    color: var(--amazon-light-text);
    text-decoration: none;
    font-weight: 500; /* Amazon uses slightly bolder nav links */
    padding: 8px 12px;
    border-radius: 3px; /* Amazon-like subtle radius */
    transition: background-color 0.2s ease, color 0.2s ease;
}

nav ul li a:hover,
nav ul li a:focus {
    background-color: var(--amazon-secondary-blue);
    color: var(--amazon-light-text);
    text-decoration: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 25px 0;
    margin-top: 30px;
    background-color: var(--amazon-primary-blue);
    color: var(--amazon-light-text);
    font-size: 0.9em;
}

/* Buttons */
.button, button, input[type="submit"], input[type="button"] {
    background-color: var(--amazon-yellow-accent);
    color: var(--amazon-dark-text); /* Dark text on yellow buttons for contrast */
    padding: 9px 18px; /* Amazon-like padding */
    border: 1px solid #a88734; /* Border for yellow buttons */
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.95em; /* Slightly smaller button text */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
    text-align: center;
    font-weight: 500;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #f0c14b; /* Lighter yellow on hover */
}

/* Add to Cart Button Specific Style */
.add-to-cart-button {
    background-color: var(--amazon-orange); /* Brighter orange for primary action */
    color: var(--amazon-dark-text);
    border-color: #e77600;
}

.add-to-cart-button:hover {
    background-color: #df8900;
}

/* General Link Styles */
a {
    color: var(--amazon-secondary-blue);
    text-decoration: none;
}

a:hover {
    color: var(--amazon-orange); /* Orange hover for links */
    text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--amazon-dark-text);
    margin-top: 0;
    margin-bottom: 0.5rem; /* Amazon uses tighter spacing */
    font-weight: 500; /* Common weight for Amazon headings */
}

h1 { font-size: 1.8em; margin-bottom: 1rem; } /* Amazon H1 is often larger and more spaced */
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

/* Product Grid Styles */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Slightly adjusted minmax */
    gap: 20px; /* Reduced gap */
    padding: 15px 0; /* Reduced padding */
}

.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid var(--amazon-border-color);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.product:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    /* transform: translateY(-3px); */ /* Subtle lift is okay, but Amazon is often static */
}

.product img, .product .image_placeholder {
    max-width: 100%;
    height: 180px; /* Adjusted height */
    object-fit: contain; /* Amazon often uses contain to show full product */
    margin-bottom: 10px;
    border-radius: 3px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff; /* Image placeholder on white bg */
    text-align: center;
    line-height: 180px;
    color: var(--amazon-medium-text);
}

.product h2 {
    font-size: 1.1em; /* Smaller product titles */
    margin-bottom: 8px;
    font-weight: 400; /* Lighter product titles */
}

.product h2 a {
    color: var(--amazon-dark-text);
    text-decoration: none;
}

.product h2 a:hover {
    color: var(--amazon-orange);
}

.product .price {
    font-size: 1.25em; /* Larger price */
    font-weight: 500; /* Bolder price */
    color: var(--amazon-sale-red);
    margin-bottom: 8px;
}

.product .price del {
    color: var(--amazon-medium-text); /* Grey for original price */
    font-weight: normal;
    margin-right: 6px;
    font-size: 0.85em;
}

.product .review-summary {
    font-size: 0.85em;
    color: var(--amazon-secondary-blue); /* Link color for reviews */
    margin-bottom: 8px;
}

.product .star-filled {
    color: var(--amazon-orange); /* Orange stars */
}

.product .star-empty {
    color: #ccc;
}

.product p {
    font-size: 0.9em; /* Smaller general text */
    margin-bottom: 8px;
    color: var(--amazon-dark-text);
}

.product .details_placeholder {
    font-style: normal; /* No italics */
    color: var(--amazon-medium-text);
    font-size: 0.85em;
}


.product .viewing-users-box {
    background-color: #f0f8ff; /* Lighter blue */
    border: 1px solid #cce7ff;
    color: var(--amazon-secondary-blue);
    padding: 6px;
    margin-bottom: 8px;
    border-radius: 3px;
    text-align: center;
    font-size: 0.8em;
}

.product .limited-stock-message {
    color: var(--amazon-sale-red);
    font-weight: 500;
    font-size: 0.85em;
    margin-top: 4px;
}

.product .timer-display {
    margin-top: 8px;
    font-weight: 500;
    color: var(--amazon-secondary-blue);
    font-size: 0.85em;
}

/* Sponsored Product Specific Styles */
.sponsored-product {
    border: 5px solid var(--amazon-sale-red); /* Standard border, sponsorship indicated by text */
    position: relative;
}

.sponsored-product::before {
    content: "Sponsored";
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #f0f0f0; /* Light grey badge background */
    color: var(--amazon-medium-text);
    padding: 2px 6px;
    font-size: 2em;
    border-radius: 3px;
    font-weight: 400;
    border: 1px solid #ccc;
}

.product.red-border {
    border: 2px solid var(--amazon-sale-red) !important; /* Make sure red border is visible */
}


/* Modal Base Styles */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 17, 17, 0.7); /* Amazon dark transparent bg */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background-color: #fff;
    padding: 25px; /* Adjusted padding */
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 480px; /* Slightly adjusted */
    text-align: left; /* Modals often have left-aligned text */
    position: relative;
    animation: fadeInModal 0.2s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--amazon-dark-text);
    font-size: 1.5em; /* Adjusted size */
    font-weight: 500;
}

.modal-content p {
    margin-bottom: 20px;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--amazon-dark-text);
}

.modal-content label {
    display: block;
    text-align: left;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 0.9em;
    color: var(--amazon-dark-text);
}

.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content input[type="email"] {
    width: calc(100% - 24px);
    padding: 10px; /* Adjusted padding */
    margin-bottom: 15px;
    border: 1px solid #a6a6a6; /* Amazon input border */
    border-radius: 3px;
    font-size: 1em;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.modal-content input[type="text"]:focus,
.modal-content input[type="password"]:focus,
.modal-content input[type="email"]:focus {
    border-color: var(--amazon-orange);
    box-shadow: 0 0 0 3px #fde4bf, inset 0 1px 2px rgba(0,0,0,0.1); /* Amazon focus style */
    outline: none;
}

.modal-content button, .modal-content .button {
    font-size: 1em;
    min-width: auto;
    margin: 10px 0 5px 0; /* Adjusted margin for stacked buttons */
}

/* .modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.6em;
    color: #767676;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close-button:hover {
    color: var(--amazon-orange);
} */

/* Specific Modal Styling */

/* Login Modal */
#loginModalBackdrop .login-modal-content h2 {
    color: var(--amazon-dark-text);
    text-align: center; /* Center title for login */
}
#closeModalButton { /* Ensure this specific button is styled like generic modal close */
    position: absolute;
    top: 10px;
    right: 10px;
    color: #767676;
    font-size: 1.6em;
    cursor: pointer;
    z-index: 1001;
    opacity: 1;
    background: none;
    border: none;
    line-height: 1;
}
#closeModalButton:hover {
    color: var(--amazon-orange);
}


/* Item Popup Ad Modal (bottom right) */
.popup-ad-modal {
    position: fixed;
    display: none;
    z-index: 999;
    background-color: #fff;
}

#itemPopupAdModal.popup-ad-modal {
    bottom: 15px;
    right: 15px;
    width: 300px;
    max-width: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: slideInAd 0.4s ease-out;
    border-radius: 3px;
    border: 1px solid var(--amazon-border-color);
}

@keyframes slideInAd {
    from { opacity: 0; transform: translateX(25px); }
    to { opacity: 1; transform: translateX(0); }
}

#itemPopupAdModal .modal-content { /* Apply base modal content styling */
    padding: 15px;
}

#itemPopupAdModal h3 { /* Specific styling for h3 inside this ad */
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--amazon-secondary-blue);
    font-size: 1.15em;
    font-weight: 500;
}
#itemPopupAdModal p { /* Specific styling for p inside this ad */
    font-size: 0.9em;
    margin-bottom: 10px;
    color: var(--amazon-dark-text);
}
#itemPopupAdModal a { /* Specific styling for a inside this ad */
    color: var(--amazon-secondary-blue);
    font-weight: 500;
}
#itemPopupAdModal .close-popup-ad {
    top: 8px;
    right: 8px;
    font-size: 1.4em;
    color: #767676;
}
#itemPopupAdModal .close-popup-ad:hover {
    color: var(--amazon-orange);
}


/* Subscription Popup Modal */
#subscriptionModalBackdrop .subscription-modal-content h2 {
    color: var(--amazon-green-accent); /* Green for subscription success/info */
    text-align: center;
}
#subscriptionModalBackdrop .subscription-modal-content button { /* Main action button */
    background-color: var(--amazon-yellow-accent);
    color: var(--amazon-dark-text);
    border-color: #a88734;
}
#subscriptionModalBackdrop .subscription-modal-content button:hover {
    background-color: #f0c14b;
}

/* Urgency Popup Modal */
#urgencyModalBackdrop {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10001;
}

#urgencyModalBackdrop .urgency-modal-content {
    background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
    color: white;
    padding: 35px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    border-radius: 16px;
    border: 3px solid rgba(255,255,255,0.2);
    /* Removed pulsing animation: animation: urgencyPulse 1.5s ease-in-out infinite alternate; */
}

.modal-close-button {
    position: absolute;
    top: 12px;
    right: 16px;
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
    background: none;
    border: none;
}

.urgency-header .urgency-icon {
    font-size: 50px;
    margin-bottom: 10px;
}

.urgency-header h1 {
    color: #ffeb3b;
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.urgency-header h2 {
    color: white;
    margin: 0 0 20px 0;
    font-size: 22px;
    font-weight: 600;
}

.urgency-product {
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.urgency-product-image {
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.urgency-product h3 {
    color: white;
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: bold;
}

.urgency-stock {
    color: #ffeb3b;
    font-size: 14px;
    margin: 0 0 10px 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.urgency-viewers {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    margin: 0;
    font-style: italic;
}

.urgency-button {
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    background: #ffeb3b !important;
    color: #333 !important;
    border: none !important;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(255,235,59,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.urgency-button:hover {
    background: #fdd835 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,235,59,0.6);
}

.urgency-disclaimer {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin: 15px 0 0 0;
    line-height: 1.3;
}

@keyframes urgencyPulse {
    0% { transform: scale(1); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
    100% { transform: scale(1.02); box-shadow: 0 25px 70px rgba(0,0,0,0.6); }
}

@keyframes urgencyShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* Newsletter Urgency Popup Modal */
#newsletterUrgencyModalBackdrop {
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10002;
}

#newsletterUrgencyModalBackdrop .newsletter-urgency-modal-content {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    color: white;
    padding: 40px;
    width: 100%;
    max-width: 460px;
    text-align: center;
    border-radius: 16px;
    border: 3px solid rgba(255,255,255,0.3);
}

.newsletter-urgency-header .newsletter-urgency-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.newsletter-urgency-header h1 {
    color: #ff6b35;
    margin: 0 0 8px 0;
    font-size: 36px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.newsletter-urgency-header h2 {
    color: white;
    margin: 0 0 25px 0;
    font-size: 24px;
    font-weight: 600;
}

.newsletter-urgency-content {
    margin-bottom: 30px;
}

.newsletter-countdown {
    background: rgba(255,107,53,0.2);
    border: 2px solid #ff6b35;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: inline-block;
}

.countdown-number {
    font-size: 48px;
    font-weight: 900;
    color: #ff6b35;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.countdown-label {
    font-size: 14px;
    font-weight: bold;
    color: #ff6b35;
    margin-top: 5px;
    letter-spacing: 2px;
}

.newsletter-warning {
    color: #ff6b35;
    font-size: 16px;
    margin: 20px 0 15px 0;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.newsletter-benefits {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    margin: 15px 0 20px 0;
    line-height: 1.4;
}

.newsletter-price-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    font-size: 18px;
    font-weight: bold;
}

.old-price {
    color: #4caf50;
    text-decoration: line-through;
}

.arrow {
    color: #ff6b35;
    font-size: 24px;
}

.new-price {
    color: #f44336;
}

.newsletter-form {
    margin: 25px 0 20px 0;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255,255,255,0.6);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: #ff6b35;
    background: rgba(255,255,255,0.15);
}

.newsletter-urgency-button {
    width: 100%;
    padding: 18px 20px;
    font-size: 18px;
    background: #ff6b35 !important;
    color: white !important;
    border: none !important;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 900;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(255,107,53,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.newsletter-urgency-button:hover {
    background: #e55722 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,107,53,0.6);
}

.newsletter-disclaimer {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin: 15px 0 0 0;
    line-height: 1.3;
}

@keyframes newsletterPulse {
    0% { transform: scale(1); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
    100% { transform: scale(1.01); box-shadow: 0 25px 70px rgba(0,0,0,0.7); }
}

/* Cookie Consent Modal */
#cookieConsentModalBackdrop .cookie-consent-modal-content h2 {
    color: var(--amazon-dark-text);
    text-align: center;
}
#cookieConsentModalBackdrop .cookie-consent-modal-content button#acceptCookieConsentButton {
    background-color: var(--amazon-yellow-accent); /* Primary action */
    color: var(--amazon-dark-text);
    border-color: #a88734;
}
#cookieConsentModalBackdrop .cookie-consent-modal-content button#acceptCookieConsentButton:hover {
    background-color: #f0c14b;
}
#cookieConsentModalBackdrop .cookie-consent-modal-content button#declineCookieConsentButton {
    background-color: #f0f0f0; /* Lighter grey for secondary action */
    color: var(--amazon-dark-text);
    border: 1px solid #adb1b8;
}
#cookieConsentModalBackdrop .cookie-consent-modal-content button#declineCookieConsentButton:hover {
    background-color: #e7e7e7;
}

/* Contact Preferences Modal */
#contactPreferencesModalBackdrop .contact-preferences-modal-content {
    text-align: center; /* Center content for this modal */
}
#contactPreferencesModalBackdrop .contact-preferences-modal-content h2 {
    font-size: 1.3em;
    color: var(--amazon-dark-text);
}
#contactPreferencesModalBackdrop .contact-preferences-modal-content p {
    font-size: 0.9em;
}
#contactPreferencesModalBackdrop .contact-preferences-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}
#contactPreferencesModalBackdrop .contact-preferences-buttons button {
    padding: 12px 18px; /* Adjusted padding */
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    font-size: 0.9em;
    background-color: #f0f0f0;
    color: #adb1b8;
    width: 100%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#contactPreferencesModalBackdrop .contact-preferences-buttons button:nth-child(2) {
    /* Make it smaller in width */
    width: 20%; /* You can adjust this percentage or use a fixed pixel value like 250px */

    /* Center the button if it's no longer 100% width */
    display: block; /* Important to allow margin auto to work */
    margin: 10px auto; /* Adds 10px top/bottom margin and centers horizontally */

    /* Optional: Reduce padding to make it visually smaller */
    padding: 8px 15px; /* Adjust padding as desired */

    /* Optional: Reduce font size */
    font-size: 0.3em; /* Make the text slightly smaller */

    /* Ensure its specific background/color if not inherited from general styles */
    background-color: #f0f0f0; /* Keeping its current background */
    border: 1px solid #f0f0f0;
    color: #adb1b8; /* Keeping its current text color */
}
#contactPreferencesModalBackdrop .contact-preferences-buttons button:hover {
    background-color: #e7e7e7;
    border-color: #999;
}
#contactPreferencesModalBackdrop .contact-preferences-buttons button.contact-preferences-button-yes {
    background-color: var(--amazon-yellow-accent);
    color: var(--amazon-dark-text);
    border-color: #a88734;
}
#contactPreferencesModalBackdrop .contact-preferences-buttons button.contact-preferences-button-yes:hover {
    background-color: #f0c14b;
}
#contactPreferencesModalBackdrop .contact-preferences-footer {
    font-size: 0.8em;
    color: var(--amazon-medium-text);
}
#contactPreferencesModalBackdrop .contact-preferences-footer a {
    color: var(--amazon-secondary-blue);
}
#contactPreferencesModalBackdrop input[type="button"]#yesCheckbox,
#contactPreferencesModalBackdrop input[type="button"]#noCheckbox {
    color: #f0f0f0;
}


/* Cookies Popup (Dark Pattern Example) - Maintain its distinct, tricky styling but with Amazon-ish button colors */
#cookiesPopupBackdrop .cookies-popup-content {
    background-color: var(--amazon-primary-blue); /* Dark background */
    color: var(--amazon-light-text);
    max-width: 550px;
    border: 2px solid var(--amazon-orange); /* Orange border to make it pop */
    border-radius: 4px;
}
#cookiesPopupBackdrop .cookies-popup-content h2 {
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 2em;
    color: var(--amazon-orange);
    margin-bottom: 15px;
    text-align: center;
}
#cookiesPopupBackdrop .cookies-popup-content p {
    font-family: 'Georgia', serif;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--amazon-light-text);
    margin-bottom: 20px;
    text-align: center;
}
#cookiesPopupBackdrop .cookies-popup-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
#cookiesPopupBackdrop .cookies-popup-buttons button {
    color: var(--amazon-dark-text); /* Dark text on colored buttons */
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 1.1em; /* Slightly smaller */
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 110px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Birthday Popup Modal */
#birthdayPopupBackdrop .birthday-popup-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#birthdayPopupBackdrop .birthday-popup-content h2 {
    color: var(--amazon-orange);
    font-size: 1.8em;
    margin-bottom: 15px;
    font-weight: bold;
}

#birthdayPopupBackdrop .birthday-main-text {
    color: var(--amazon-dark-text);
    font-size: 1.1em;
    margin-bottom: 25px;
}

#birthdayPopupBackdrop .birthday-form {
    margin: 20px 0;
}

#birthdayPopupBackdrop #birthdayInput {
    width: calc(100% - 24px);
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    transition: border-color 0.2s;
}

#birthdayPopupBackdrop #birthdayInput:focus {
    border-color: var(--amazon-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
}

#birthdayPopupBackdrop .birthday-submit-button {
    background-color: var(--amazon-yellow-accent);
    color: var(--amazon-dark-text);
    padding: 12px 30px;
    border: 1px solid #a88734;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
}

#birthdayPopupBackdrop .birthday-submit-button:hover {
    background-color: #f0c14b;
}

#birthdayPopupBackdrop .birthday-dismiss-hint {
    color: #888;
    font-size: 11px;
    margin-top: 15px;
    font-style: italic;
}
#cookiesPopupBackdrop .cookies-popup-buttons button:hover {
    transform: scale(1.03);
    filter: brightness(110%);
}
#cookiesPopupBackdrop .cookies-popup-buttons button.no-button { /* "NO" (I do not oppose) - deceptive "good" color */
    background-color: var(--amazon-green-accent);
    border: 1px solid #005c00;
    color: var(--amazon-light-text);
}
#cookiesPopupBackdrop .cookies-popup-buttons button.yes-button { /* "YES" (I oppose) - deceptive "bad" color */
    background-color: var(--amazon-sale-red);
    border: 1px solid #8a1c03;
    color: var(--amazon-light-text);
}

/* Buy Now Button */
.buy-now-button { /* This is a large, prominent button */
    background-color: var(--amazon-orange) !important;
    color: var(--amazon-dark-text) !important;
    border: 1px solid #e77600 !important;
    padding: 12px 25px !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
}

.buy-now-button:hover {
    background-color: #df8900 !important;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        width: 95%;
        flex-direction: column;
    }

    #mini-cart-container {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    nav ul li {
        display: block;
        margin: 8px 0;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Smaller cards on tablet */
        gap: 15px;
    }

    .modal-content {
        padding: 20px;
        margin: 10px;
    }

    .modal-content h2 {
        font-size: 1.3em;
    }

    #contactPreferencesModalBackdrop .contact-preferences-buttons {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px; /* Smaller base font */
    }
    header .site-title a {
        font-size: 1.6em;
    }
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.25em; }

    .product-grid {
        grid-template-columns: 1fr; /* Single column */
    }
    .product img, .product .image_placeholder {
        height: 160px;
    }
    .button, button, input[type="submit"], input[type="button"] {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .modal-content button, .modal-content .button {
        padding: 9px 18px;
        font-size: 0.95em;
    }
}