/* css/publish.css */

/* Page Layout */
body.form-page { display: flex; flex-direction: column; min-height: 100vh; }
body.form-page > main.container { flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.form-container { max-width: 850px; width: 100%; margin: 40px auto; padding: 0 15px; box-sizing: border-box; }

/* Form Container Heading and Paragraph */
.form-container h1 { font-size: 2.2rem; margin-bottom: 5px; font-weight: 700; text-align: center; background: linear-gradient(90deg, #00c6ff, #9d00ff); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; align-items: center; justify-content: center; gap: 15px; }
.form-subtitle { font-size: 1.1rem; font-weight: 500; text-align: center; color: var(--text-secondary); margin-top: 0; margin-bottom: 30px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
#publish-campaign-form { display: grid; gap: 30px; }

/* Form Section Styling */
.form-section { background-color: var(--bg-glass); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px 30px; display: grid; gap: 20px; box-shadow: var(--card-shadow); backdrop-filter: blur(10px); }
.form-section h3 { font-size: 1.4rem; margin: 0; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); grid-column: 1 / -1; }
.form-section p.section-description { font-size: 0.9rem; margin: -10px 0 10px 0; color: var(--text-secondary); text-align: left; grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-weight: 500; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 8px; }
form input[type="text"], form input[type="date"], form input[type="number"], form textarea { width: 100%; padding: 12px 15px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: rgba(0,0,0,0.2); color: var(--text-primary); transition: all 0.2s; box-sizing: border-box; }
form textarea#description { min-height: 120px; resize: vertical; }
form input::placeholder, form textarea::placeholder { color: var(--text-secondary); opacity: 0.7; }
form input:focus, form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.25); background-color: rgba(0,0,0,0.3); }

/* Styles for the new login prompt buttons */
#login-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }
.prompt-actions { display: flex; gap: 15px; margin-top: 10px; }
.prompt-actions .btn-primary, .prompt-actions .btn-secondary { padding: 12px 30px; font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; border: 2px solid transparent; }
.prompt-actions .btn-primary { background-color: var(--primary-color); color: white; }
.prompt-actions .btn-secondary { background-color: transparent; border-color: var(--primary-color); color: var(--primary-color); }
.prompt-actions .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 170, 255, 0.3); }
.prompt-actions .btn-secondary:hover { transform: translateY(-3px); background-color: var(--primary-color); color: white; }

/* Link & Task Items */
.link-input-group { display: flex; align-items: center; gap: 15px; }
.link-input-group .link-icon { font-size: 1.5rem; color: var(--text-secondary); width: 25px; text-align: center; }
.link-input-group input { flex-grow: 1; }
.btn-remove { background: none; border: none; font-size: 1.2rem; color: #dc3545; cursor: pointer; transition: color 0.2s; }
.btn-remove:hover { color: #ff4d64; }

/* Palette and Task Dropdown */
.palette { display: flex; flex-wrap: wrap; gap: 10px; }
.palette-btn { background-color: rgba(255, 255, 255, 0.05); color: var(--text-secondary); border: 1px solid var(--border-color); padding: 8px 15px; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.palette-btn:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-2px); background-color: rgba(0, 170, 255, 0.1); }
.palette-btn-group { position: relative; display: inline-block; }
.action-dropdown { display: none; position: absolute; bottom: 100%; left: 0; background-color: #1c1c2b; min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); z-index: 10; border-radius: var(--border-radius); border: 1px solid var(--border-color); padding: 5px 0; margin-bottom: 5px; }
.action-dropdown a { color: var(--text-primary); padding: 10px 15px; text-decoration: none; display: block; }
.action-dropdown a:hover { background-color: rgba(255, 255, 255, 0.05); }
.palette-btn-group.active .action-dropdown { display: block; }

/* Task Item Styling */
#added-tasks-list, #added-referral-tasks-list { display: grid; gap: 12px; }
.task-item { background-color: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-left: 4px solid var(--text-secondary); border-radius: var(--border-radius); padding: 12px 15px; display: grid; gap: 15px; }
.task-item-main { display: flex; align-items: center; gap: 15px; }
.task-item-main .drag-handle { cursor: grab; }
.task-title { flex-grow: 1; font-weight: 500; }
.task-title[contenteditable="true"] { cursor: text; padding: 3px 6px; border-radius: 4px; transition: background-color 0.2s; border: 1px solid transparent; }
.task-title[contenteditable="true"]:hover { background-color: rgba(255, 255, 255, 0.05); }
.task-title[contenteditable="true"]:focus { background-color: rgba(255, 255, 255, 0.1); outline: none; border: 1px solid var(--border-color); }
.task-controls { display: flex; align-items: center; gap: 5px; }
.task-controls .delete-btn, .task-controls .expand-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); transition: color 0.2s; padding: 5px; }
.task-controls .delete-btn:hover, .task-controls .expand-btn:hover { color: var(--text-primary); }
.task-item-details { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding-left: 30px; max-height: 0; overflow: hidden; transition: all 0.4s ease-out; }
.task-item.open .task-item-details { max-height: 200px; padding-top: 15px; margin-top: 10px; border-top: 1px solid var(--border-color); }
.points-group { grid-column: 2 / 3; min-width: 120px; }
.url-group { grid-column: 1 / 2; }
.task-details-group { display: flex; flex-direction: column; }
.task-details-group label { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 8px; }

/* Referral Task Styling */
.referral-task-item { background-color: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-left: 4px solid #9d00ff; border-radius: var(--border-radius); padding: 15px; display: flex; align-items: center; gap: 20px; }
.referral-task-item .task-icon { font-size: 1.2rem; }
.referral-task-item .task-title { font-weight: 500; flex-grow: 1; }
.referral-task-item .points-group { min-width: 150px; }
.optional-tag { font-size: 0.9rem; font-weight: 400; color: var(--text-secondary); margin-left: 10px; }

/* General Form Styles */
.btn-publish-hero { margin-top: 15px; grid-column: 1 / -1; }
.hidden { display: none !important; }
.modal { display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); }
.modal-content { background-color: var(--bg-glass); color: var(--text-primary); margin: 15% auto; padding: 30px; border: 1px solid var(--border-color); width: 80%; max-width: 500px; border-radius: var(--border-radius); text-align: center; position: relative; }
.modal-content .fa-check-circle { font-size: 3rem; color: #28a745; margin-bottom: 20px; }
.close-btn { color: var(--text-secondary); position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }