/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

/* Container and Layout */
.amazon-tool-container {
    min-height: 100vh;
    padding: 2rem;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (max-width: 768px) {
    .amazon-tool-container {
        padding: 1rem;
    }
}

.tool-card {
    max-width: 896px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .tool-card {
        padding: 1.5rem;
    }
}

.amazon-tool-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 600;
  color: #030213;
  text-align: center;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 2rem !important;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}


.amazon-tool-heading h1 {
  font-weight: 900 !important;
  color: #333 !important;
  letter-spacing: -2px !important;
}

@media (max-width: 768px) {
    .amazon-tool-heading h1 {
        font-size: 2rem !important;
    }
}


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

/* Tab Navigation */
.toggle-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.togglebutton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 111, 94, 0.05);
    border: 2px solid rgba(255, 111, 94, 0.2);
    border-radius: 6px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.togglebutton:hover {
    background-color: rgba(255, 111, 94, 0.1);
    border-color: rgba(255, 111, 94, 0.3);
    color: #333; /* Ensure text stays dark on hover */
}

.togglebutton.active {
    background: linear-gradient(to right, #FF6F5E, #FF6F5E);
    color: #fff !important;
    border-color: #FF6F5E;
    box-shadow: 0 10px 15px -3px rgba(255, 111, 94, 0.2);
}

.togglebutton.active:hover .button-icon {
    color: #fff; /* Keep icon white when active button is hovered */
}

.togglebutton .button-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.togglebutton .button-text {
    display: inline;
}

@media (max-width: 640px) {
    .togglebutton .button-text {
        display: none;
    }
    
    .togglebutton {
        padding: 0.5rem;
    }

    .toggle-container {
        margin-bottom: 1rem;
    }

    
}

/* Form Styles */
.search-form-container {
    margin-bottom: 1.5rem;
}

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

@media (min-width: 768px) {
    .search-grid {
        grid-template-columns: 1fr 2fr;
        gap: 1rem;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    margin-top: 20px !important;
}

.label-icon {
    width: 14px;
    height: 14px;
    color: #FF6F5E;
}

/* Input and Select Styles */
.form-input,
.form-select,
.keyword-input,
.keyword-input-products,
.dropdown,
.dropdown-products {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: #f3f3f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-input:focus,
.form-select:focus,
.keyword-input:focus,
.keyword-input-products:focus,
.dropdown:focus,
.dropdown-products:focus {
    border-color: #FF6F5E;
    box-shadow: 0 0 0 3px rgba(255, 111, 94, 0.1);
}

/* Custom Select Arrow */
.custom-select-wrapper,
.custom-select-wrapper-products {
    position: relative;
    width: 100%;
}

.custom-select-wrapper::after,
.custom-select-wrapper-products::after {
    content: '\25BC';
    font-size: 12px;
    color: #666;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Input Wrapper for Search */
.input-wrapper {
    display: flex;
    gap: 0.5rem;
}

.keyword-input,
.keyword-input-products {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.keyword-input:focus,
.keyword-input-products:focus {
    border-color: #FF6F5E !important;
}

/* Search Button */
.search-button,
.search-button-products,
button.search-button,
button.search-button-products,
button[type="submit"].search-button,
button[type="submit"].search-button-products {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background-color: #FF6F5E !important;
    color: white !important;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(255, 111, 94, 0.2);
    text-decoration: none !important;
}

.search-button:hover,
.search-button-products:hover,
button.search-button:hover,
button.search-button-products:hover,
button[type="submit"].search-button:hover,
button[type="submit"].search-button-products:hover {
    background-color: #E55D4C !important;
    color: white !important;
    box-shadow: 0 20px 25px -5px rgba(255, 111, 94, 0.3);
    text-decoration: none !important;
}

.search-button:focus,
.search-button-products:focus,
button.search-button:focus,
button.search-button-products:focus,
button[type="submit"].search-button:focus,
button[type="submit"].search-button-products:focus {
    background-color: #E55D4C !important;
    color: white !important;
    outline: none;
    box-shadow: 0 20px 25px -5px rgba(255, 111, 94, 0.3), 0 0 0 3px rgba(255, 111, 94, 0.3);
    text-decoration: none !important;
}

.search-button:disabled,
.search-button-products:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tool Description Box */
.tool-description {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 111, 94, 0.05);
    border: 1px solid rgba(255, 111, 94, 0.15);
    border-radius: 8px;
}

.description-icon {
    width: 32px;
    height: 32px;
    background-color: #FF6F5E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.description-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

.description-content {
    flex: 1;
}

.description-title {
    font-size: 1rem !important;
    font-weight: 500;
    color: #111827;
    margin: 0 0 0.25rem 0;
}

.description-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    margin-block-end: 0px !important;
}

/* Create Listing Form Styles */
.container-listings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-textarea,
#selected-keywords,
#listing-info {
    width: 100%;
    padding: 0.75rem;
    background-color: #f3f3f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    outline: none;
}

.form-textarea:focus,
#selected-keywords:focus,
#listing-info:focus {
    border-color: #FF6F5E;
    box-shadow: 0 0 0 3px rgba(255, 111, 94, 0.1);
}

.button-listing,
button.button-listing {
    padding: 0.625rem 2rem;
    margin-top: 20px !important;
    background-color: #FF6F5E !important;
    color: white !important;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(255, 111, 94, 0.2);
    align-self: flex-start;
    text-decoration: none !important;
}

.button-listing:hover,
button.button-listing:hover {
    background-color: #E55D4C !important;
    color: white !important;
    box-shadow: 0 20px 25px -5px rgba(255, 111, 94, 0.3);
    text-decoration: none !important;
}

.button-listing:focus,
button.button-listing:focus {
    background-color: #E55D4C !important;
    color: white !important;
    outline: none;
    box-shadow: 0 20px 25px -5px rgba(255, 111, 94, 0.3), 0 0 0 3px rgba(255, 111, 94, 0.3);
    text-decoration: none !important;
}

.output {
    padding: 1rem;
    background-color: #f0f9f0;
    border: 1px solid #e6f4e6;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: pre-wrap;
    min-height: 100px;
}

/* Results Section */
.results {
    max-width: 896px;
    margin: 0 auto;
    min-height: 200px;
    font-family: 'Source Sans Pro', sans-serif;
    position: relative;
}

/* Loader Styles */
/* UPDATED: move spinner + text slightly lower and keep them visually coupled */
.loader-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;                 /* was 50% */
    transform: translateY(-50%);
    text-align: center;
    display: none;
}

.loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 111, 94, 0.2);
    border-top-color: #FF6F5E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* UPDATED: position the text relative to spinner, add top space */
