/* Post Ad Page Styles */
.post-ad-container {
    padding: 120px 20px 60px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    color: #666;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #4a90e2;
}

.breadcrumb .separator {
    margin: 0 0.5rem;
    color: #ccc;
}

.breadcrumb .current {
    color: #333;
    font-weight: 500;
}

/* Header */
.post-header {
    text-align: left;
    margin-bottom: 3rem;
}

.post-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2C2C2C;
    margin-bottom: 0.5rem;
}

.post-header p {
    color: #666;
    font-size: 1.1rem;
}

/* Form Layout */
.post-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
}

.section-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.section-card h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.full-width-section {
    grid-column: 1 / -1;
    margin-top: 1rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Full-width boost card wrapper (replaces settings-grid when reach card is hidden) */
.boost-full-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.privacy-card,
.location-card {
    height: auto;
}

.section-subtitle {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Image Upload Area */
.image-upload-area {
    position: relative;
    border: 2px dashed #e1e1e1;
    border-radius: 20px;
    padding: 3.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(246, 248, 252, 0.9) 100%);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.image-upload-area::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -1;
    border-radius: 22px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.image-upload-area:hover,
.image-upload-area.dragover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(118, 75, 162, 0.1);
}

.image-upload-area:hover::before,
.image-upload-area.dragover::before {
    opacity: 0.15;
}

.upload-icon-circle {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0e7ff 100%);
    border-radius: 22px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
    transition: transform 0.3s ease;
}

.image-upload-area:hover .upload-icon-circle {
    transform: scale(1.1) rotate(5deg);
}

.upload-icon-circle svg {
    width: 32px;
    height: 32px;
}

.image-upload-area h3 {
    font-size: 1.25rem;
    color: #1f2937;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.image-upload-area p {
    color: #6b7280;
    font-size: 0.95rem;
}

/* Image Preview Grid */
.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.preview-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.preview-item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.preview-item.dragging {
    opacity: 0.4;
    border: 2px solid #4a90e2;
    transform: scale(0.9);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Luxury Badges for Photos */
.preview-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(31, 41, 55, 0.85);
    backdrop-filter: blur(8px);
    color: white;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.preview-item:first-child .preview-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 1);
    color: #ef4444;
    border: none;
    border-radius: 10px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-remove:hover {
    background: #ef4444;
    color: white;
    transform: rotate(90deg) scale(1.1);
}

/* Form Fields */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #374151;
    font-weight: 500;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Radio Cards */
