/**
 * Google Ads Preview Styles
 * Accurate reproduction of Google SERP 2025-2026
 */

/* =============================================================================
   CSS VARIABLES - Google Colors
   ============================================================================= */

:root {
    /* Google SERP Colors */
    --google-link-blue: #1a0dab;
    --google-link-visited: #681da8;
    --google-text-primary: #202124;
    --google-text-secondary: #4d5156;
    --google-text-tertiary: #70757a;
    --google-url-text: #202124;
    --google-url-green: #1a7f37;
    --google-bg: #ffffff;
    --google-border: #dadce0;
    --google-star-yellow: #fbbc04;
    --google-star-gray: #dadce0;
    --google-favicon-bg: #f1f3f4;
}

/* =============================================================================
   AD PREVIEW CONTAINER
   ============================================================================= */

.ad-preview-desktop,
.ad-preview-mobile {
    font-family: arial, sans-serif;
    background: var(--google-bg);
    color: var(--google-text-primary);
    line-height: 1.58;
}

/* Desktop Preview - Green/beige background like Google */
.ad-preview-desktop {
    max-width: 600px;
    padding: 16px;
    background: linear-gradient(to bottom, #f8fff8 0%, #fffef8 100%);
    border: 1px solid var(--google-border);
    border-radius: 8px;
}

/* Section header "Sponsored" */
.ad-section-header {
    font-size: 14px;
    font-weight: 400;
    color: var(--google-text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--google-border);
}

/* Mobile Preview */
.ad-preview-mobile {
    max-width: 360px;
    padding: 0;
}

/* =============================================================================
   AD HEADER (Desktop)
   ============================================================================= */

.ad-preview-desktop .ad-header {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    align-items: flex-start;
}

.ad-preview-desktop .ad-favicon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: var(--google-favicon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--google-text-tertiary);
    text-transform: uppercase;
}

.ad-preview-desktop .ad-header-info {
    flex: 1;
    min-width: 0;
}

.ad-preview-desktop .ad-business-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
}

.ad-preview-desktop .ad-label {
    display: inline;
    font-size: 12px;
    font-weight: 700;
    color: var(--google-text-primary);
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1.4;
}

.ad-preview-desktop .ad-business-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--google-text-primary);
    line-height: 1.4;
}

/* URL row with three-dots menu */
.ad-preview-desktop .ad-url-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ad-preview-desktop .ad-menu-dots {
    color: var(--google-text-tertiary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px;
}

/* =============================================================================
   AD SPONSOR LINE (Mobile)
   ============================================================================= */

.ad-preview-mobile .ad-sponsor-line {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
}

.ad-preview-mobile .ad-label {
    display: inline;
    font-size: 14px;
    font-weight: 700;
    color: var(--google-text-primary);
    border: none;
    padding: 0;
    margin: 0;
}

.ad-preview-mobile .ad-sponsor-dot {
    color: var(--google-text-tertiary);
    margin: 0 4px;
}

.ad-preview-mobile .ad-url {
    display: inline;
    font-size: 14px;
    color: var(--google-text-primary);
}

/* =============================================================================
   AD URL
   ============================================================================= */

.ad-preview-desktop .ad-url {
    font-size: 12px;
    line-height: 18px;
    color: var(--google-url-green);
    word-break: break-all;
}

.ad-url-separator {
    color: var(--google-text-tertiary);
    margin: 0 2px;
}

/* Mobile URL is styled in ad-sponsor-line section above */

/* =============================================================================
   AD HEADLINES
   ============================================================================= */

.ad-headlines {
    font-size: 20px;
    line-height: 26px;
    color: var(--google-link-blue);
    cursor: pointer;
    margin-bottom: 3px;
}

.ad-headlines:hover {
    text-decoration: underline;
}

.ad-headline-separator {
    color: var(--google-link-blue);
    margin: 0 4px;
    font-weight: 400;
}

.ad-preview-mobile .ad-headlines {
    font-size: 18px;
    line-height: 24px;
}

/* Placeholder state */
.ad-headlines.ad-placeholder {
    color: var(--google-text-tertiary);
    font-style: italic;
}

.ad-headlines.ad-placeholder:hover {
    text-decoration: none;
    cursor: default;
}

/* =============================================================================
   AD DESCRIPTIONS
   ============================================================================= */

.ad-descriptions {
    font-size: 14px;
    line-height: 22px;
    color: var(--google-text-secondary);
    margin-bottom: 8px;
}

.ad-preview-mobile .ad-descriptions {
    font-size: 14px;
    line-height: 20px;
}

/* Placeholder state */
.ad-descriptions.ad-placeholder {
    color: var(--google-text-tertiary);
    font-style: italic;
}

/* =============================================================================
   EXTENSIONS CONTAINER
   ============================================================================= */

.ad-extensions {
    margin-top: 8px;
}

/* =============================================================================
   SITELINKS EXTENSION
   ============================================================================= */

.ext-sitelinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
}