.loader-text {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(20% + 60px);    /* sits right under spinner */
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Results Table Card */
.keyword-results {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    overflow: hidden;
}

/* Keyword List Table */
.keyword-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.keyword-list li {
    display: grid;
    grid-template-columns: 80px 1.5fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 1rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

.keyword-list li:last-child {
    border-bottom: none;
}

.keyword-list li.header-row {
    background-color: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6b7280;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* NEW: make the "Keywords" header bold only in header row */
.keyword-list li.header-row .col.keyword {
    font-weight: 700;
}

.keyword-list li.data-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.keyword-list .col {
    padding: 0 0.5rem;
    /* NEW: better vertical alignment on mobile */
    display: flex;
    align-items: center;
}

.keyword-list .col.keyword {
    font-weight: 500;
    color: #111827;
}

.keyword-list .col.search-volume,
.keyword-list .col.trend,
.keyword-list .col.averagecpc,
.keyword-list .col.competition,
.keyword-list .col.profitability {
    text-align: center;
    font-size: 0.875rem;
    justify-content: center; /* center text within flex col */
}

.keyword-list .col.search-volume {
    font-weight: 600;
    color: #111827;
}

/* Copy Button */
.copy-button,
button.copy-button {
    padding: 0.375rem 0.625rem;
    background: linear-gradient(to right, #3399ff, #0066cc) !important;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.copy-button:hover,
button.copy-button:hover {
    background: linear-gradient(to right, #2878cc, #004c99) !important;
    color: white !important;
    text-decoration: none !important;
}

.copy-button:focus,
button.copy-button:focus {
    background: linear-gradient(to right, #2878cc, #004c99) !important;
    color: white !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.3);
    text-decoration: none !important;
}

/* Discount Box – UPDATED look to match the tool */
.discount-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    margin-top: 1.5rem;
    box-shadow: 0 10px 20px -10px rgba(16, 24, 40, 0.08);
}

.logo-section img {
    max-width: 120px;
    height: auto;
    display: block;
}

.content-section {
    flex: 1;
}

.content-section h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
}

.content-section .highlight {
    color: #FF6F5E;
    font-weight: 700;
}

.discount-button,
button.discount-button {
    padding: 0.625rem 1.25rem;
    background-color: #FF6F5E !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .2s ease;
    text-decoration: none !important;
    box-shadow: 0 8px 16px -6px rgba(255, 111, 94, 0.35);
}

.discount-button:hover,
button.discount-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -10px rgba(255, 111, 94, 0.45);
}

.discount-button:focus,
button.discount-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 111, 94, 0.25);
    text-decoration: none !important;
}


/* Add these styles to your existing .discount-button CSS */

/* Update your existing button CSS with these additions */
.discount-button,
button.discount-button {
    position: relative;
    z-index: 1;
    color: white !important;        /* You already have this */
    font-weight: 600;               /* CHANGE from 700 to 600 for semi-bold */
    /* Keep all your other existing styles */
}

/* Flowing border effect - add this as new CSS */
.discount-button::before,
button.discount-button::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 11px; /* Your border-radius (8px) + 3px */
    background: linear-gradient(
        45deg,
        #ff0080,
        #ff8c00,
        #40e0d0,
        #ff0080,
        #ff8c00
    );
    background-size: 300% 300%;
    z-index: -1;
    animation: flowingBorder 3s ease infinite;
}

/* Optional: Add glow on hover */
.discount-button:hover::before,
button.discount-button:hover::before {
    filter: blur(6px);
}

/* Animation keyframes */
@keyframes flowingBorder {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    /* UPDATED: keep “Trend” on the same row by providing 4 columns */
    .keyword-list li {
        grid-template-columns: 60px 1.5fr 1fr 0.9fr;
        font-size: 0.8rem;
    }

    /* hide dense columns at tablet width */
    .keyword-list .col.copy,
    .keyword-list .col.averagecpc,
    .keyword-list .col.competition,
    .keyword-list .col.profitability {
        display: none;
    }

    /* Buttons: stack nicely with spacing */
    .action-button,
    .export-button {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0.75rem; /* vertical gap on mobile */
    }

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

    .trend-indicator {
        flex-direction: column;
        gap: 0.125rem;
        font-size: 0.75rem;
    }

    .competition-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* Discount box stacks */
    .discount-box {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .logo-section img {
        max-width: 110px;
    }
}

/* Keep “Trend” hidden only on very narrow phones if needed */
@media (max-width: 540px) {
    .keyword-list li {
        grid-template-columns: 1.5fr 1fr;
    }
    .keyword-list .col.trend {
        display: none;
    }
}

@media (max-width: 460px) {
    .keyword-list li {
        grid-template-columns: 1fr;
    }
    .keyword-list .col.search-volume {
        display: none;
    }
    .keyword-list li.data-row .col.keyword {
        text-align: center;
        justify-content: center;
    }
}

/* Results Header */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.results-header-content {
    display: flex;
    gap: 0.75rem;
}

.results-icon-wrapper {
    width: 32px;
    height: 32px;
    background-color: #FF6F5E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.results-icon {
    width: 16px;
    height: 16px;
    color: white;
}

.results-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.results-title {
    font-size: 1.25rem !important;
    font-family: Source Sans 3 !important;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

.results-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Buttons – ensure spacing between Copy & Export on desktop */
.action-button,
.export-button,
button.export-button {
    padding: 0.5rem 1rem;
    background-color: transparent !important;
    color: #FF6F5E !important;
    border: 1px solid #FF6F5E;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    margin-right: 0.75rem;   /* NEW horizontal space */
}

.results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;            /* also works when template adds a wrapper */
}

.action-button:hover,
.export-button:hover,
button.export-button:hover {
    background-color: #FF6F5E !important;
    color: white !important;
    text-decoration: none !important;
}

.action-button:focus,
.export-button:focus,
button.export-button:focus {
    background-color: #FF6F5E !important;
    color: white !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 111, 94, 0.3);
    text-decoration: none !important;
}

/* Table Container */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Trend Indicators */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.trend-indicator svg {
    width: 12px;
    height: 12px;
}

.trend-up {
    color: #f59e0b;
}

.trend-down {
    color: #ef4444;
}

.trend-stable {
    color: #6b7280;
}

