/* ============================================================
   GOOGLE ADS CHARACTER COUNTER
   google-ads-character-counter.css

   Page-specific stylesheet.
   Shared header/footer: header-and-footer-updated.css
   ============================================================ */


/* ============================================================
   BASE PAGE AND LAYOUT
   ============================================================ */

html {
    font-family: Arial, sans-serif;
}

.ads-page {
    width: 100%;
    padding: 105px 15px 30px;
    color: #333;
    font-family: Arial, sans-serif;
}

.ads-page *,
.ads-page *::before,
.ads-page *::after {
    box-sizing: border-box;
}

.ads-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 28px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.ads-main {
    width: 100%;
    min-width: 0;
}

.ads-page button,
.ads-page input,
.ads-page textarea {
    font-family: Arial, sans-serif;
}

.ads-page a {
    color: #1155cc;
    text-decoration: none;
}

.ads-page a:hover {
    text-decoration: underline;
}

.ads-page button {
    cursor: pointer;
}

.ads-page button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ads-page button:focus-visible,
.ads-page input:focus-visible,
.ads-page textarea:focus-visible {
    outline: 2px solid #5f6368;
    outline-offset: 2px;
}


/* ============================================================
   PAGE HEADING
   ============================================================ */

.ads-heading {
    margin-bottom: 22px;
    text-align: center;
}

.ads-heading h1 {
    margin: 0 0 10px;
    padding: 0;
    color: #333;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}

.ads-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: #555;
    font-size: 17px;
    line-height: 1.55;
}


/* ============================================================
   TOOL CARDS AND TYPOGRAPHY
   ============================================================ */

.ads-page .card {
    width: 100%;
    padding: 20px;
    border: 1px solid #d9dde3;
    border-radius: 10px;
    background: #fff;
}

.ads-page h2,
.ads-page h3 {
    margin: 0;
    padding: 0;
    color: #333;
    font-weight: 700;
    line-height: 1.3;
}

.ads-page h2 {
    font-size: 22px;
}

.ads-page h3 {
    font-size: 19px;
}

.ads-page p {
    margin: 0;
}

.ads-page .subtle,
.ads-page .helper {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}


/* ============================================================
   GENERAL BUTTONS
   ============================================================ */

.ads-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 35px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: #333;
    background: #f4f5f7;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        opacity 0.15s ease,
        transform 0.15s ease;
}

.ads-page .btn:hover {
    background: #e9edf2;
    text-decoration: none;
}

.ads-page .btn:active:not(:disabled) {
    transform: translateY(1px);
}


/* ============================================================
   GREEN COPY BUTTONS
   ============================================================ */

.ads-page .btn-primary,
.ads-page .btn-mini {
    color: #fff !important;
    background: #287a38;
}

.ads-page .btn-primary:hover,
.ads-page .btn-mini:hover {
    color: #fff !important;
    background: #216b30;
}

.ads-page .btn-primary.copied,
.ads-page .btn-mini.copied {
    background: #245f30;
}


/* ============================================================
   SECONDARY BUTTONS
   ============================================================ */

.ads-page .btn-secondary {
    color: #3c4d63;
    border-color: #c8cdd4;
    background: #fff;
}

.ads-page .btn-secondary:hover {
    color: #333;
    border-color: #aeb4bd;
    background: #f5f7f9;
}


/* ============================================================
   TEXT BUTTONS
   ============================================================ */

.ads-page .btn-text {
    border: none;
    color: #596575;
    background: transparent;
}

.ads-page .btn-text:hover {
    color: #333;
    background: transparent;
    text-decoration: underline;
}


/* ============================================================
   CLEAR ALL BUTTON
   ============================================================ */

.ads-page #clearAllBottom {
    color: #fff !important;
    border-color: rgba(0, 0, 0, 0.08);
    background: #c94740;
}

.ads-page #clearAllBottom:hover {
    background: #b43d37;
}


/* ============================================================
   INDIVIDUAL COPY BUTTONS
   ============================================================ */

.ads-page .btn-mini {
    min-height: 41px;
    padding: 8px 13px;
    font-size: 13px;
}


/* ============================================================
   REMOVE FIELD BUTTON
   ============================================================ */

.ads-page .btn-remove {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 12px;
}