.radio-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.radio-card {
    cursor: pointer;
    position: relative;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-label {
    display: block;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.radio-card input:checked+.radio-label {
    background: #eef2ff;
    border-color: #4a90e2;
    color: #4a90e2;
    font-weight: 500;
}

/* Pricing Advisor */
.pricing-advisor-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideInPricingDown 0.3s ease;
}

.advisor-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.advisor-icon {
    font-size: 1.5rem;
}

.pricing-status {
    font-weight: 700;
    color: #166534;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.pricing-context {
    color: #15803d;
    font-size: 0.8rem;
    font-weight: 500;
}

@keyframes slideInPricingDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AI Button */
.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.label-row label {
    margin-bottom: 0;
}

.ai-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tone-selector {
    display: flex;
    background: #f3f4f6;
    padding: 3px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
}

.tone-btn {
    background: transparent;
    border: none;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.2s;
}

.tone-btn:hover {
    color: #374151;
}

.tone-btn.active {
    background: white;
    color: #4a90e2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-generate-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

.ai-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(118, 75, 162, 0.4);
}

.sparkles-icon {
    width: 14px;
    height: 14px;
}

.ai-generate-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

.ai-generate-btn.loading .sparkles-icon {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* AI Thinking Overlay & Status */
.ai-thinking-overlay {
    display: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
    border: 1px solid rgba(118, 75, 162, 0.2);
    animation: fadeIn 0.3s ease;
}

.ai-thinking-overlay.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ai-status-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    animation: pulseText 1.5s infinite;
}

@keyframes pulseText {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* AI Tone Glows */
.ai-controls[data-tone="professional"] .ai-generate-btn { box-shadow: 0 0 20px rgba(74, 144, 226, 0.3); }
.ai-controls[data-tone="friendly"] .ai-generate-btn { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
.ai-controls[data-tone="direct"] .ai-generate-btn { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }

/* Magic Title Suggest */
.title-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.magic-suggest-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s ease;
    z-index: 5;
}

.magic-suggest-btn:hover {
    transform: scale(1.2) rotate(15deg);
}

.magic-suggest-btn.loading {
    animation: magicSpin 1s infinite linear;
}

@keyframes magicSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Description Power Score */
.description-power-wrap {
    display: none;
    margin-top: 10px;
    animation: slideInDown 0.4s ease;
}

.power-score-badge {
    background: linear-gradient(135deg, #10b981, #3b82f6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Location Input Icon */
.input-icon-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
}

.input-icon-wrapper input {
    padding-left: 2.75rem;
}

/* Action Buttons */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-cancel {
    background: rgba(30, 41, 59, 0.4);
    /* Luxury dark glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #ffffff;
    /* Extremely bright white outline */
    color: #ffffff;
    /* Bright white text */
    padding: 0.851rem 1.751rem;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-cancel:hover {
    background: rgba(30, 41, 59, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: #ffffff;
}

.btn-post {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.851rem 2.5rem;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-post:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(118, 75, 162, 0.4);
    filter: brightness(1.1);
}

.btn-post:active {
    transform: translateY(-1px);
}

.btn-preview {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #764ba2;
    color: #764ba2;
    padding: 0.851rem 1.751rem;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-preview:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.15);
}

.btn-save-draft {
    background: rgba(118, 75, 162, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(118, 75, 162, 0.2);
    color: #764ba2;
    padding: 0.851rem 1.751rem;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-save-draft:hover {
    background: rgba(118, 75, 162, 0.1);
    border-color: rgba(118, 75, 162, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.1);
}

/* Ad Preview Modal */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    z-index: 20000;
    display: none;
    overflow-y: auto;
    padding: 0;
}

.preview-modal.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.preview-modal-content {
    background: #f8f9fa;
    max-width: 1200px;
    margin: 2rem auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    width: 95%;
    /* Responsive width */
}

.preview-modal-header {
    background: white;
    padding: 1.25rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}

.preview-modal-header h3 {
    font-family: 'Playfair Display', serif;
    color: #2C2C2C;
    margin: 0;
}

.preview-modal-actions {
    display: flex;
    gap: 1rem;
}

.btn-finish-preview {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-publish-preview {
    background: linear-gradient(135deg, #2F5D3A 0%, #4a90e2 100%);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.preview-modal-body {
    padding: 2rem;
    background: radial-gradient(ellipse at top, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scoped Listing Detail Styles for Preview */
.preview-modal .detail-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
}

.preview-modal .image-gallery {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.preview-modal .main-image-container {
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    position: relative;
}

.preview-modal .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-modal .listing-information {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.preview-modal .listing-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

.preview-modal .listing-category {
    color: #4a90e2;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.preview-modal .price {
    font-size: 2rem;
    color: #2F5D3A;
    font-weight: 700;
    margin: 1rem 0;
}

.preview-modal .description-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.preview-modal .description-text {
    line-height: 1.6;
    color: #4b5563;
    white-space: pre-wrap;
}

.preview-modal .details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.preview-modal .detail-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.preview-modal .detail-value {
    font-weight: 600;
}

.preview-modal .seller-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .post-ad-container {
        padding: 125px 15px 40px; /* Increased top padding to clear sticky header */
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .breadcrumb {
        margin-bottom: 1.5rem;
        margin-top: 0.5rem;
        padding-left: 5px;
    }

    .post-form-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        width: 100%;
    }

    .form-column {
        min-width: 0;
        /* Allow grid items to shrink */
    }

    .post-header {
        text-align: left;
        margin-bottom: 2rem;
    }

    .post-header h2 {
        text-align: left;
    }

    .section-subtitle {
        text-align: left;
    }

    .post-header h1 {
        font-size: 1.6rem;
    }

    .section-card {
        padding: 1rem;
        border-radius: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .image-preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .label-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ai-controls {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0.75rem;
    }

    .tone-selector {
        width: 100%;
        justify-content: space-between;
        background: #fdfdfd;
        border: 1px solid #eee;
    }

    .tone-btn {
        flex: 1;
        padding: 0.6rem 0.2rem;
        font-size: 0.75rem;
    }

    .ai-generate-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
        padding: 0.751rem;
    }

    .form-actions {
        flex-direction: column;
        gap: 0.85rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .form-actions button {
        width: 100%;
        padding: 0.851rem;
    }

    /* Disable fade-in animations on mobile for immediate CTA visibility */
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Ad Preview Mobile Fixes */
    .preview-modal-content {
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .preview-modal-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .preview-modal-header h3 {
        font-size: 1.25rem;
    }

    .preview-modal-actions {
        width: 100%;
    }

    .preview-modal-actions button {
        flex: 1;
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .preview-modal-body {
        padding: 1rem;
    }

    .preview-modal .detail-content {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .preview-modal .main-image-container {
        height: 280px;
    }

    .preview-modal .listing-information {
        padding: 1.25rem;
    }

    .preview-modal .listing-title {
        font-size: 1.6rem;
    }

    .preview-modal .price {
        font-size: 1.5rem;
    }

    .preview-modal .details-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .preview-modal .sidebar-column {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .image-preview-grid {
        grid-template-columns: 1fr;
    }

    .radio-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .radio-label {
        font-size: 0.85rem;
        padding: 0.75rem 0.5rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .image-upload-area {
        padding: 2rem 1rem;
    }
}

/* Visibility Tiers */
.visibility-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.visibility-tier {
    position: relative;
    padding: 1.5rem 1rem;
    border: 2px solid #e1e1e1;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.visibility-tier:hover {
    border-color: #4a90e2;
    background: rgba(74, 144, 226, 0.02);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.visibility-tier.active {
    border-color: #4a90e2;
    background: rgba(74, 144, 226, 0.05);
    box-shadow: 0 12px 32px rgba(74, 144, 226, 0.1);
}

.tier-icon {
    font-size: 2rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.tier-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tier-name {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
}

.tier-desc {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.3;
}

.tier-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #4a90e2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.visibility-tier.active .tier-check {
    opacity: 1;
    transform: scale(1);
}

.visibility-tier.active .tier-name {
    color: #4a90e2;
}

@media (max-width: 768px) {
    .visibility-tiers {
        grid-template-columns: 1fr;
    }

    .visibility-tier {
        flex-direction: row;
        text-align: left;
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .tier-icon {
        font-size: 1.75rem;
    }
}

/* Map Preview */
.reach-map-wrap {
    margin-top: 1.5rem;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 300px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e1e1e1;
}

.reach-map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.map-overlay-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1000;
    pointer-events: none;
}

.map-reach-label {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4a90e2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
    border: 1px solid rgba(74, 144, 226, 0.2);
}

/* Boost Options Grid */
.boost-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Featured Boost Card (Base) */
.featured-boost-card {
    background: linear-gradient(145deg, #ffffff 0%, #fffdf5 100%);
    border: 1.5px solid #ecc94b;
    border-radius: 24px;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(236, 201, 75, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.featured-boost-card:hover {
    box-shadow: 0 12px 32px rgba(246, 224, 94, 0.2);
    transform: translateY(-2px);
}

.featured-boost-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(246, 224, 94, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.boost-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    margin-bottom: 1rem;
}

.boost-icon {
    font-size: 2.25rem;
    background: #fefcbf;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(246, 224, 94, 0.2);
}

.boost-title-wrap {
    display: flex;
    flex-direction: column;
}

.boost-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #805e00;
    letter-spacing: -0.01em;
}

.boost-badge {
    font-size: 0.65rem;
    font-weight: 800;
    background: #ecc94b;
    color: white;
    padding: 0.1rem 0.6rem;
    border-radius: 6px;
    width: fit-content;
    margin-top: 2px;
}

.boost-badge.red {
    background: #ef4444;
}

.boost-desc {
    font-size: 0.9rem;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.boost-bullets {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.boost-bullets li {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Urgent Variant */
.featured-boost-card.urgent {
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-color: #feb2b2;
    box-shadow: 0 4px 12px rgba(254, 178, 178, 0.1);
}

.featured-boost-card.urgent:hover {
    box-shadow: 0 12px 32px rgba(254, 178, 178, 0.2);
    border-color: #fc8181;
}

.featured-boost-card.urgent .boost-icon {
    background: #fed7d7;
    box-shadow: 0 4px 8px rgba(252, 129, 129, 0.2);
}

.featured-boost-card.urgent .boost-title {
    color: #c53030;
}

.featured-boost-card.urgent input:checked+.switch-slider {
    background-color: #ef4444;
}

/* Boost Footer (Credits/Cost) */
.boost-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.8rem;
}

.boost-cost {
    font-weight: 700;
    color: #4a5568;
}

.user-credits {
    font-weight: 600;
    color: #4f46e5;
    background: #eef2ff;
    padding: 3px 10px;
    border-radius: 12px;
}

@media (max-width: 992px) {
    .boost-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Premium Switch Styling */
.premium-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
}

.premium-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e0;
    transition: .4s;
    border-radius: 34px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked+.switch-slider {
    background-color: #ecc94b;
}

input:focus+.switch-slider {
    box-shadow: 0 0 1px #ecc94b;
}

input:checked+.switch-slider:before {
    transform: translateX(26px);
}

@media (max-width: 640px) {
    .boost-header {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .premium-switch {
        margin-left: auto !important;
        flex-shrink: 0;
    }

    .boost-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .boost-title {
        font-size: 1rem;
    }

    .boost-bullets {
        grid-template-columns: 1fr;
    }
}

/* Smart Upsell UI */
.pro-save-badge {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
    letter-spacing: 0.02em;
}

.pro-save-badge i {
    font-size: 0.6rem;
}

.upsell-card {
    background: linear-gradient(135deg, #fffdfa 0%, #fff5f5 100%);
    border: 2px solid #ecc94b;
    box-shadow: 0 15px 45px rgba(236, 201, 75, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    display: none;
    /* Hidden by default */
    animation: slideDownFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Form Footer Actions - Natural bottom of page (not fixed/sticky) */
.boost-option-row.selected {
    background: rgba(99, 102, 241, 0.05);
    border-color: #6366f1;
}

.boost-option-row.disabled-boost {
    opacity: 0.6;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

.boost-option-row.disabled-boost:hover {
    transform: none;
    box-shadow: none;
}

.boost-option-row.disabled-boost .price-tag {
    background: #e2e8f0;
    color: #94a3b8;
}

.boost-option-icon {
    font-size: 1.5rem;
    padding: 0.5rem;
}

.form-footer-actions {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding: 2rem;
    margin-top: 3rem;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .form-footer-actions {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }

    .footer-container {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-main-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .footer-main-actions button {
        padding: 0.75rem 0.25rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .btn-cancel {
        width: 100%;
        padding: 0.5rem;
        border: none;
        background: transparent;
        color: #64748b;
        text-decoration: underline;
        font-size: 0.85rem;
    }
}

.upsell-card::after {
    content: '✨';
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 2rem;
    opacity: 0.1;
}

.upsell-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.upsell-icon {
    font-size: 1.5rem;
    color: #4f46e5;
}

.upsell-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

.upsell-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
}

.upsell-savings {
    font-weight: 800;
    color: #10b981;
}

.btn-upsell-upgrade {
    background: #4f46e5;
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
}

.btn-upsell-upgrade:hover {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Privacy Settings Premium Card */
.privacy-settings-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 2px solid #6366f1;
    border-radius: 20px;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
    margin-bottom: 2rem;
}

.privacy-settings-card:hover {
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.privacy-settings-card::before {
    content: '\f023';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 3rem;
    opacity: 0.18;
    /* Increased for better visibility */
    color: #4f46e5;
    /* Stronger indigo */
    pointer-events: none;
}

.privacy-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.privacy-card-icon {
    width: 40px;
    height: 40px;
    background: #eef2ff;
    color: #6366f1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.privacy-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.privacy-options-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.privacy-option-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: flex-start;
}

.privacy-option-item .checkbox-wrap {
    padding-top: 2px;
}

.privacy-option-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #6366f1;
}

.privacy-option-label {
    font-weight: 700;
    color: #334155;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 0.25rem;
    display: block;
}

.privacy-option-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 640px) {
    .privacy-settings-card {
        padding: 1.25rem;
    }

    .privacy-option-desc {
        font-size: 0.8rem;
    }
}

/* Final Layout Polish */
@media (max-width: 992px) {
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .full-width-section {
        margin-top: 1.5rem;
    }
}

.premium-switch input:checked+.switch-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Pulse Marker Animation */
.pulse-marker {
    width: 14px;
    height: 14px;
    background: #4a90e2;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 rgba(74, 144, 226, 0.4);
    animation: pulse-ring 2s infinite;
}

.pulse-marker::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #4a90e2;
    border-radius: 50%;
    z-index: 1;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(74, 144, 226, 0);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

/* Luxury Map Labels */
.map-reach-label {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(74, 144, 226, 0.2) !important;
    color: #1a1a1a !important;
    padding: 10px 20px !important;
    font-weight: 800 !important;
    border-radius: 40px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Post Button Glow */
.btn-post:hover {
    box-shadow: 0 0 20px rgba(118, 75, 162, 0.4), 0 8px 24px rgba(118, 75, 162, 0.3);
}

/* ── New Inline Boost Selector ──────────────────────────────── */
.boost-selector-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0.5rem;
}

/* 2-column grid layout for boost options on desktop */
.boost-selector-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Trust bundle always spans full width — it's the hero option */
.boost-selector-2col .boost-option-row.trust-bundle {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .boost-selector-2col {
        grid-template-columns: 1fr;
    }
}

.boost-option-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fafafa;
    position: relative;
}

.boost-option-row input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: auto;
    padding: 0;
    border: none;
}

.boost-option-row:hover {
    border-color: #a78bfa;
    background: #f5f3ff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.1);
}

.boost-option-row.selected {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    box-shadow: inset 4px 0 0 #7c3aed, 0 10px 32px rgba(124, 58, 237, 0.18);
    transform: translateY(-2px);
}

.boost-option-row.trust-bundle {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffdf7 0%, #fefce8 100%);
}

.boost-option-row.trust-bundle.selected {
    border-color: #92400e;
    background: linear-gradient(135deg, #fffbeb 0%, #fde68a 100%);
    box-shadow: inset 4px 0 0 #92400e, 0 10px 32px rgba(146, 64, 14, 0.2);
    transform: translateY(-2px);
}

.boost-option-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    width: 42px;
    text-align: center;
}

.boost-option-body {
    flex: 1;
    min-width: 0;
}

.boost-option-title {
    font-weight: 700;
    font-size: 0.97rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.boost-option-desc {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

.boost-duration-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #e0e7ff;
    color: #4338ca;
    letter-spacing: 0.02em;
}

.boost-duration-pill.best-value {
    background: #fef3c7;
    color: #92400e;
}

.boost-option-price {
    flex-shrink: 0;
}

.price-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.price-tag.free {
    background: #dcfce7;
    color: #166534;
}

.price-tag.paid {
    background: #ede9fe;
    color: #5b21b6;
}

.price-tag.trust {
    background: #fef3c7;
    color: #92400e;
}

/* ── Per-Boost Selected Colour Themes ───────────────────────── */
.boost-option-row[data-boost="free"].selected {
    border-color: #475569;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: inset 4px 0 0 #475569, 0 10px 30px rgba(71, 85, 105, 0.14);
}
.boost-option-row[data-boost="free"].selected .boost-check-dot {
    background: #475569; border-color: #475569;
}

.boost-option-row[data-boost="bump"].selected {
    border-color: #0284c7;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    box-shadow: inset 4px 0 0 #0284c7, 0 10px 30px rgba(2, 132, 199, 0.14);
}
.boost-option-row[data-boost="bump"].selected .boost-check-dot {
    background: #0284c7; border-color: #0284c7;
}

.boost-option-row[data-boost="urgent"].selected {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
    box-shadow: inset 4px 0 0 #dc2626, 0 10px 30px rgba(220, 38, 38, 0.14);
}
.boost-option-row[data-boost="urgent"].selected .boost-check-dot {
    background: #dc2626; border-color: #dc2626;
}

.boost-option-row[data-boost="featured"].selected {
    border-color: #d97706;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: inset 4px 0 0 #d97706, 0 10px 30px rgba(217, 119, 6, 0.17);
}
.boost-option-row[data-boost="featured"].selected .boost-check-dot {
    background: #d97706; border-color: #d97706;
}

.boost-option-row[data-boost="trust"].selected .boost-check-dot {
    background: #92400e; border-color: #92400e;
}

/* ── Boost Check Dot (circular indicator, far right) ────────── */
.boost-check-dot {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 2.5px solid #d1d5db;
    border-radius: 50%;
    background: white;
    position: relative;
    margin-left: 10px;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* CSS checkmark via ::after */
.boost-check-dot::after {
    content: '';
    position: absolute;
    top: 48%;
    left: 50%;
    width: 5px;
    height: 9px;
    border-right: 2.5px solid white;
    border-bottom: 2.5px solid white;
    transform: translate(-50%, -58%) rotate(45deg) scale(0);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.boost-option-row.selected .boost-check-dot {
    transform: scale(1.08);
}

.boost-option-row.selected .boost-check-dot::after {
    transform: translate(-50%, -58%) rotate(45deg) scale(1);
}

/* ── Active press effect (physical button feel) ─────────────── */
.boost-option-row:not(.disabled-boost):active {
    transform: scale(0.97) !important;
    transition: transform 0.07s ease !important;
    box-shadow: none !important;
}

/* ── Price tag pops when selected ───────────────────────────── */
.boost-option-row.selected .price-tag {
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    transition: all 0.22s ease;
}

/* ── Selection Summary Bar ───────────────────────────────────── */
.boost-selection-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 18px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1.5px solid #c4b5fd;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4c1d95;
    transition: all 0.3s ease;
    animation: summaryFadeIn 0.3s ease;
}

.bss-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #7c3aed;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

@keyframes summaryFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── View Cart Button ───────────────────────────────────────── */
.btn-view-cart {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.851rem 1.75rem;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    animation: cartPulse 2s ease-in-out infinite;
}

.btn-view-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
}

@keyframes cartPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35); }
    50%       { box-shadow: 0 4px 24px rgba(16, 185, 129, 0.6); }
}

/* ── City Chips Scalable Search UI ───────────────────────────────────────── */
.city-search-wrapper {
    position: relative;
    width: 100%;
}

.city-search-wrapper input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #fff;
}

.city-search-wrapper input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.city-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.city-dropdown-list.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

.city-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.city-dropdown-item:last-child {
    border-bottom: none;
}

.city-dropdown-item:hover {
    background: #f8fafc;
    color: #4f46e5;
}

.city-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.city-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: scaleIn 0.2s ease;
    border: 1px solid #c7d2fe;
}

.city-chip-remove {
    cursor: pointer;
    background: #c7d2fe;
    color: #4338ca;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: all 0.2s ease;
}

.city-chip-remove:hover {
    background: #ef4444;
    color: white;
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Vehicle Details Panel ──────────────────────────────────────── */
#vehicleDetailsPanel {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border: 1.5px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vehicle-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

.vehicle-panel-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.vehicle-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #4338ca;
    margin: 0 0 0.15rem 0;
    letter-spacing: -0.01em;
}

.vehicle-panel-sub {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.required-star {
    color: #ef4444;
    font-weight: 700;
}

.optional-label {
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 400;
}

/* ── Vehicle Spec Table (listing-detail.html) ───────────────────── */
.vehicle-specs-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.04));
    border: 1.5px solid rgba(99, 102, 241, 0.18);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.vehicle-specs-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #4338ca;
    margin-bottom: 1rem;
}

.vehicle-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.vehicle-spec-item {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.vehicle-spec-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vehicle-spec-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* vehicle highlight pill in browse card */
.vehicle-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4338ca;
    background: rgba(99,102,241,0.1);
    border-radius: 20px;
    padding: 2px 8px;
    margin-top: 3px;
}