.tsv-fan-generator-container {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 8px; /* Slightly more rounded corners */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Softer shadow */
}

.tsv-fan-generator-container h2 {
    margin-top: 0;
    margin-bottom: 25px; /* More space below title */
    color: #333;
    text-align: center; /* Center title */
}

.tsv-generator-controls .tsv-control-group {
    margin-bottom: 20px; /* Increased spacing */
}

/* Remove styles for .tsv-source-controls as it's no longer used for button layout */
/* .tsv-source-controls { ... } */
/* .tsv-source-controls .tsv-control-group { ... } */
/* .tsv-source-controls .tsv-control-group.tsv-file-upload-control-group { ... } */
/* .tsv-source-controls .tsv-control-group:not(.tsv-file-upload-control-group) { ... } */
/* .tsv-source-controls .tsv-control-group button#tsv-use-webcam { ... } */


.tsv-generator-controls .tsv-control-group {
    margin-bottom: 20px; /* Increased spacing */
    display: flex; /* For aligning label, input, and helper select */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center; /* Align items vertically */
    gap: 10px; /* Space between label, input, and select */
}

.tsv-generator-controls .tsv-control-group label {
    display: block;
    margin-bottom: 0; /* Remove bottom margin as gap handles spacing */
    font-weight: bold;
    flex-basis: 100%; /* Label takes full width initially */
}

.tsv-generator-controls .tsv-control-group .dynamic-user-input,
.tsv-generator-controls .tsv-control-group .dynamic-user-text-suggestion {
    flex-grow: 1; /* Allow input/select to grow */
    min-width: 150px; /* Minimum width before wrapping */
    /* Styles for select and text input are now mostly inherited from main.css */
}

.tsv-generator-controls .tsv-control-group .dynamic-user-text-suggestion {
    /* Specific styles for the helper select if needed */
    flex-basis: 200px; /* Give suggestion select a decent base width */
    flex-grow: 0; /* Don't let it grow as much as the main input */
}


/* Responsive adjustments for control group */
@media (min-width: 600px) {
    .tsv-generator-controls .tsv-control-group label {
        flex-basis: auto; /* Allow label to be on the same line */
        margin-right: 10px;
    }
}

/* Styling for the preview area which is now also the drop zone */
.tsv-image-preview-area {
    position: relative; /* For positioning overlay elements */
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 0px; /* Minimal padding, canvas will mostly fill it */
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #f0f0f0; /* Light grey background for the area */
    min-height: 200px; /* Ensure it has some height even before canvas is drawn */
    display: flex; /* To help center canvas if it's smaller */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Indicate it's interactive for drop */
}

.tsv-image-preview-area.drag-over {
    border-color: var(--primary-color);
    background-color: #e6f7ff; /* Lighter blue for drag over */
}

/* Overlay container for buttons and text on top of the preview area */
.tsv-preview-actions-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10; /* Ensure it's above the canvas/video */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

/* Hide overlay when webcam is active or user image is loaded,
   as canvas will then be the primary interaction point for viewing.
   The drop functionality remains on the parent .tsv-image-preview-area.
*/
.tsv-image-preview-area.webcam-active .tsv-preview-actions-overlay,
.tsv-image-preview-area.image-loaded .tsv-preview-actions-overlay {
    /* Consider hiding or making it more subtle if an image or webcam is active */
    /* For now, let's keep it, but it might need adjustment based on UX */
    /* Example: display: none; or opacity: 0.5; pointer-events: none; */
}


.tsv-preview-actions-overlay .button {
    width: auto; /* Buttons take their content width */
    min-width: 180px; /* Ensure decent button width */
}

.tsv-file-upload-button .fa-upload,
.tsv-fan-generator-container button .fa-camera,
.tsv-fan-generator-container button .fa-camera-retro,
.tsv-fan-generator-container button .fa-download {
    margin-right: 8px;
}

.tsv-drop-text-preview { /* New class for text in preview */
    font-size: 0.9em;
    color: #555;
}

.tsv-file-name-display {
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    color: #333;
    word-break: break-all;
    max-width: 200px; /* Prevent very long names from breaking layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure labels are still styled correctly if any remain outside preview */
.tsv-generator-controls label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.tsv-generator-controls select,
/* input[type="file"] is now hidden by .visually-hidden */
.tsv-generator-controls input[type="text"] {
    width: 100%;
    padding: 8px;
    /* Styles for select and text input are now mostly inherited from main.css */
    /* Keep specific overrides if needed, e.g., border-radius if different */
}

.tsv-image-preview-area {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center; /* Center canvas/video */
}

#tsv-image-canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    background-color: #fff; /* Ensure canvas is visible */
    display: block; /* Prevents extra space below */
    margin-left: auto;
    margin-right: auto;
    /* margin-bottom: 25px; /* Moved to .tsv-image-preview-area */
}

/* Ensure canvas is below the overlay actions */
#tsv-image-canvas {
    position: relative;
    z-index: 1;
}


#tsv-webcam-container {
    position: absolute;
    bottom: 10%; /* Position in the lower quarter of the parent (.tsv-image-preview-area) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 15; /* Ensure it's above the canvas and other overlays if necessary */
    display: flex; /* This is also set by JS when shown. Used here for layout. */
    justify-content: center; /* Centers the button horizontally */
    width: auto; /* Let it be as wide as its content (the button) or set a specific width */
    /* The following properties are defaults or not strictly needed for this setup */
    /* flex-direction: column; */
    /* align-items: center; */
}