/* ============================================================
   ASSET SECTIONS

   Headlines, Descriptions, Display Paths.
   ============================================================ */

.ads-page .asset-section,
.ads-page .preview-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #e1e4e8;
}


/* ============================================================
   FIRST SECTION SPACING

   The Responsive Search Ad Builder heading was removed.

   Headlines now starts directly at the top of the builder,
   without an unnecessary divider or extra top spacing.
   ============================================================ */

.ads-page .builder > .asset-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.ads-page .section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ads-page .section-heading > div {
    width: 100%;
    min-width: 0;
}

.ads-page .section-heading h3 {
    margin-bottom: 5px;
}

.ads-page .optional-tag {
    display: inline-block;
    margin-left: 5px;
    color: #777;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    vertical-align: middle;
}


/* ============================================================
   ASSET FIELD LISTS
   ============================================================ */

.ads-page .asset-list {
    display: grid;
    gap: 12px;
    width: 100%;
}


/* ============================================================
   INDIVIDUAL ASSET FIELD
   ============================================================ */

.ads-page .asset-field {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #d9dde3;
    border-radius: 9px;
    background: #fff;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}


/* ============================================================
   OVER-LIMIT FIELD
   ============================================================ */

.ads-page .asset-field.is-over {
    border-color: #dfaba8;
    background: #fff3f2;
}


/* ============================================================
   DUPLICATE FIELD
   ============================================================ */

.ads-page .asset-field.is-duplicate:not(.is-over) {
    border-color: #eac591;
    background: #fffaf1;
}


/* ============================================================
   NEAR-LIMIT FIELD
   ============================================================ */

.ads-page .asset-field.is-near:not(.is-over):not(.is-duplicate) {
    border-color: #e4c49b;
}


/* ============================================================
   ASSET FIELD LABELS
   ============================================================ */

.ads-page .asset-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ads-page .asset-label {
    color: #444;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}


/* ============================================================
   CHARACTER COUNTERS
   ============================================================ */

.ads-page .asset-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.ads-page .asset-count {
    color: #1a73e8;
    font-size: 14px;
    font-weight: 700;
}

.ads-page .remaining {
    color: #666;
    font-size: 12px;
}

.ads-page .is-over .asset-count,
.ads-page .is-over .remaining {
    color: #b43d37;
}

.ads-page .is-near:not(.is-over) .remaining {
    color: #986018;
}


/* ============================================================
   ASSET INPUT ROWS
   ============================================================ */

.ads-page .asset-input-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.ads-page .asset-input-row input,
.ads-page .asset-input-row textarea {
    flex: 1 1 auto;
    min-width: 0;
}


/* ============================================================
   COMMON INPUT STYLES
   ============================================================ */

.ads-page .asset-input-row input,
.ads-page .asset-input-row textarea,
.ads-page .url-group input,
.ads-page .quick-check textarea {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 2px solid #c9ced6;
    border-radius: 8px;
    background: #fff;
    color: #222;
    outline: none;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: normal;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ads-page .asset-input-row input,
.ads-page .url-group input {
    min-height: 41px;
}

.ads-page .asset-input-row input:hover,
.ads-page .asset-input-row textarea:hover,
.ads-page .url-group input:hover {
    border-color: #aeb4bd;
}

.ads-page .asset-input-row input:focus,
.ads-page .asset-input-row textarea:focus,
.ads-page .url-group input:focus {
    border-color: #5f6368;
    box-shadow: 0 0 0 2px rgba(95, 99, 104, 0.08);
}

.ads-page input::placeholder,
.ads-page textarea::placeholder {
    color: #8a8f98;
    opacity: 1;
}


/* ============================================================
   DESCRIPTION TEXTAREAS

   Start around two lines high.
   Allow resizing down to one line.
   ============================================================ */

.ads-page .asset-input-row textarea {
    height: 65px;
    min-height: 46px;
    max-height: none;
    resize: vertical;
    overflow-y: auto;
}


/* ============================================================
   OVER-LIMIT INPUT BORDERS
   ============================================================ */

.ads-page .asset-field.is-over input,
.ads-page .asset-field.is-over textarea {
    border-color: #d78b87;
}

.ads-page .asset-field.is-over input:focus,
.ads-page .asset-field.is-over textarea:focus {
    border-color: #b43d37;
    box-shadow: 0 0 0 2px rgba(180, 61, 55, 0.08);
}


/* ============================================================
   FIELD VALIDATION MESSAGES
   ============================================================ */

.ads-page .asset-message {
    margin-top: 6px;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

.ads-page .asset-message:empty {
    display: none;
}

.ads-page .is-over .asset-message {
    color: #b43d37;
    font-weight: 700;
}

.ads-page .is-duplicate:not(.is-over) .asset-message {
    color: #93601b;
}

.ads-page .asset-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}


/* ============================================================
   ADD HEADLINE / ADD DESCRIPTION

   Buttons are below their respective fields.
   ============================================================ */

.ads-page .asset-add-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 14px;
}

.ads-page .asset-add-action .btn {
    min-height: 36px;
    padding: 9px 13px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    background: #fff;
    color: #3c4d63;
    font-size: 13px;
    font-weight: 600;
}

.ads-page .asset-add-action .btn:hover {
    border-color: #aeb4bd;
    background: #f5f7f9;
    color: #333;
}


/* ============================================================
   FINAL URL
   ============================================================ */

.ads-page .url-group {
    margin-top: 18px;
}

.ads-page .url-group label {
    display: block;
    margin: 4px 0 7px;
    color: #444;
    font-size: 14px;
    font-weight: 700;
}

.ads-page .url-group .helper {
    margin-top: 6px;
}


/* ============================================================
   SEARCH AD PREVIEW
   ============================================================ */

.ads-page .preview-section {
    margin-top: 25px;
}

.ads-page .preview-title {
    margin-bottom: 13px;
}

.ads-page .search-ad-preview {
    width: 100%;
    min-height: 145px;
    padding: 17px;
    border: 1px solid #d9dde3;
    border-radius: 9px;
    background: #fff;
    overflow-wrap: anywhere;
}

.ads-page .preview-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    color: #444;
    font-size: 13px;
    line-height: 1.5;
}

.ads-page .sponsored {
    color: #333;
    font-weight: 700;
}

.ads-page .preview-address {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

.ads-page .preview-headline {
    margin: 7px 0 6px;
    color: #1a0dab;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
}

.ads-page .preview-description {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
}

.ads-page .preview-disclaimer {
    margin-top: 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   BUILDER ACTION BUTTONS
   ============================================================ */

.ads-page .builder-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}


/* ============================================================
   CLIPBOARD FEEDBACK
   ============================================================ */

.ads-page .clipboard-feedback {
    min-height: 0;
    margin-top: 0;
    color: #287a38;
    font-size: 13px;
    line-height: 1.5;
}

.ads-page .clipboard-feedback:not(:empty) {
    margin-top: 10px;
}

.ads-page .clipboard-feedback.is-error {
    color: #c94740;
}


/* ============================================================
   BUILDER STATUS

   Simple plain text, not a separate box.
   ============================================================ */

.ads-page .overall-status {
    width: 100%;
    margin-top: 14px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #555;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}

.ads-page .overall-status[hidden] {
    display: none !important;
}

.ads-page .overall-status.is-error {
    color: #b43d37;
}

.ads-page .overall-status.is-success {
    color: #287a38;
}


/* ============================================================
   QUICK GOOGLE ADS CHARACTER CHECK
   ============================================================ */

.ads-page .quick-check {
    margin-top: 22px;
}

.ads-page .quick-check h2 {
    margin-bottom: 8px;
}


/* Only style the explanatory paragraph here.
   Do not override the small character count. */

.ads-page .quick-check > p:not(.quick-total) {
    margin-bottom: 14px;
    color: #555;
    font-size: 15px;
    line-height: 1.55;
}

.ads-page .quick-check label {
    display: block;
    margin: 4px 0 7px;
    color: #444;
    font-size: 14px;
    font-weight: 700;
}


/* ============================================================
   QUICK CHECK TEXTAREA WRAPPER

   Copy is inside the bordered area.

   The button occupies a small row above the textarea,
   leaving the full textarea width for text.
   ============================================================ */

.ads-page .quick-textarea-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    border: 2px solid #c9ced6;
    border-radius: 8px;
    background: #fff;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ads-page .quick-textarea-wrapper:hover {
    border-color: #aeb4bd;
}

.ads-page .quick-textarea-wrapper:focus-within {
    border-color: #5f6368;
    box-shadow: 0 0 0 2px rgba(95, 99, 104, 0.08);
}


/* ============================================================
   QUICK CHECK TEXTAREA

   Text wraps near the right edge.
   No excessive right padding.
   Resizable down to one line.
   ============================================================ */

.ads-page .quick-check .quick-textarea-wrapper textarea {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 90px;
    min-height: 46px;
    max-height: none;
    margin: 0;
    padding: 5px 12px 10px;
    border: 0;
    border-radius: 0 0 6px 6px;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: #222;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    overflow-y: auto;
}

.ads-page .quick-check .quick-textarea-wrapper textarea:focus,
.ads-page .quick-check .quick-textarea-wrapper textarea:focus-visible {
    border: 0;
    outline: none;
    box-shadow: none;
}


/* ============================================================
   QUICK CHECK COPY BUTTON

   Slightly transparent green.
   Inside bordered wrapper above textarea.
   ============================================================ */

.ads-page .quick-copy-button {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    order: -1;
    flex: 0 0 auto;

    min-width: 64px;
    height: 30px;
    margin: 7px 7px 0 0;
    padding: 6px 10px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;

    background: rgba(40, 122, 56, 0.92);
    color: #fff !important;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;

    transition:
        background-color 0.15s ease,
        opacity 0.15s ease;
}

.ads-page .quick-copy-button:hover {
    background: rgba(33, 107, 48, 0.98);
}

.ads-page .quick-copy-button:active {
    background: #216b30;
}

.ads-page .quick-copy-button.copied {
    background: #245f30;
}

.ads-page .quick-copy-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ============================================================
   QUICK CHECK CHARACTER COUNT

   Small black text below textarea, aligned right.

   Replaces the old large blue Google Ads character metric.
   ============================================================ */

.ads-page .quick-total {
    width: 100%;
    margin-top: 7px;
    padding: 0;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ads-page .quick-total span {
    color: inherit;
    font: inherit;
}


/* ============================================================
   QUICK CHECK RESULTS
   ============================================================ */

.ads-page .quick-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}


/* ============================================================
   QUICK CHARACTER LIMIT CARDS
   ============================================================ */

.ads-page .quick-limit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.ads-page .quick-limit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 105px;
    padding: 13px 10px;
    border: 1px solid #d9dde3;
    border-radius: 9px;
    background: #fff;
    text-align: center;
}


/* ============================================================
   QUICK LIMIT LABEL
   ============================================================ */

.ads-page .quick-limit .quick-limit-label {
    display: block;
    color: #444;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
}


/* ============================================================
   QUICK LIMIT COUNT
   ============================================================ */

.ads-page .quick-limit strong {
    display: block;
    color: #287a38;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   QUICK LIMIT REMAINING CHARACTERS
   ============================================================ */

.ads-page .quick-limit .quick-limit-status {
    display: block;
    color: #287a38;
    font-size: 12px;
    line-height: 1.4;
}


/* ============================================================
   QUICK LIMIT OVER-LIMIT STATE
   ============================================================ */

.ads-page .quick-limit.is-over {
    border-color: #e6b5b2;
    background: #fff5f4;
}

.ads-page .quick-limit.is-over strong,
.ads-page .quick-limit.is-over .quick-limit-status {
    color: #b43d37;
}


/* ============================================================
   INFORMATIONAL CONTENT
   ============================================================ */

.ads-page .page-guide {
    width: 100%;
    margin-top: 34px;
    color: #333;
    font-size: 17px;
    line-height: 1.7;
}

.ads-page .page-guide h2 {
    margin: 34px 0 12px;
    padding: 0;
    color: #292929;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
}

.ads-page .page-guide h2:first-child {
    margin-top: 0;
}

.ads-page .page-guide h3 {
    margin: 26px 0 9px;
    color: #333;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.ads-page .page-guide p {
    margin: 0 0 17px;
    padding: 0;
    color: #444;
    font-size: 17px;
    line-height: 1.7;
}

.ads-page .page-guide strong {
    color: #333;
}

.ads-page .page-guide a strong {
    color: inherit;
}


/* ============================================================
   HOW TO USE LIST
   ============================================================ */

.ads-page .page-guide ol {
    margin: 8px 0 20px 28px;
    padding: 0;
    color: #444;
    list-style: decimal outside;
}

.ads-page .page-guide ol li {
    margin-bottom: 8px;
    padding-left: 3px;
    color: #444;
    font-size: 17px;
    line-height: 1.65;
    list-style-type: decimal;
}

.ads-page .page-guide ol li::marker {
    font-weight: 700;
}


/* ============================================================
   GOOGLE ADS CHARACTER LIMIT TABLES
   ============================================================ */

.ads-page .table-scroll {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0 17px;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
}

.ads-page table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    table-layout: auto;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
}

.ads-page table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ads-page th,
.ads-page td {
    padding: 11px 12px;
    border-bottom: 1px solid #e2e5e9;
    vertical-align: middle;
    text-align: left;
}

.ads-page th {
    background: #f4f5f7;
    color: #444;
    font-weight: 700;
}

.ads-page tbody td {
    background: #fff;
}

.ads-page tbody tr:last-child td {
    border-bottom: none;
}

.ads-page tbody tr:hover td {
    background: #fafafa;
}


/* ============================================================
   OFFICIAL GOOGLE ADS REFERENCE NOTE
   ============================================================ */

.ads-page .page-guide p.reference-note {
    margin: 12px 0;
    color: #666;
    font-size: 13px;
    line-height: 1.55;
}


/* ============================================================
   FREQUENTLY ASKED QUESTIONS
   ============================================================ */

.ads-page .faq-section {
    margin-top: 38px;
}

.ads-page .faq-section h3 {
    margin: 22px 0 8px;
    color: #333;
    font-size: 18px;
}

.ads-page .faq-section p {
    margin: 0 0 18px;
}


/* ============================================================
   RELATED TOOLS
   ============================================================ */

.ads-page .related-tools {
    width: 100%;
    margin-top: 32px;
    padding: 14px 16px;
    border: 1px solid #d6dde7;
    border-radius: 8px;
    background: #f7faff;
}

.ads-page .related-tools h2 {
    margin: 0 0 7px;
    color: #333;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.ads-page .related-tools p {
    margin: 0;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}

.ads-page .related-tools a {
    color: #1155cc;
}


/* ============================================================
   RAPTIVE / ADTHRIVE SIDEBAR
   ============================================================ */

.ads-page #sidebar {
    width: 300px;
    min-width: 300px;
    min-height: 600px;
    margin: 0;
    padding: 0;
    align-self: stretch;
    border: none;
    background: transparent;
    overflow: visible;
}