.ext-sitelink {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-link-blue);
    text-decoration: none;
}

.ext-sitelink:hover {
    text-decoration: underline;
}

/* Sitelinks with descriptions (desktop) */
.ext-sitelinks-detailed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 12px;
}

.ext-sitelink-card {
    padding: 0;
}

.ext-sitelink-card .title {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-link-blue);
    margin-bottom: 2px;
}

.ext-sitelink-card .title:hover {
    text-decoration: underline;
}

.ext-sitelink-card .desc {
    font-size: 12px;
    line-height: 18px;
    color: var(--google-text-secondary);
}

/* Mobile sitelinks */
.ad-preview-mobile .ext-sitelinks {
    gap: 6px 12px;
}

.ad-preview-mobile .ext-sitelink {
    font-size: 13px;
}

/* Mobile inline sitelinks (Google style) */
.ext-sitelinks-inline {
    display: inline;
    font-size: 14px;
    line-height: 20px;
    margin-top: 4px;
}

.ext-sitelinks-inline .ext-sitelink {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-link-blue);
    text-decoration: none;
}

.ext-sitelinks-inline .ext-sitelink:hover {
    text-decoration: underline;
}

.ext-sitelink-dot {
    color: var(--google-text-tertiary);
    margin: 0 6px;
}

/* =============================================================================
   CALLOUTS EXTENSION
   ============================================================================= */

.ext-callouts {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-tertiary);
    margin-top: 4px;
}

.ext-callout-separator {
    margin: 0 4px;
}

/* =============================================================================
   RATINGS EXTENSION
   ============================================================================= */

.ext-ratings {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-tertiary);
    margin-top: 4px;
}

.ext-ratings-stars {
    color: var(--google-star-yellow);
    letter-spacing: -1px;
}

.ext-ratings-value {
    color: var(--google-text-secondary);
}

.ext-ratings-count {
    color: var(--google-text-tertiary);
}

/* =============================================================================
   CALL EXTENSION
   ============================================================================= */

.ext-call {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-tertiary);
    margin-top: 4px;
}

.ext-call-icon {
    font-size: 14px;
}

/* Mobile call line */
.ext-call-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--google-border);
    font-size: 14px;
    color: var(--google-text-secondary);
}

.ext-call-line .ext-call-icon {
    font-size: 18px;
}

/* Desktop call button */
.ext-call-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--google-link-blue);
    border-radius: 4px;
    color: var(--google-link-blue);
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    margin-top: 12px;
    text-decoration: none;
}

.ext-call-button:hover {
    background: #f0f7ff;
}

/* =============================================================================
   LOCATION EXTENSION
   ============================================================================= */

.ext-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-tertiary);
    margin-top: 4px;
}

.ext-location-icon {
    font-size: 14px;
}

/* =============================================================================
   PRICE EXTENSION
   ============================================================================= */

.ext-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--google-border);
}

.ext-price-item {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.ext-price-header {
    font-size: 13px;
    font-weight: 500;
    color: var(--google-link-blue);
    margin-bottom: 2px;
}

.ext-price-value {
    font-size: 12px;
    color: var(--google-text-secondary);
}

/* =============================================================================
   PROMOTION EXTENSION
   ============================================================================= */

.ext-promotion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-tertiary);
    margin-top: 4px;
}

.ext-promotion-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: #fef7e0;
    border-radius: 3px;
    font-size: 12px;
    color: #202124;
}

.ext-promotion-icon {
    font-size: 12px;
}

/* Promotion line (Google style) */
.ext-promotion-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.ext-promotion-tag {
    color: var(--google-text-primary);
    font-weight: 500;
}

.ext-promotion-text {
    color: var(--google-link-blue);
}

.ext-promotion-expiry {
    color: var(--google-text-tertiary);
}

/* =============================================================================
   STRUCTURED SNIPPETS EXTENSION
   ============================================================================= */

.ext-snippets {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-tertiary);
    margin-top: 4px;
}

.ext-snippets-header {
    font-weight: 500;
    color: var(--google-text-secondary);
}

.ext-snippets-values {
    color: var(--google-text-tertiary);
}

/* =============================================================================
   IMAGE EXTENSION
   ============================================================================= */

.ext-image {
    float: right;
    margin-left: 12px;
    margin-bottom: 8px;
}

.ext-image img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--google-border);
}

