/* ===================================== */
/* === COMPLETE Claymorphism Theme v4 === */
/* ===================================== */
/* This stylesheet defines a "Claymorphism" theme using soft backgrounds, */
/* rounded corners, and inner/outer shadows for a soft, extruded look. */
/* ===================================== */

/* --- 1. Variables and Basic Setup --- */
/* :root holds all theme settings for easy changes. */
:root {
    /* Set the main fonts */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;

    /* Define the Warm Orange Theme colors */
    --bg-color: #FFF3E0;        /* Page background color */
    --primary-color: #FFF8E1;   /* Color for cards and elements */
    --accent-color: #FB8C00;     /* Highlight color (buttons, titles) */
    --text-color: #4E342E;       /* Main text color */

    /* Define the shadows used for the Claymorphism effect */
    --light-shadow: rgba(255, 255, 255, 0.9); /* Lighter shadow (simulates light source) */
    --dark-shadow: rgba(213, 190, 158, 0.7);  /* Darker shadow (creates depth) */
}

/* Basic reset: Remove default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
    font-family: var(--font-body); /* Apply the main font everywhere */
}

/* Set default body styles */
body {
    background-color: var(--bg-color); /* Apply page background color */
    color: var(--text-color);       /* Apply main text color */
    padding: 40px 15px;             /* Add padding around the page content */
}

/* --- 2. Main Layout Containers & Page Titles --- */
/* Center the main content area */
.sketchbook-page,
.shop-container,
.bg-selection-container { /* Added bg-selection-container */
    max-width: 500px; /* Set a maximum width for content */
    width: 100%;      /* Ensure it takes full width up to max-width */
    margin: 0 auto;   /* Center the container horizontally */
}

/* Style for the section holding the greeting card */
.card-section {
    display: flex;
    flex-direction: column; /* Stack card and button vertically */
    align-items: center;    /* Center items horizontally */
    gap: 20px;              /* Space between card and button */
    margin-bottom: 30px;    /* Space below this section */
}

/* Style for the titles within feature sections (like "Doodle Tools") */
.feature-section h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.2rem;
    text-align: center;
    margin: 20px 0; /* Space above and below */
    color: var(--accent-color); /* Use the accent color */
}

/* Style for main page titles (Shop, BG Selection, Theme Editor) */
.page-title,
.shop-container h1,
.bg-selection-container h1 { /* Combined rule for consistency */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 30px;
    color: var(--accent-color);
}

/* --- 3. Flip Card Animation & Styling (index.html) --- */
/* Container that enables the 3D flip effect */
.card-container {
    width: 100%;
    height: 450px;       /* Fixed height for the card */
    perspective: 1500px; /* Defines the 3D perspective depth */
    position: relative;
}

/* Base style shared by the front and back card faces */
.greeting-card,
.customization-form {
    position: absolute; /* Position both faces in the same spot */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d; /* Allow children to be positioned in 3D */
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Flip animation */
    backface-visibility: hidden; /* Hide the back when facing away */
    border-radius: 40px; /* Apply rounded corners here for both faces */
}

/* The front face container itself is transparent */
.greeting-card {
    background: transparent;
    box-shadow: none; /* Shadow is applied to the inner wrapper */
}

/* The visible content wrapper inside the front face */
.card-content-wrapper {
    background-color: var(--primary-color);
    border-radius: 40px; /* Match the parent's rounding */
    /* Claymorphism: Outer shadow effect */
    box-shadow: 12px 12px 24px var(--dark-shadow), -12px -12px 24px var(--light-shadow);
    overflow-y: auto; /* Allow scrolling if content overflows */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    padding: 30px;
    text-align: center;
}

.card-content-wrapper .quote {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6; /* Improve readability */
}

.card-content-wrapper .from-name {
    font-size: 1.2rem;
    font-weight: 500;
    opacity: 0.8; /* Make it slightly less prominent */
    margin-top: 20px;
}