.ads-page #sidebar iframe,
.ads-page #sidebar ins,
.ads-page #sidebar img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   RESPONSIVE - MEDIUM DESKTOP
   ============================================================ */

@media only screen and (max-width: 1150px) {

    .ads-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ads-layout {
        gap: 20px;
    }

    .ads-heading h1 {
        font-size: 29px;
    }

    .ads-heading p {
        font-size: 16px;
    }

    .ads-page .card {
        padding: 18px;
    }

    .ads-page .section-heading {
        gap: 10px;
    }

}


/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media only screen and (max-width: 992px) {

    .ads-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 900px;
    }

    .ads-page #sidebar {
        display: none;
    }

    .ads-page {
        padding-top: 100px;
    }

}


/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media only screen and (max-width: 550px) {

    /* Main page */

    .ads-page {
        padding: 92px 10px 25px;
    }

    .ads-heading {
        margin-bottom: 18px;
    }

    .ads-heading h1 {
        font-size: 27px;
    }

    .ads-heading p {
        font-size: 15px;
        line-height: 1.55;
    }


    /* Cards */

    .ads-page .card {
        padding: 15px 11px;
        border-radius: 8px;
    }

    .ads-page h2 {
        font-size: 20px;
    }

    .ads-page h3,
    .ads-page .section-heading h3 {
        font-size: 18px;
    }

    .ads-page .section-heading .helper {
        font-size: 13px;
    }


    /* Asset sections */

    .ads-page .asset-section,
    .ads-page .preview-section {
        margin-top: 19px;
        padding-top: 17px;
    }

    .ads-page .section-heading {
        gap: 9px;
    }

    .ads-page .asset-list {
        gap: 10px;
    }

    .ads-page .asset-field {
        padding: 10px;
    }


    /* Asset labels and counts */

    .ads-page .asset-label {
        font-size: 13px;
    }

    .ads-page .asset-metrics {
        gap: 7px;
        font-size: 12px;
    }

    .ads-page .asset-count {
        font-size: 13px;
    }


    /* Asset input rows */

    .ads-page .asset-input-row {
        gap: 6px;
    }

    .ads-page .asset-input-row input,
    .ads-page .asset-input-row textarea {
        padding: 9px;
        font-size: 14px;
    }


    /* Description textarea */

    .ads-page .asset-input-row textarea {
        height: 65px;
        min-height: 43px;
    }


    /* Individual Copy buttons */

    .ads-page .btn-mini {
        min-height: 40px;
        padding: 7px 10px;
        font-size: 12px;
    }


    /* Add Headline / Description buttons */

    .ads-page .asset-add-action {
        margin-top: 12px;
    }

    .ads-page .asset-add-action .btn {
        min-height: 34px;
        padding: 8px 11px;
        font-size: 12px;
    }


    /* Search Ad Preview */

    .ads-page .search-ad-preview {
        padding: 14px;
    }

    .ads-page .preview-headline {
        font-size: 18px;
    }

    .ads-page .preview-description {
        font-size: 13px;
    }


    /* Builder buttons */

    .ads-page .builder-actions {
        gap: 8px;
    }

    .ads-page .builder-actions .btn {
        font-size: 12px;
    }


    /* Quick Checker description */

    .ads-page .quick-check > p:not(.quick-total) {
        font-size: 14px;
    }


    /* Quick Checker textarea */

    .ads-page .quick-check .quick-textarea-wrapper textarea {
        height: 90px;
        min-height: 43px;
        padding: 5px 10px 10px;
        font-size: 14px;
    }


    /* Quick Checker Copy button */

    .ads-page .quick-copy-button {
        min-width: 60px;
        height: 29px;
        margin: 7px 7px 0 0;
        padding: 5px 9px;
        font-size: 12px;
    }


    /* Quick limit cards */

    .ads-page .quick-limit-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ads-page .quick-limit {
        min-height: 100px;
        padding: 11px 7px;
    }

    .ads-page .quick-limit .quick-limit-label {
        font-size: 13px;
    }

    .ads-page .quick-limit strong {
        font-size: 18px;
    }

    .ads-page .quick-limit .quick-limit-status {
        font-size: 11px;
    }


    /* Information sections */

    .ads-page .page-guide,
    .ads-page .related-tools {
        margin-top: 28px;
    }

    .ads-page .page-guide h2 {
        margin-top: 29px;
        font-size: 22px;
    }

    .ads-page .page-guide h3 {
        font-size: 18px;
    }

    .ads-page .page-guide p,
    .ads-page .related-tools p,
    .ads-page .page-guide ol li {
        font-size: 16px;
        line-height: 1.65;
    }

    .ads-page .page-guide ol {
        margin-left: 23px;
    }


    /* Tables */

    .ads-page table {
        min-width: 420px;
        font-size: 13px;
    }

    .ads-page th,
    .ads-page td {
        padding: 10px;
    }

}


/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */

@media only screen and (max-width: 390px) {

    .ads-page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .ads-page .card {
        padding-left: 9px;
        padding-right: 9px;
    }

    .ads-page .asset-label-row {
        align-items: flex-start;
    }


    /* Stack field inputs and their Copy buttons */

    .ads-page .asset-input-row {
        flex-wrap: wrap;
    }

    .ads-page .asset-input-row input,
    .ads-page .asset-input-row textarea {
        flex: 1 1 100%;
    }

    .ads-page .asset-input-row .btn-mini {
        min-height: 32px;
        margin-left: auto;
    }


    /* Quick Check cards */

    .ads-page .quick-limit {
        min-height: 95px;
    }

    .ads-page .quick-limit strong {
        font-size: 17px;
    }

    .ads-page .quick-limit .quick-limit-label {
        font-size: 12px;
    }


    /* Small character count remains compact */

    .ads-page .quick-total {
        font-size: 12px;
    }

}


/* ============================================================
   END — GOOGLE ADS CHARACTER COUNTER
   ============================================================ */