/* Image extension - Desktop (larger, right-aligned) */
.ext-image-right {
    float: right;
    margin-left: 16px;
    margin-bottom: 8px;
}

.ext-image-right img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--google-border);
}

/* =============================================================================
   MOBILE PHONE FRAME
   ============================================================================= */

.phone-frame {
    background: #1a1a1a;
    border-radius: 36px;
    padding: 12px;
    max-width: 375px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.phone-screen {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
}

.phone-notch {
    background: #1a1a1a;
    height: 28px;
    border-radius: 0 0 16px 16px;
    margin: 0 auto;
    width: 150px;
    position: relative;
    top: -1px;
}

.google-search-header {
    padding: 12px 16px;
    background: #fff;
}

.google-logo {
    font-family: 'Product Sans', Arial, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-bottom: 12px;
}

.google-logo span:nth-child(1) { color: #4285f4; }
.google-logo span:nth-child(2) { color: #ea4335; }
.google-logo span:nth-child(3) { color: #fbbc05; }
.google-logo span:nth-child(4) { color: #4285f4; }
.google-logo span:nth-child(5) { color: #34a853; }
.google-logo span:nth-child(6) { color: #ea4335; }

.google-search-box {
    display: flex;
    align-items: center;
    background: #f1f3f4;
    border-radius: 24px;
    padding: 10px 16px;
    gap: 12px;
}

.google-search-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.google-search-icon {
    color: #9aa0a6;
    font-size: 18px;
}

.google-tabs {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid #ebebeb;
    font-size: 13px;
    overflow-x: auto;
}

.google-tab {
    color: #5f6368;
    white-space: nowrap;
    padding-bottom: 8px;
}

.google-tab.active {
    color: #1a73e8;
    border-bottom: 3px solid #1a73e8;
    font-weight: 500;
}

.phone-content {
    padding: 12px 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* =============================================================================
   CALLOUTS EXTENSION
   ============================================================================= */

.ext-callouts {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-secondary);
    margin-top: 6px;
}

.ext-callout-separator {
    color: var(--google-text-tertiary);
    margin: 0 4px;
}

/* =============================================================================
   LOCATION EXTENSION
   ============================================================================= */

.ext-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-secondary);
    margin-top: 6px;
}

.ext-location-icon {
    color: var(--google-link-blue);
}

/* =============================================================================
   ADVERTISER RATING
   ============================================================================= */

.ext-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 6px;
}

.ext-rating-value {
    color: var(--google-text-secondary);
    font-weight: 500;
}

.ext-rating-stars {
    color: var(--google-star-yellow);
    letter-spacing: -1px;
}

.ext-rating-stars .star-half {
    position: relative;
    display: inline-block;
    color: var(--google-star-gray);
}

.ext-rating-stars .star-half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: var(--google-star-yellow);
}

.ext-rating-stars .star-empty {
    color: var(--google-star-gray);
}

.ext-rating-text {
    color: var(--google-text-tertiary);
}

/* =============================================================================
   STRUCTURED SNIPPETS
   ============================================================================= */

.ext-snippets {
    font-size: 14px;
    line-height: 20px;
    color: var(--google-text-secondary);
    margin-top: 6px;
}

.ext-snippets-header {
    font-weight: 500;
    color: var(--google-text-primary);
}

/* =============================================================================
   PRICE EXTENSION CARDS
   ============================================================================= */

.ext-price-cards {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.ext-price-card {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid var(--google-border);
}

.ext-price-card-header {
    font-size: 14px;
    color: var(--google-link-blue);
    margin-bottom: 4px;
}

.ext-price-card-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--google-text-primary);
    margin-bottom: 2px;
}

.ext-price-card-desc {
    font-size: 12px;
    color: var(--google-text-tertiary);
}

/* =============================================================================
   APP ASSET EXTENSION
   ============================================================================= */

.ext-app {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid var(--google-border);
    font-size: 14px;
}

.ext-app-icon {
    font-size: 18px;
}

.ext-app-text {
    color: var(--google-link-blue);
    font-weight: 500;
}

.ext-app-store {
    color: var(--google-text-tertiary);
    font-size: 12px;
    margin-left: auto;
}

/* =============================================================================
   MESSAGE ASSET EXTENSION
   ============================================================================= */

.ext-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #e8f5e9;
    border-radius: 8px;
    border: 1px solid #c8e6c9;
    font-size: 14px;
}

.ext-message-icon {
    font-size: 18px;
}

.ext-message-text {
    color: var(--google-text-primary);
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 400px) {
    .ext-sitelinks-detailed {
        grid-template-columns: 1fr;
    }

    .ext-price {
        flex-direction: column;
    }

    .phone-frame {
        border-radius: 24px;
        padding: 8px;
    }
}