/* Basic container and progress bar */
.ibc-wizard-container {
    max-width: 600px; /* Use max-width for responsiveness */
    width: 95%; /* Make it fluid within its container */
    margin: 30px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 30px;
}

.ibc-progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    height: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    
    
}

.ibc-progress-bar-fill {
    height: 100%;
    width: 0%; /* Will be updated by JS */
    background-color: #ff6f42; /* BookByAnyone orange */
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

.ibc-wizard-content {
    min-height: 300px; /* Prevent jumpy layout */
    position: relative;
    width: 100%; /* Ensure it uses available space */
    margin: 0 auto; /* Center content */
}

.ibc-wizard-content.loading:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(255, 255, 255, 0.8) url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="none" stroke="%23ff6f42" stroke-width="8" stroke-dasharray="140 100" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>') 
    no-repeat center center;*/
    background: rgba(255, 255, 255, 0.8) url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="none" stroke="%23f8ab53" stroke-width="8" stroke-dasharray="140 100" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>') no-repeat center center;

    background-size: 50px 50px;
    z-index: 10;
}

.ibc-step-wrapper h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    width: 100%; /* Ensure it takes full width */
}

/* New rule to center the main H1 heading */
.ibc-wizard-wrapper h1 {
    text-align: center;
    margin-bottom: 20px; /* Add some space below the heading */
}


/* Form elements */
.ibc-form-group {
    margin-bottom: 20px;
}

.ibc-form-group label {
   /* display: block;*/
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.ibc-form-group input[type="text"],
.ibc-form-group input[type="number"],
.ibc-form-group textarea {
    width: calc(100% - 22px); /* Account for padding/border */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Radio/Checkbox custom styling (optional, more advanced) */
.ibc-radio-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}
.ibc-radio-card:hover {
    border-color: #ff6f42;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ibc-radio-card input[type="radio"] {
    margin-right: 15px;
    width: 20px;
    height: 20px;
    accent-color: #ff6f42; /* Custom accent color */
}
.ibc-radio-card.selected {
    border-color: #ff6f42;
    box-shadow: 0 0 0 2px #ff6f42; /* Highlight selected */
}

/* Buttons */
.ibc-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.ibc-action-button {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ibc-continue-button {
    background-color: #ff6f42;
    color: white;
}



.ibc-back-button {
    background-color: #f0f0f0;
    color: #555;
}

.ibc-back-button:hover {
    background-color: #e0e0e0;
}

/* Modal Styling */
.ibc-modal-container {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 100000; /* High z-index to be on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
}

.ibc-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be responsive */
    max-width: 500px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.ibc-modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
}

.ibc-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.ibc-modal-close:hover,
.ibc-modal-close:focus {
    color: #000;
    text-decoration: none;
}

.questions-list .question-option {
    padding: 12px 15px;
    border: 1px solid #eee;
    margin-bottom: 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.questions-list .question-option:hover {
    background-color: #f0f0f0;
}

/* Step 3: Prompts specific */
.prompt-item {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.prompt-question {
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
}

.prompt-question .remove-prompt {
    color: #aaa;
    cursor: pointer;
    font-size: 1.2em;
}
.prompt-question .remove-prompt:hover {
    color: #d33;
}

/* Step 4: Book Ideas */
.book-idea-option {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start; /* Align radio button and text at top */
    background-color: #fff;
}
.book-idea-option:hover {
    border-color: #ff6f42;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.book-idea-option input[type="radio"] {
    margin-right: 15px;
    width: 20px;
    height: 20px;
    accent-color: #ff6f42;
}
.book-idea-option.selected {
    border-color: #ff6f42;
    background-color: #fffaf7; /* Light orange background */
    box-shadow: 0 0 0 2px #ff6f42;
}
.book-idea-option h4 {
    margin: 0 0 5px 0;
    color: #333;
}
.book-idea-option p {
    margin: 0;
    color: #777;
    font-size: 0.9em;
}

/* Step 5: Upload image */
.image-upload-area {
    border: 2px dashed #ddd;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.image-upload-area:hover {
    border-color: #ff6f42;
}

.image-upload-area input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.image-preview {
    margin-top: 20px;
    max-height: 250px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 10px;
}

.image-preview img {
    display: block;
    max-width: 100%;
    max-height: 230px;
    object-fit: contain;
}

/* --- Specific styles for the .cover-preview section (Step 6) --- */
.cover-preview {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align items to their bottom edges for consistent baseline */
    gap: 20px;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    margin-bottom: 20px;
    padding: 15px;
    text-align: center;
}

.cover-preview > div { /* Target the individual image containers (Front, Spine, Back) */
    display: flex;
    flex-direction: column; /* Stack content (p, img, possibly other p) vertically */
    align-items: center; /* Center text and image horizontally within each container */
    text-align: center; /* Ensure text is centered */
    
    flex: 0 0 auto; /* Don't grow, don't shrink, base on content */
    width: 220px; /* A consistent width for each image block */
    min-height: 280px; /* Ensure they are tall enough to accommodate content */
    position: relative; /* For potential positioning of overflow text */
}

.cover-preview > div p {
    margin-bottom: 5px; /* Small margin below labels */
    font-weight: bold;
    color: #333;
}

/* Style for the actual book cover images */
.cover-preview > div img {
    display: block; /* Remove extra space below image */
    max-width: 100%; /* Ensure images are responsive within their container */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Specific adjustments for spine image */
#ibc-spine-preview-image {
    max-width: 30px; /* Keep spine narrow */
    max-height: 255px ; /* Keep spine height consistent */
    object-fit: contain; /* Ensure the image fits without distortion */
}

/* Style for the long "selected_idea" text that appears below the front cover image */
/* This targets the last paragraph within the first image container */
.cover-preview > div:first-child p:last-child {
    font-size: 0.8em; /* Make the text smaller */
    color: #666; /* Dim the text */
    margin-top: 10px; /* Add some space above it */
    max-height: 60px; /* Limit its height to prevent layout breakage */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for truncated text */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    width: 100%; /* Ensure it takes full width of its parent flex item */
    padding: 0 5px; /* Small padding to prevent text from touching edges */
}

/* Style for the "Adjust image (future feature)" button's paragraph */
/* Assuming it's a <p> tag with inline style width: 100% inside .cover-preview */
.cover-preview p[style*="width: 100%"] {
    flex-basis: 100%; /* Force it to take full width and wrap to a new line */
    margin-top: 15px; /* Keep its top margin */
    text-align: center; /* Center the button */
}