/* ============================================================================
   seo-metatag-generator.css - SEO Metatag Generator tool styles
   ============================================================================
   Loaded by:  webdev-tools/seo-metatag-generator.php
   Purpose:    Scoped styles for the SEO Metatag Generator: the form grid
               (text fields, selects), the Google/serp, Facebook and
               X (Twitter) preview cards, and the generated-code output box
               (roomy monospace panel with corner format caption).
               Classes are all prefixed .smg- so nothing leaks into other tools.
   Load order: Loaded AFTER tool-input.css (the shared tool-page base) and
               NEVER overrides its base textarea/button rules; page-specific
               bits live in `.smg-*` classes only.
   ============================================================================ */

/* ---------------- Form grid ---------------- */

.smg-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    text-align: left;
    margin: 12px 0 4px;
}

.smg-field {
    min-width: 0;
}

.smg-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #237a3a;
    margin-bottom: 4px;
}

.smg-label .smg-label-hint {
    font-weight: 400;
    color: #667085;
    font-size: 12.5px;
}

.smg-field .form-control,
.smg-field select.form-select,
.smg-field textarea.form-control {
    background-color: #fff;
    border: 1px solid #cdd5df;
    border-radius: 8px;
}

.smg-field-sm {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Small live counters (title/desc lengths) under their fields */
.smg-count {
    font-size: 12.5px;
    font-weight: 700;
    color: #198754;
}

/* The two previews side by side; stack on small screens */

/* ---------------- Previews section ---------------- */

.smg-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 18px 0 6px;
    padding-top: 16px;
    border-top: 1px solid #e3e8ef;
    text-align: left;
}

/* Left column stacks the short SERP card and the X card below it,
   balancing the column against the tall Facebook card on the right. */
.smg-previews-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.smg-preview-box {
    padding: 0;
}

/* Small-caps label above each preview card */
.smg-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: #9aa4b2;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}

.smg-preview-title i {
    margin-right: 6px;
    color: #9aa4b2;
}

/* ---------------- Google result preview ---------------- */

.smg-serp-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 24px;
}

.smg-serp-title {
    color: #1a0dab;
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.smg-serp-title:hover {
    text-decoration: underline;
}

.smg-serp-url {
    color: #006621;
    font-size: 13px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smg-serp-desc {
    color: #4d5156;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------- Social share card preview ---------------- */

.smg-fb-card {
    background: #f0f2f5;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    overflow: hidden;
}

.smg-fb-image-area {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e7e9ee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.smg-fb-image-area i {
    font-size: 2.5rem;
    color: #98a2b3;
}

.smg-fb-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border: 0;
}

.smg-fb-info {
    background: #fff;
    border-top: 1px solid #e1e3e8;
    padding: 12px;
}

.smg-fb-site {
    font-size: 12px;
    color: #657786;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smg-fb-title {
    color: #1f2d3d;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smg-fb-desc {
    color: #657786;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------- X (Twitter) card preview ---------------- */

.smg-x-card {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 16px;
    overflow: hidden;
}

.smg-x-id {
    font-size: 12px;
    color: #657786;
    margin-bottom: 2px;
}

.smg-x-id b {
    color: #1f2d3d;
    font-weight: 700;
}

/* Compact variant for twitter:card = summary: square thumbnail on the
   left, text block on the right, as X renders small summary cards. */
.smg-x-compact {
    display: flex;
    align-items: stretch;
}

.smg-x-compact .smg-fb-image-area {
    width: 132px;
    flex: 0 0 132px;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    border-right: 1px solid #e1e8ed;
}

.smg-x-compact .smg-fb-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 0;
}

.smg-x-compact .smg-fb-info {
    border-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
}

@media (max-width: 420px) {
    .smg-x-compact {
        flex-direction: column;
    }

    .smg-x-compact .smg-fb-image-area {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #e1e8ed;
    }
}

/* ---------------- Output ---------------- */

/* Generated code box: roomy monospace panel like the classic generator
   outputs — larger padding, rounded block, thin scrollbar, and a small
   corner caption marking the snippet format. */
.smg-output-box {
    position: relative;
}

.smg-output-box textarea {
    background: #f9fafb;
    border: 2px solid #eef1f5;
    border-radius: 24px;
    padding: 30px 32px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre;
    resize: vertical;
    transition: border-color .2s ease;
}

.smg-output-box textarea:focus {
    border-color: #dfe4ea;
    outline: none;
    box-shadow: none;
}

.smg-output-box textarea::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.smg-output-box textarea::-webkit-scrollbar-track {
    background: transparent;
}

.smg-output-box textarea::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.smg-output-tag {
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-size: 10px;
    font-weight: 700;
    color: #b8c1cc;
    text-transform: uppercase;
    letter-spacing: .14em;
    pointer-events: none;
}

/* ---------------- Responsive ---------------- */

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

    .smg-previews {
        grid-template-columns: 1fr;
    }
}