/* The back face containing the customization form */
.customization-form {
    background-color: var(--primary-color);
    /* Claymorphism: Outer shadow effect */
    box-shadow: 12px 12px 24px var(--dark-shadow), -12px -12px 24px var(--light-shadow);
    transform: rotateY(180deg); /* Start flipped away */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center form elements */
}

/* CSS classes added by JavaScript to control the flip */
.card-container.flipped .greeting-card {
    transform: rotateY(-180deg); /* Rotate front face away */
}
.card-container.flipped .customization-form {
    transform: rotateY(0deg); /* Rotate back face into view */
}

/* --- 4. Form Inputs & Feature Boxes --- */
/* Title inside the customization form */
.customization-form h2 {
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* Text area and input fields in the form */
.customization-form textarea,
.customization-form input {
    width: 100%;
    background-color: #ede7d9; /* Slightly darker cream for inset look */
    border: none;
    border-radius: 15px;
    padding: 15px 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color); /* Ensure text color matches */
    /* Claymorphism: Inset shadow effect */
    box-shadow: inset 4px 4px 8px var(--dark-shadow), inset -4px -4px 8px var(--light-shadow);
    margin-bottom: 15px; /* Added spacing between inputs */
}

.customization-form textarea {
    resize: none; /* Disable manual resizing */
    height: 150px;
}

/* Boxes for features like Share, Download, etc. */
.feature-box {
    padding: 25px;
    text-align: center;
    margin-bottom: 20px;
    background-color: var(--primary-color);
    border-radius: 30px;
    /* Claymorphism: Outer shadow effect */
    box-shadow: 9px 9px 16px var(--dark-shadow), -9px -9px 16px var(--light-shadow);
}

.feature-box h4 { /* Title inside feature box */
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.feature-box p { /* Description inside feature box */
    font-size: 0.9rem;
    margin-bottom: 15px;
    opacity: 0.8;
}

/* --- 5. Buttons and Controls --- */
/* Base style for all buttons (action buttons, control button) */
.action-button,
.control-btn {
    border-radius: 20px;
    border: none;
    font-weight: 700;
    background: var(--primary-color);
    color: var(--text-color);
    /* Claymorphism: Outer shadow effect */
    box-shadow: 8px 8px 16px var(--dark-shadow), -8px -8px 16px var(--light-shadow);
    transition: all 0.2s ease-in-out; /* Smooth hover/active transitions */
    cursor: pointer;
    text-decoration: none; /* Remove underline for <a> tags */
}

/* Hover effect: Lift button slightly */
.action-button:hover,
.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 10px 10px 20px var(--dark-shadow), -10px -10px 20px var(--light-shadow); /* Increase shadow */
}

/* Active (pressed) effect: Use inset shadow */
.action-button:active,
.control-btn:active {
    transform: translateY(1px); /* Push down slightly */
    box-shadow: inset 4px 4px 8px var(--dark-shadow), inset -4px -4px 8px var(--light-shadow);
}

/* Specific styles for action buttons */
.action-button {
    font-size: 1.2rem;
    padding: 15px 30px;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between icon and text */
}

/* Primary action buttons use the accent color */
.action-button.primary {
    background-color: var(--accent-color);
    color: white; /* Contrast text color */
}

/* Music control button (top right fixed) */
.control-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Make it circular */
    z-index: 100; /* Keep it on top */
    display: flex; /* Center the icon */
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

/* Close button (X) on form and modal */
.close-btn {
    color: var(--text-color);
    font-size: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 25px;
    opacity: 0.7; /* Make it slightly subtle */
    transition: opacity 0.2s ease;
}
.close-btn:hover {
    opacity: 1;
}

/* --- 6. Modal (Popup for Sharing) --- */
/* Full screen overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 243, 224, 0.5); /* Semi-transparent overlay */
    backdrop-filter: blur(10px); /* Blur content behind */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of everything */
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Non-interactive when hidden */
    transition: opacity 0.3s ease; /* Fade-in animation */
}