#tsv-webcam-video {
    max-width: 100%;
    width: 100%; /* Ensure it takes available width within its container */
    max-height: 400px; /* Limit height */
    border: 1px solid #ccc;
    background-color: #000;
    display: none; /* Hide the raw video element */
    margin-bottom: 10px;
}

#tsv-capture-photo.button { /* Style for "Foto aufnehmen" */
    padding: 10px 20px; /* Adjusted padding for better prominence */
    font-size: 15px;    /* Adjusted font size */
    opacity: 0.90;       /* Set button transparency to 85% */
}

.tsv-generator-actions .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Basic styling for buttons, adjust to theme */
/* These styles might be inherited from the theme, but added for completeness */
.tsv-fan-generator-container .button,
.tsv-fan-generator-container button {
    /* display: inline-block; */ /* WordPress buttons are often inline-block */
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    /* Default WordPress button colors - can be overridden by theme */
    background: #f7f7f7;
    border-color: #ccc;
    color: #555;
    box-shadow: 0 1px 0 #ccc;
}
.tsv-fan-generator-container .button:hover,
.tsv-fan-generator-container button:hover {
    border-color: #999;
    color: #222;
}
.tsv-fan-generator-container .button.button-primary {
    background: #007cba; /* Example primary color, ensure your theme's primary button style is applied */
    border-color: #007cba;
    color: #fff;
}
.tsv-fan-generator-container .button.button-primary:hover {
    background: #005a87;
    border-color: #005a87;
}

/* Styles for Social Share Buttons */
.tsv-social-share-actions {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.tsv-social-share-actions h4 {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #333;
}

.tsv-share-button {
    margin: 5px;
    padding: 8px 15px; /* Consistent padding */
}

.tsv-share-button .fab,
.tsv-share-button .fas { /* Font Awesome Brand and Solid Icons */
    margin-right: 8px;
}

/* Specific colors for branding, optional */
#tsv-share-whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
}
#tsv-share-whatsapp:hover {
    background-color: #1DAE54;
    border-color: #1DAE54;
}

#tsv-share-facebook {
    background-color: #1877F2;
    border-color: #1877F2;
    color: #fff;
}
#tsv-share-facebook:hover {
    background-color: #125EBF;
    border-color: #125EBF;
}

#tsv-share-instagram {
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    border-color: transparent; /* Remove border for gradient buttons */
    color: #fff;
}
 #tsv-share-instagram:hover {
    opacity: 0.9; /* Slight fade on hover for gradient */
 }


#tsv-share-twitter {
    background-color: #1DA1F2;
    border-color: #1DA1F2;
    color: #fff;
}
#tsv-share-twitter:hover {
    background-color: #0C85D0;
    border-color: #0C85D0;
}

 .tsv-share-button:disabled {
    background-color: #e0e0e0 !important; /* Override specific colors when disabled */
    border-color: #e0e0e0 !important;
    color: #999 !important;
    opacity: 0.7;
    cursor: not-allowed;
 }

/* At the end of frontend-style.css */
@media (max-width: 767px) { /* Updated from 480px */
    .tsv-fan-generator-container {
        padding-left: 0; /* Remove horizontal padding */
        padding-right: 0;
        border-left: none; /* Remove side borders */
        border-right: none;
        border-radius: 0; /* Optional: Sharp corners for edge-to-edge */
        box-shadow: none; /* Optional: Remove shadow if it looks odd edge-to-edge */
        /* Keep vertical padding as defined (e.g., 10px or original 20px) or adjust */
        padding-top: 10px; /* Existing value from 480px rule, adjust if needed */
        padding-bottom: 10px; /* Add if not present, or adjust */
    }

    .tsv-image-preview-area {
        border-left: none; /* Remove side borders for the canvas area */
        border-right: none;
        border-radius: 0; /* Match parent container's radius change */
        /* Keep top/bottom dashed border or remove if a full seamless look is desired */
        /* border-top: none; */
        /* border-bottom: none; */
    }

    /* Add padding back to inner content sections so they don't touch the screen edges */
    .tsv-fan-generator-container h2,
    .tsv-template-selection-group,
    #tsv-dynamic-text-inputs-container, /* If it might have direct content needing padding */
    .tsv-social-share-actions { /* Parent of h4 and buttons */
        padding-left: 15px; /* Standard padding for content */
        padding-right: 15px;
    }
     /* Ensure control groups within tsv-generator-controls also get this padding */
    .tsv-generator-controls { /* New rule to target the parent of .tsv-control-group */
        padding-left: 15px;
        padding-right: 15px;
    }


    /* Adjustments from original 480px rule, ensure compatibility */
    .tsv-generator-controls .tsv-control-group {
        gap: 8px; /* Slightly reduce gap for controls */
        /* padding-left and padding-right are now handled by .tsv-generator-controls parent */
    }

    .tsv-preview-actions-overlay .button {
        min-width: 160px; /* Slightly smaller buttons in overlay */
        padding: 8px 12px;
        font-size: 12px;
    }

    .tsv-drop-text-preview {
        font-size: 0.85em;
    }

    .tsv-social-share-actions h4 {
        font-size: 1em;
        /* No extra padding needed here as parent .tsv-social-share-actions has it */
    }

    .tsv-share-button {
        padding: 6px 10px;
        font-size: 12px;
        margin: 3px;
    }

    /* Make .site-main edge-to-edge when it contains the fan generator on small screens */
    main.site-main:has(#tsv-fan-generator-app.tsv-fan-generator-container) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}