/* =========================================================
   Shrang Result Page
   File belongs to:
   Plugin: sharang-music-generator
   Path: assets/css/result-page.css

   Purpose:
   Small, safe, Result-page-only mobile refinement.
   Do not use this file for Recent Clips, My Clips, Account,
   Clip Studio, or global layout.
   ========================================================= */

/* Keep this page slightly higher on mobile without touching other pages. */
.sharang-result-page {
    margin-top: -6px;
}

/* Give the result card a warmer app-like surface without changing layout. */
.sharang-result-page > .sharang-result {
    border-color: rgba(250, 84, 32, 0.20) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(250, 84, 32, 0.075), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.055), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fff8f2 100%) !important;
}

/* Bed Music result should feel calm and separate from normal songs. */
.sharang-result-type-bed-music > .sharang-result {
    border-color: rgba(20, 184, 166, 0.24) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.085), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.045), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f3fff8 100%) !important;
}

/* Make the top accent feel more like the Shrang music/reel brand. */
.sharang-result-type-song > .sharang-result::before {
    background: linear-gradient(90deg, #fa5420 0%, #ff7a45 52%, #7c3aed 100%);
}

.sharang-result-type-bed-music > .sharang-result::before {
    background: linear-gradient(90deg, #14b8a6 0%, #059669 55%, #2563eb 100%);
}

/* Audio player area gets a subtle music-app feeling. */
.sharang-result-player {
    border-color: rgba(37, 99, 235, 0.22) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.055), transparent 34%),
        #ffffff !important;
}

/* Improve action color meaning without changing structure. */
.sharang-result-main-actions .sharang-result-studio-action,
.sharang-action-buttons .sharang-result-studio-action {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

.sharang-result-main-actions .sharang-result-reel-action,
.sharang-action-buttons .sharang-result-reel-action {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

.sharang-result-main-actions .sharang-result-download-action,
.sharang-action-buttons .sharang-result-download-action {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Keep dropdowns readable but less plain. */
.sharang-result-more-actions summary {
    background:
        linear-gradient(180deg, #ffffff 0%, #fff8f2 100%) !important;
}

.sharang-result-share-options summary {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

/* =========================================================
   Mobile-only tightening
   ========================================================= */

@media (max-width: 640px) {
    .sharang-result-page {
        margin-top: -12px;
    }

    .sharang-result-page > .sharang-result {
        padding: 18px !important;
        border-radius: 19px !important;
    }

    .sharang-result-page .sharang-share-eyebrow {
        min-height: 30px;
        margin-bottom: 13px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .sharang-result-media-grid {
        gap: 12px;
    }

    .sharang-result-visual {
        min-height: 210px;
        border-radius: 18px;
    }

    .sharang-result-visual .sharang-recent-visual-overlay {
        padding: 14px;
    }

    .sharang-result-visual .sharang-recent-visual-text {
        padding-bottom: 12px;
    }

    .sharang-result-visual .sharang-recent-visual-text strong {
        font-size: 17px;
        line-height: 1.38;
    }

    .sharang-result-media-body h2 {
        margin-bottom: 8px;
        font-size: 22px;
        line-height: 1.24;
    }

    .sharang-result-media-body .sharang-result-intro {
        margin-bottom: 10px;
        font-size: 13.5px;
        line-height: 1.5;
    }

    .sharang-result-media-body .sharang-result-details {
        gap: 6px;
        margin: 9px 0;
    }

    .sharang-result-media-body .sharang-result-details span {
        padding: 5px 9px;
        font-size: 11.5px;
        font-weight: 800;
    }

    .sharang-result-media-body .sharang-visibility-status {
        margin-bottom: 10px;
        padding: 5px 9px;
        font-size: 11.5px;
        font-weight: 800;
    }

    .sharang-result-media-body .sharang-result-player {
        margin: 10px 0 12px;
    }

    .sharang-result-player {
        padding: 9px;
        border-radius: 15px;
    }

    .sharang-result-main-actions {
        gap: 7px;
    }

    .sharang-result-main-actions .sharang-secondary-link,
    .sharang-result-main-actions .sharang-download-link {
        min-height: 40px;
        padding: 10px 13px;
        border-radius: 11px;
        font-size: 13px;
    }

    .sharang-result-more-actions,
    .sharang-result-share-options {
        margin-top: 10px;
        border-radius: 14px;
    }

    .sharang-result-more-actions summary,
    .sharang-result-share-options summary {
        padding: 11px 13px;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .sharang-result-page > .sharang-result {
        padding: 16px !important;
    }

    .sharang-result-visual {
        min-height: 190px;
    }

    .sharang-result-media-body h2 {
        font-size: 21px;
    }
}