/* Class added by JS to show the modal */
.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto; /* Make interactive when visible */
}

/* The modal content box */
.modal-content {
    padding: 30px;
    max-height: 85vh; /* Limit height and allow scrolling */
    overflow-y: auto;
    width: 90%;
    max-width: 450px;
    background-color: var(--primary-color);
    border-radius: 40px;
    /* Claymorphism shadow */
    box-shadow: 12px 12px 24px var(--dark-shadow), -12px -12px 24px var(--light-shadow);
    text-align: center; /* Center content like QR code */
}

.modal-content h2 { /* Modal title */
    /* text-decoration: none; */ /* This property doesn't apply to h2, removed */
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 10px; /* Added margin */
}

/* Container for share buttons inside the modal */
.modal-share-actions {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between buttons */
    margin-top: 20px;
}

/* --- 7. Shop & Background/Theme Selection Page Styles --- */
/* Grid layout for displaying choices */
.product-grid,
.bg-grid,
.music-grid {
    display: grid;
    gap: 25px; /* Space between items */
    /* Responsive columns */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Common style for product cards, background items, music items */
.product-card-shop,
.bg-item,
.music-item {
    padding: 20px;
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 30px;
    /* Claymorphism shadow */
    box-shadow: 9px 9px 16px var(--dark-shadow), -9px -9px 16px var(--light-shadow);
    transition: all 0.2s ease-in-out; /* Add smooth transition */
}

/* Specific styles for shop product cards */
.product-card-shop {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

.product-card-shop img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Ensure image covers the area */
    border-radius: 20px; /* Rounded corners for image */
    margin-bottom: 15px;
    box-shadow: 5px 5px 10px var(--dark-shadow); /* Subtle shadow for image */
}

.product-card-shop h3 { /* Product title */
    margin-bottom: 5px;
    font-weight: 700;
}
.product-card-shop p { /* Product description */
    flex-grow: 1; /* Push price/button to bottom */
    margin-bottom: 10px;
    opacity: 0.8;
}

.price-tag-wrapper { /* Price container */
     margin-bottom: 15px;
}
.price-tag-wrapper .price { /* Price text */
    font-size: 1.5rem;
    font-weight: 700;
    background-color: var(--accent-color);
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    display: inline-block; /* Allow background and padding */
}

/* Background and Music selection items */
.bg-item,
.music-item {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Fixed height */
}
.bg-item:hover,
.music-item:hover {
    transform: translateY(-2px); /* Lift on hover */
}

/* Style for the selected item (inset shadow) */
.bg-item.selected,
.music-item.selected {
    box-shadow: inset 4px 4px 8px var(--dark-shadow), inset -4px -4px 8px var(--light-shadow);
}

/* Color picker container on theme/bg page */
.color-picker-container {
    background: var(--primary-color);
    padding: 20px;
    border-radius: 20px;
    /* Claymorphism shadow */
    box-shadow: 5px 5px 10px var(--dark-shadow), -5px -5px 10px var(--light-shadow);
    margin-top: 20px; /* Space above */
    display: none; /* Initially hidden */
}

/* --- 8. Footer --- */
.site-footer {
    padding: 40px 20px 20px 20px; /* Padding top, sides, bottom */
    text-align: center;
    margin-top: 30px; /* Space above footer */
    border-top: 1px solid rgba(0,0,0,0.1); /* Subtle separator line */
}

.footer-links a { /* Links in the footer */
    color: var(--text-color);
    margin: 0px 15px; /* Space between links */
    font-weight: 600;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.footer-links a:hover {
    opacity: 1;
}

.footer-copyright { /* Copyright text */
    margin-top: 20px;
    font-size: 0.8rem;
    opacity: 0.6;
}

/* ===================================== */
/* === Claymorphism Scrollbar Style === */
/* ===================================== */

/* Set the width of the scrollbar */
::-webkit-scrollbar {
    width: 14px;
}

/* Style the track (background) of the scrollbar */
::-webkit-scrollbar-track {
    background-color: #ede7d9; /* Slightly darker cream */
    border-radius: 20px;
    /* Inset shadow for Claymorphism effect */
    box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
}

/* Style the handle (the draggable part) */
::-webkit-scrollbar-thumb {
    background-color: var(--accent-color); /* Use accent color */
    border-radius: 20px;
    border: 3px solid var(--primary-color); /* Create padding effect */
}

/* Darken handle slightly on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #E67E22; /* Slightly darker orange */
}

/* ===================================== */
/* === QR Code Styles (DO NOT CHANGE) === */
/* ===================================== */
/* The user requested these styles remain unchanged. */

/* QR Code Centering Fix */
#modal-qrcode-display-area {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* Space between sticker and button */
}

