/**
 * Frontend Styles
 *
 * @package WPNearMe_Brief_Builder
 */

/* Wizard Container */
.wpnm-brief-wizard {max-width: 800px; margin: 40px auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}

/* Progress Bar */
.wpnm-wizard-progress {margin-bottom: 40px;}
.wpnm-progress-bar {height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-bottom: 20px;}
.wpnm-progress-fill {height: 100%; background: linear-gradient(90deg, #3498db, #2ecc71); transition: width 0.3s ease;}
.wpnm-progress-steps {display: flex; justify-content: space-between; align-items: center;}
.wpnm-step {width: 40px; height: 40px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #666; transition: all 0.3s ease;}
.wpnm-step.active {background: #3498db; color: #fff;}
.wpnm-step.completed {background: #2ecc71; color: #fff;}

/* Wizard Steps */
.wpnm-wizard-step {display: none;}
.wpnm-wizard-step.active {display: block;}
.wpnm-wizard-step h2 {margin-top: 0; color: #2c3e50; font-size: 28px;}
.wpnm-step-description {color: #7f8c8d; margin-bottom: 30px; font-size: 16px;}

/* Project Type Selection */
.wpnm-project-types {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;}
.wpnm-project-type-option {display: block; padding: 20px; border: 2px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; text-align: center;}
.wpnm-project-type-option:hover {border-color: #3498db; background: #f8f9fa;}
.wpnm-project-type-option input[type="radio"] {display: none;}
.wpnm-project-type-option input[type="radio"]:checked + .wpnm-option-label {color: #3498db; font-weight: bold;}
.wpnm-project-type-option:has(input:checked) {border-color: #3498db; background: #e3f2fd;}

/* Depth Level Selection */
.wpnm-depth-levels {display: flex; flex-direction: column; gap: 15px;}
.wpnm-depth-option {display: block; padding: 20px; border: 2px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.3s ease;}
.wpnm-depth-option:hover {border-color: #3498db; background: #f8f9fa;}
.wpnm-depth-option input[type="radio"] {display: none;}
.wpnm-depth-option:has(input:checked) {border-color: #3498db; background: #e3f2fd;}
.wpnm-option-content {display: block;}
.wpnm-option-content strong {display: block; margin-bottom: 5px; color: #2c3e50; font-size: 18px;}
.wpnm-option-content small {color: #7f8c8d; font-size: 14px;}

/* Form Fields */
.wpnm-form-group {margin-bottom: 25px;}
.wpnm-form-group label {display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 15px;}
.wpnm-form-group .required {color: #e74c3c;}
.wpnm-input, .wpnm-textarea, .wpnm-select {width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 15px; transition: border-color 0.3s ease;}
.wpnm-input:focus, .wpnm-textarea:focus, .wpnm-select:focus {outline: none; border-color: #3498db;}
.wpnm-input.error, .wpnm-textarea.error, .wpnm-select.error {border-color: #e74c3c;}
.wpnm-field-help {font-size: 13px; color: #7f8c8d; margin-top: 5px;}

/* Features Grid */
.wpnm-features-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;}
.wpnm-feature-option {display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.3s ease;}
.wpnm-feature-option:hover {border-color: #3498db; background: #f8f9fa;}
.wpnm-feature-option:has(input:checked) {border-color: #3498db; background: #e3f2fd;}
.wpnm-feature-option input[type="checkbox"] {margin: 0;}

/* Radio Groups */
.wpnm-radio-group {display: flex; flex-direction: column; gap: 10px;}
.wpnm-radio-option {display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.3s ease;}
.wpnm-radio-option:hover {border-color: #3498db; background: #f8f9fa;}
.wpnm-radio-option:has(input:checked) {border-color: #3498db; background: #e3f2fd;}

/* AI Section */
.wpnm-ai-section {text-align: center; padding: 40px 20px;}
.wpnm-ai-results {margin-top: 30px; padding: 25px; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #3498db;}
.wpnm-ai-suggestions h4 {color: #2c3e50; margin-top: 20px; margin-bottom: 10px;}
.wpnm-ai-suggestions ul {padding-left: 20px; color: #555;}
.wpnm-ai-score {font-size: 24px; font-weight: bold; color: #2ecc71; margin-bottom: 20px;}

/* Preview */
.wpnm-brief-preview {padding: 25px; background: #f8f9fa; border-radius: 6px; margin-bottom: 30px;}
.wpnm-preview-section h3 {margin-top: 0; color: #2c3e50;}
.wpnm-preview-section p {margin-bottom: 15px; color: #555;}
.wpnm-preview-section ul {padding-left: 20px; color: #555;}

/* Buttons */
.wpnm-button {display: inline-block; padding: 12px 24px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; text-align: center;}
.wpnm-button-primary {background: #3498db; color: #fff;}
.wpnm-button-primary:hover {background: #2980b9; color: #fff;}
.wpnm-button-secondary {background: #95a5a6; color: #fff;}
.wpnm-button-secondary:hover {background: #7f8c8d; color: #fff;}
.wpnm-button-text {background: transparent; color: #3498db; text-decoration: underline;}
.wpnm-button-text:hover {color: #2980b9;}
.wpnm-button-small {padding: 8px 16px; font-size: 14px;}
.wpnm-button:disabled {opacity: 0.5; cursor: not-allowed;}

/* Navigation */
.wpnm-wizard-navigation {display: flex; justify-content: space-between; gap: 15px; margin-top: 40px; padding-top: 30px; border-top: 2px solid #e0e0e0;}

/* Form Actions */
.wpnm-form-actions {display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px;}

/* Login Prompt */
.wpnm-login-prompt {max-width: 600px; margin: 60px auto; padding: 40px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center;}
.wpnm-login-prompt h2 {margin-top: 0; color: #2c3e50;}
.wpnm-login-buttons {display: flex; justify-content: center; gap: 15px; margin: 30px 0;}
.wpnm-login-benefits {margin-top: 40px; text-align: left;}
.wpnm-login-benefits h3 {color: #2c3e50; font-size: 18px;}
.wpnm-login-benefits ul {color: #555;}

/* My Briefs Dashboard */
.wpnm-my-briefs-dashboard {max-width: 1200px; margin: 40px auto; padding: 30px;}
.wpnm-dashboard-header {display: flex; justify-content: flex-end; align-items: center; margin-bottom: 40px;}
.wpnm-empty-state {text-align: center; padding: 60px 20px;}
.wpnm-empty-state h3 {color: #2c3e50; margin-bottom: 15px;}
.wpnm-empty-state p {color: #7f8c8d; margin-bottom: 30px;}

/* Brief Cards */
.wpnm-briefs-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px;}
.wpnm-brief-card {background: #fff; border-radius: 8px; padding: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease;}
.wpnm-brief-card:hover {box-shadow: 0 4px 16px rgba(0,0,0,0.15);}
.wpnm-brief-card-header {display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;}
.wpnm-brief-card-header h3 {margin: 0; color: #2c3e50; font-size: 20px; flex: 1;}
.wpnm-brief-card-meta {display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; color: #7f8c8d; font-size: 14px;}
.wpnm-meta-item strong {color: #2c3e50;}
.wpnm-brief-card-excerpt {margin-bottom: 20px;}
.wpnm-brief-card-excerpt p {color: #555; margin: 0;}
.wpnm-brief-card-actions {display: flex; flex-wrap: wrap; gap: 10px;}
.wpnm-brief-submissions {margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;}
.wpnm-brief-submissions h4 {font-size: 14px; color: #2c3e50; margin-bottom: 10px;}
.wpnm-brief-submissions ul {list-style: none; padding: 0; margin: 0;}
.wpnm-brief-submissions li {padding: 8px 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;}
.wpnm-submission-date {font-size: 12px; color: #7f8c8d;}
.wpnm-viewed-badge {padding: 4px 8px; background: #2ecc71; color: #fff; border-radius: 4px; font-size: 11px; font-weight: bold;}

/* Status Badges */
.wpnm-status-badge {display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase;}
.wpnm-badge-draft {background: #f39c12; color: #fff;}
.wpnm-badge-completed {background: #2ecc71; color: #fff;}
.wpnm-badge-sent {background: #3498db; color: #fff;}

/* Modal */
.wpnm-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none;}
.wpnm-modal-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);}
.wpnm-modal-content {position: relative; max-width: 600px; margin: 50px auto; background: #fff; border-radius: 8px; max-height: 90vh; overflow-y: auto;}
.wpnm-modal-large {max-width: 900px;}
.wpnm-modal-header {padding: 20px 30px; border-bottom: 2px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;}
.wpnm-modal-header h3 {margin: 0; color: #2c3e50;}
.wpnm-modal-close {background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; color: #7f8c8d; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.wpnm-modal-close:hover {color: #2c3e50;}
.wpnm-modal-body {padding: 30px;}

/* Send Brief Section */
.wpnm-send-brief-section {margin: 20px 0;}
.wpnm-send-limit-info {padding: 15px; background: #e3f2fd; border-radius: 6px; margin-bottom: 20px;}
.wpnm-send-limit-info p {margin: 0; color: #2c3e50; font-size: 14px;}
.wpnm-brief-preview-mini {padding: 15px; background: #f8f9fa; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid #3498db;}
.wpnm-brief-preview-mini h4 {margin-top: 0; color: #2c3e50;}

/* Notices */
.wpnm-notice {padding: 15px 20px; border-radius: 6px; margin-bottom: 20px;}
.wpnm-notice-error {background: #ffe8e8; border-left: 4px solid #e74c3c; color: #c0392b;}
.wpnm-notice-info {background: #e3f2fd; border-left: 4px solid #3498db; color: #2c3e50;}
.wpnm-notice p {margin: 0;}

/* Responsive */
@media (max-width: 768px) {
.wpnm-brief-wizard {padding: 20px; margin: 20px auto;}
.wpnm-project-types {grid-template-columns: 1fr;}
.wpnm-briefs-grid {grid-template-columns: 1fr;}
.wpnm-wizard-navigation {flex-direction: column;}
.wpnm-dashboard-header {flex-direction: column; align-items: flex-start; gap: 20px;}
.wpnm-modal-content {margin: 20px; max-height: calc(100vh - 40px);}
.wpnm-brief-card-actions {flex-direction: column;}
.wpnm-brief-card-actions .wpnm-button {width: 100%;}
}