/* Competition Badges */
.competition-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.competition-low {
    background-color: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.competition-medium {
    background-color: rgba(255, 111, 94, 0.1);
    color: #FF6F5E;
}

.competition-high {
    background-color: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.competition-n\/a {
    background-color: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Market Size Styling */
.market-size {
    font-weight: 600;
    color: #7c3aed;
}

/* Copy Button States */
.copy-button.copied,
button.copy-button.copied {
    background: linear-gradient(to right, #16a34a, #059669) !important;
    color: white !important;
}

.copy-button.copied:hover,
button.copy-button.copied:hover {
    background: linear-gradient(to right, #16a34a, #059669) !important;
    color: white !important;
}

/* No Results Message */
.no-results {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

.no-results p {
    margin: 0;
    font-size: 1rem;
}

/* Responsive Updates already handled above */

/* Override global button hover/focus from theme */
[type=button].togglebutton:focus,
[type=button].togglebutton:hover,
[type=submit].togglebutton:focus,
[type=submit].togglebutton:hover,
button.togglebutton:focus,
button.togglebutton:hover {
    background-color: rgba(255, 111, 94, 0.1) !important;
    text-decoration: none !important;
}

.amazon-tool-container [type=button]:focus,
.amazon-tool-container [type=button]:hover,
.amazon-tool-container [type=submit]:focus,
.amazon-tool-container [type=submit]:hover,
.amazon-tool-container button:focus,
.amazon-tool-container button:hover {
    background-color: inherit;
    color: inherit;
    text-decoration: inherit;
}

/* ========= MOBILE FIXES (append at end of file) ========= */

/* 1) Make all cells vertically centered and tidy */
.keyword-list .col {
  display: flex;
  align-items: center;
}

/* Center numeric/short columns horizontally too */
.keyword-list .col.search-volume,
.keyword-list .col.trend,
.keyword-list .col.averagecpc,
.keyword-list .col.competition,
.keyword-list .col.profitability {
  justify-content: center;
  text-align: center;
}

/* Keep "Keywords" header bold (safety if not already) */
.keyword-list li.header-row .col.keyword {
  font-weight: 700;
}

/* 2) <= 540px: keep three columns so order never flips:
      [checkbox | keyword | search volume]  */
@media (max-width: 540px) {
  .keyword-list li {
    grid-template-columns: 44px 1.6fr 1fr; /* checkbox, keyword, volume */
    font-size: 0.8rem;
  }
  /* Hide trend here; other dense cols already hidden at 768px */
  .keyword-list .col.trend { display: none; }
}

/* 3) <= 460px: collapse to [checkbox | keyword],
      hide volume, and CENTER header + cells for keyword */
@media (max-width: 460px) {
  .keyword-list li {
    grid-template-columns: 44px 1fr;
  }
  .keyword-list .col.search-volume { display: none; }

  /* Center keyword cells and header nicely */
  .keyword-list li.data-row .col.keyword,
  .keyword-list li.header-row .col.keyword {
    justify-content: center;
    text-align: center;
  }
}

/* 4) Small nicety: keep checkboxes visually centered in their column */
.keyword-list input[type="checkbox"] {
  margin: 0 auto;
}

/* ===== Listing Generator: add breathing room between headings & fields ===== */

/* Increase the internal gap inside each form section */
.container-listings .section {
  gap: 1rem;                  /* was 0.75rem */
}

/* Give labels a tiny margin so the following field sits lower */
.container-listings .section > label,
.container-listings .section .form-label {
  margin-bottom: 0.35rem;
}

/* Ensure textareas/inputs don't collapse upward on some browsers */
#selected-keywords,
#listing-info,
.container-listings .section .form-textarea,
.container-listings .section input[type="text"],
.container-listings .section select,
.container-listings .section textarea {
  margin-top: 0.15rem;
}

/* (Optional) a touch of space above the Generate button */
.container-listings .section .button-listing {
  margin-top: 0.5rem;
}

/* ===== Listing Generator: top margin for the FIRST heading ===== */
.container-listings > .section:first-of-type > label,
.container-listings > .section:first-of-type .form-label {
  margin-top: 1.5rem;      /* tweak to taste: 0.5–1rem */
  display: inline-block;    /* ensures margin applies even if label is inline */
}

/* Align the promo banner (now outside the card) to the same page width */
#discount-box {
  max-width: 896px;         /* matches .tool-card / .results width */
  margin: 1.25rem auto 2rem;/* spacing below the card and above results */
}

/* Optional: small side gutters on narrow screens */
@media (max-width: 768px) {
  #discount-box { margin: 1rem auto 1.5rem; }
}

@media (max-width: 901px) {
  #discount-box h5 { 
    line-height: 1.5 ;
    }
}

.results { margin-bottom: 0; }
.results:has(.keyword-results),
.results:has(.no-results) { margin-bottom: 100px; }

/* constants */
:root{
  --header-offset: 294px;  /* height of heading + top padding above the tool */
  --results-min: 400px;      /* space for spinner/loader */
}

/* Make the tool section fill exactly the first screen below the header */
.amazon-tool-container{
  min-height: calc(100vh - var(--header-offset));
}

/* Better on modern browsers with dynamic viewport units */
@supports (height: 100dvh){
  .amazon-tool-container{
    min-height: calc(100dvh - var(--header-offset));
  }
}

/* Results always have >=200px and "soak up" leftover space so
   the next section starts right after one scroll */
.results{
  min-height: var(--results-min);
}