/* QR Code Sticker Clay Style */
#qr-code-sticker-preview { /* NOTE: ID might need adjustment based on final JS implementation */
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 20px;
    border-radius: 30px;
    box-shadow: 9px 9px 16px var(--dark-shadow), -9px -9px 16px var(--light-shadow);
    border: none;
    width: fit-content;
}

#qr-code-sticker-preview .qr-code-title {
    color: var(--accent-color);
    font-weight: 700;
}

#qr-code-sticker-preview .qr-code-from {
    opacity: 0.8;
}

#qr-code-sticker-preview #qr-code-image {
    padding: 10px;
    background-color: #fff;
    border-radius: 15px;
    margin: 15px auto;
    display: flex; /* Changed from inline-block for flex centering */
    justify-content: center;
    align-items: center;
}
/* Ensure QR image/canvas behaves correctly */
#qr-code-sticker-preview #qr-code-image img,
#qr-code-sticker-preview #qr-code-image canvas {
    display: block;
    max-width: 100%;
}
/* QR Download button uses .action-button styles */
#modal-download-qr-btn {
    width: auto; /* Adjust width automatically */
}
/* === END QR Code Styles === */

/* ===================================== */
/* === Utilities & Fixes === */
/* ===================================== */

/* Video Background Fix: Ensure it stays behind everything */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Send to the very back */
    overflow: hidden; /* Prevent scrollbars */
}

#bg-video { /* The video element itself */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video covers the area */
}


/* --- Custom Color Picker (Theme Editor Page) --- */
/* Container for the color swatch button and hex input */
.custom-color-picker {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center;    /* Center items vertically */
    gap: 15px;              /* Space between swatch and input */
}

/* Hide the actual <input type="color"> element visually */
.color-input-hidden {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none; /* Make it non-interactive */
}

/* The clickable swatch that shows the selected color */
.color-preview-swatch {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--primary-color); /* Default background */
    /* Claymorphism effect */
    box-shadow: 8px 8px 16px var(--dark-shadow), -8px -8px 16px var(--light-shadow);
    transition: all 0.2s ease-in-out;
    display: flex; /* Center the icon */
    justify-content: center;
    align-items: center;
}

.color-preview-swatch:hover {
    transform: translateY(-2px); /* Lift on hover */
}

.color-preview-swatch:active {
    transform: translateY(1px); /* Press down effect */
    /* Inset shadow when pressed */
    box-shadow: inset 4px 4px 8px var(--dark-shadow), inset -4px -4px 8px var(--light-shadow);
}

/* Icon inside the color swatch */
.color-preview-swatch i {
    font-size: 1.5rem;
    color: var(--text-color);
    opacity: 0.7; /* Slightly faded */
}

/* Text input field for displaying/entering HEX code */
.hex-input {
    width: 100px; /* Fixed width */
    background-color: #ede7d9; /* Match form inputs */
    border: none;
    border-radius: 15px;
    padding: 15px;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase; /* Show HEX in uppercase */
    color: var(--text-color);
    /* Claymorphism inset shadow */
    box-shadow: inset 4px 4px 8px var(--dark-shadow), inset -4px -4px 8px var(--light-shadow);
}