/*!
Theme Name: ssstik
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>ssstik</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ssstik
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ssstik is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: #1a73e8;
}

a:hover {
    text-decoration: underline;
}

/* ===== Header Styles ===== */
header {
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a,
.mobile-logo a,
.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 20px;
    font-weight: 800;
    color: #5940f1;
    text-decoration: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand-icon {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex: 0 0 32px;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.nav-links a:hover {
    color: #4158D0;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: #444;
    font-weight: 500;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-dropdown .dropbtn {
    color: #444;
}

.language-dropdown .dropbtn i.fas.fa-globe {
    color: #2cc7ff;
    margin-right: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
}

.dropdown-content a {
    color: #444;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-weight: normal;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f9f9f9;
}

.dropdown-content a.active {
    background-color: #2cc7ff;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: #4158D0;
}

/* ===== Hero Section ===== */
.hero {
    background: linear-gradient(90deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    color: white;
    padding: 70px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    animation: pulse 8s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.hero h1 {
    font-size: 38px;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.hero p {
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto 30px;
    opacity: 0.9;
    position: relative;
}

/* ===== Download Form ===== */
.download-form {
    background-color: white;
    border-radius: 12px;
    padding: 25px;
    margin-top: -30px;
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.download-form:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}


.url-input-container {
    margin-bottom: 20px;
}

/* Same CLS fix as style.css. */
#video-result-container.reserving-space {
    min-height: 220px;
}

.input-wrapper {
    position: relative;
    display: flex;
}

.url-input-container input {
    flex: 1;
    width: 100%;
    padding: 15px 90px 15px 20px; /* Padding right for buttons */
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
    transition: all 0.3s ease;
}

.url-input-container input:focus {
    border-color: #4158D0;
    box-shadow: 0 0 0 3px rgba(65, 88, 208, 0.2);
    outline: none;
}

.url-input-container .action-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    color: #666;
    transition: color 0.2s ease;
}

.url-input-container .action-btn:hover {
    color: #4158D0;
}

.url-input-container .clear-btn {
    right: 45px;
}

.url-input-container .paste-btn {
    right: 5px;
    color: #4158D0;
}

.download-btn {
    background: linear-gradient(90deg, #4158D0 0%, #C850C0 100%);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 10px rgba(65, 88, 208, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.download-btn:hover {
    background: linear-gradient(90deg, #3a4ec1 0%, #b546af 100%);
    box-shadow: 0 6px 15px rgba(65, 88, 208, 0.4);
    transform: translateY(-2px);
}

.related-tools {
    padding: 0 0 30px;
}

.related-tools-inner {
    max-width: 860px;
    margin: 0 auto;
}

.related-tools h2 {
    font-size: 20px;
    color: #26324d;
    margin-bottom: 14px;
    text-align: center;
}

.related-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.related-tool-link {
    display: flex;
    flex-direction: column;
    min-height: 86px;
    padding: 14px;
    border: 1px solid #e6e9f4;
    border-radius: 8px;
    background: #fff;
    color: #26324d;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(38, 50, 77, 0.06);
}

.related-tool-link:hover {
    text-decoration: none;
    border-color: #5940f1;
    color: #5940f1;
}

.related-tool-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.related-tool-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #667089;
}

.seo-answer-block {
    padding: 22px 0 4px;
    background: #fff;
}

.seo-answer-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 22px;
    border: 1px solid #dfe7f0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.seo-answer-copy h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 22px;
    line-height: 1.25;
}

.seo-answer-copy p {
    margin: 0;
    color: #334155;
    font-size: 15px;
    line-height: 1.68;
}

.seo-answer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e6edf5;
}

.seo-answer-grid h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.3;
}

.seo-answer-grid ul {
    margin: 0;
    padding-right: 18px;
    color: #475569;
    font-size: 14px;
    line-height: 1.58;
}

.seo-answer-grid p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.58;
}

/* ===== Info Section ===== */
.info-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.info-section::before {
    content: "";
    position: absolute;
    right: -150px;
    top: -150px;
    width: 400px;
    height: 400px;
    background: rgba(65, 88, 208, 0.05);
    border-radius: 50%;
    z-index: -1;
}

.info-section::after {
    content: "";
    position: absolute;
    left: -150px;
    bottom: -150px;
    width: 450px;
    height: 450px;
    background: rgba(200, 80, 192, 0.05);
    border-radius: 50%;
    z-index: -1;
}

.info-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #4158D0;
    text-align: center;
    font-weight: 700;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.info-section h2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #4158D0 0%, #C850C0 100%);
}

.info-section h3 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #4158D0;
    text-align: center;
    font-weight: 700;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.info-section h3::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #4158D0 0%, #C850C0 100%);
}

.info-section p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: #555;
}

.info-container {
    background-color: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

.info-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.app-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0;
}

.app-text {
    flex: 1;
}

.app-image {
    flex: 1;
    text-align: center;
}

.app-image img {
    max-width: 100%;
    height: auto;
}

/* ===== How To Section ===== */
.how-to-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.steps {
    margin-top: 30px;
}

.step {
    display: flex;
    margin-bottom: 20px;
}

.step-number {
    background-color: #1a73e8;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h4 {
    margin-bottom: 10px;
}

/* ===== FAQ Section ===== */
.faq-section {
    padding: 60px 0;
}

.faq-container {
    margin-top: 30px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    background-color: white;
    padding: 15px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question h4 {
    margin: 0;
}

.faq-question i {
    transition: transform 0.3s;
}

.faq-answer {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 0 0 4px 4px;
    margin-top: 2px;
    display: none;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    display: block;
}

/* ===== Video Result Section ===== */
.video-result {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    margin-top: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-result::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,204,112,0.1) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
}

.video-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.video-info {
    display: flex;
    flex: 1;
    min-width: 300px;
    max-width: 60%;
    padding-right: 20px;
    margin-bottom: 20px;
}

.video-thumbnail {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-details {
    flex: 1;
}

.video-title {
    font-size: 14px;
    margin-bottom: 10px;
    max-height: 50px;
    overflow: hidden;
    padding: 5px;
}

.video-author {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-options {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-option {
    text-align: center;
    margin-bottom: 0;
}

.download-option h4 {
    display: none; /* Hide the download option title */
}

.download-option-btn {
    background-color: #2962ff;
    color: white;
    border: none;
    padding: 14px 0;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-option-btn.mp3 {
    background-color: #28a745;
}

.download-option-btn i {
    margin-right: 8px;
}

.download-option-btn:hover {
    background-color: #1557b0;
    text-decoration: none;
}

/* ===== Photo Post Styles ===== */
.post-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    z-index: 2;
}

.photo-badge {
    background: linear-gradient(135deg, #C850C0, #4158D0);
}

.video-thumbnail {
    position: relative;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    width: 100%;
    margin-bottom: 15px;
}

.photo-gallery-item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    background: #fafafa;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.photo-gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.photo-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.photo-download-btn {
    padding: 10px 0 !important;
    font-size: 13px !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #4158D0, #C850C0) !important;
}

.photo-download-btn:hover {
    background: linear-gradient(135deg, #3a4ec1, #b546af) !important;
}

@media (max-width: 768px) {
    .photo-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .photo-gallery-item img {
        height: 150px;
    }
}

@media (max-width: 400px) {
    .photo-gallery {
        grid-template-columns: 1fr;
    }
}

/* ===== Social Share ===== */
.social-share {
    margin-top: 30px;
    text-align: center;
}

.social-share h4 {
    margin-bottom: 15px;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.share-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
}

.share-button.facebook {
    background-color: #3b5998;
}

.share-button.twitter {
    background-color: #1da1f2;
}

.share-button.reddit {
    background-color: #ff4500;
}

.share-button.whatsapp {
    background-color: #25d366;
}

.share-button.telegram {
    background-color: #0088cc;
}

/* ===== Footer ===== */
footer {
    background-color: #333;
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer-logo {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
}

.footer-logo h3 {
    margin-bottom: 15px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-col h4 {
    margin-bottom: 15px;
    color: #1a73e8;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #ccc;
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid #555;
    text-align: center;
    font-size: 14px;
    color: #ccc;
}

.footer-bottom p {
    margin-bottom: 10px;
}

/* ===== Alert Messages ===== */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ===== Loading Spinner ===== */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== Responsive Styles ===== */
@media (max-width: 768px) {
    .app-promo {
        flex-direction: column;
    }
    
    .app-text {
        margin-bottom: 20px;
    }
    
    .video-info {
        max-width: 100%;
        padding-right: 0;
    }
    
    .video-result {
        flex-direction: column;
    }
    
    .video-thumbnail {
        width: 45%;
        height: auto;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .download-form {
        padding: 20px;
    }
    
    /* Preserve the input layout on mobile */
    .url-input-container input {
        padding-right: 90px;
    }

    /* Same fix as style.css: placeholder clips at 16px on a 375px viewport;
       under RTL it clips from the leading edge instead of trailing. */
    .url-input-container input::placeholder {
        font-size: 12px;
    }

    .download-options {
        min-width: 100%;
    }
    .related-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seo-answer-inner {
        padding: 18px;
    }

    .seo-answer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    font-size: 22px;
    color: #444;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 999;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.mobile-logo a {
    color: #5940f1;
}

.mobile-close {
    font-size: 22px;
    color: #444;
    cursor: pointer;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu-links a {
    color: #444;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.mobile-language-selector {
    margin-top: 20px;
}

.mobile-language-title {
    font-size: 16px;
    color: #444;
    margin-bottom: 15px;
    font-weight: bold;
}

.mobile-language-title i {
    color: #2cc7ff;
    margin-right: 5px;
}

.mobile-language-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-language-options a {
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-align: left;
}

.mobile-language-options a.active {
    background-color: #2cc7ff;
    color: white;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-links {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 28px;
    }
    
    .hero p {
        font-size: 16px;
    }
    
    .footer-content {
        flex-direction: column;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 20px;
    }
    .related-tool-link {
        min-height: 78px;
        padding: 12px;
    }
}

/* Download progress overlay — mirrors style.css. The ring is symmetric so only
   the text direction needs handling here. */
.ss-dl-lock{overflow:hidden}
.ss-dl-overlay{position:fixed;z-index:2000;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(9,18,45,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ss-dl-overlay.is-open{display:flex;animation:ss-dl-fade .18s ease}
@keyframes ss-dl-fade{from{opacity:0}to{opacity:1}}
.ss-dl-card{display:flex;width:min(88vw,300px);flex-direction:column;align-items:center;padding:26px 20px 20px;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(11,25,60,.32);text-align:center}
/* The ring used to be 120px inside a 300px card — 40% of the width holding one
   short number, which read as a big empty circle. At 67px it sits under the
   text instead of dominating it. The viewBox stays 120 so the stroke and the
   dash maths scale with it and nothing else has to change. */
.ss-dl-ringwrap{position:relative;width:67px;height:67px}
.ss-dl-ring{width:67px;height:67px;transform:rotate(-90deg)}
.ss-dl-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ss-dl-ring-track{stroke:#e6edf7}
.ss-dl-ring-bar{stroke:#126bff;transition:stroke-dashoffset .25s ease}
/* No Content-Length: sweep slowly instead of faking a percentage. */
.ss-dl-overlay.is-indeterminate .ss-dl-ring{animation:ss-dl-spin 2.4s linear infinite}
.ss-dl-overlay.is-indeterminate .ss-dl-ring-bar{transition:none}
@keyframes ss-dl-spin{to{transform:rotate(270deg)}}
.ss-dl-ringtext{position:absolute;inset:0;display:grid;place-items:center;color:#12224a;font-size:.89rem;font-weight:800;font-variant-numeric:tabular-nums}
.ss-dl-check{position:absolute;inset:0;width:67px;height:67px;padding:19px;opacity:0;fill:none;stroke:#0aa06a;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;transform:scale(.7)}
.ss-dl-check path{stroke-dasharray:48;stroke-dashoffset:48}
.ss-dl-overlay.is-done .ss-dl-ring-bar{stroke:#0aa06a}
.ss-dl-overlay.is-done .ss-dl-ringtext{opacity:0}
.ss-dl-overlay.is-done .ss-dl-check{opacity:1;transform:scale(1);transition:opacity .2s ease,transform .3s cubic-bezier(.2,1.3,.4,1)}
.ss-dl-overlay.is-done .ss-dl-check path{animation:ss-dl-tick .4s .1s ease forwards}
@keyframes ss-dl-tick{to{stroke-dashoffset:0}}
.ss-dl-label{margin:16px 0 0;color:#25324f;font-size:.98rem;font-weight:650;line-height:1.35}
/* Bytes moved out of the ring and onto their own line: "3.4 MB" and "46%" are
   very different widths, so alternating them inside the ring made the text jump
   and, on the bigger sizes, crowd the stroke. */
.ss-dl-meta{margin:5px 0 0;min-height:1.2em;color:#5a6b88;font-size:.8rem;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums}
/* One column, one width, one radius. The buttons used to hug their own text, so
   the two of them never lined up with each other or with the card. */
.ss-dl-actions{display:flex;width:100%;flex-direction:column;gap:8px;margin-top:20px}
.ss-dl-cancel{width:100%;height:42px;padding:0 16px;border:1px solid #d3dded;border-radius:14px;background:#fff;color:#5a6b88;font:inherit;font-size:.9rem;font-weight:650;cursor:pointer}
.ss-dl-cancel:hover,.ss-dl-cancel:focus-visible{border-color:#a9c2e4;color:#25324f}
.ss-dl-overlay.is-done .ss-dl-cancel{visibility:hidden}
@media (prefers-reduced-motion:reduce){
    .ss-dl-overlay.is-open{animation:none}
    .ss-dl-overlay.is-indeterminate .ss-dl-ring{animation-duration:6s}
    .ss-dl-ring-bar{transition:none}
    .ss-dl-overlay.is-done .ss-dl-check{transition:none}
    .ss-dl-overlay.is-done .ss-dl-check path{animation:none;stroke-dashoffset:0}
}

/* Save button: only shown on the iOS path, where the share sheet has to be opened
   by a real tap rather than automatically after the fetch.

   On that path the button's slot is reserved from the moment the overlay opens
   (display:block + visibility:hidden), so the card is exactly as tall while
   downloading as it is when the button appears and it never resizes under the
   user's thumb. Everywhere else the button can never appear, so the slot is
   removed outright rather than left as dead space. */
.ss-dl-save{display:none;width:100%;height:46px;padding:0 16px;border:0;border-radius:14px;background:#126bff;color:#fff;font:inherit;font-size:.97rem;font-weight:700;letter-spacing:-.01em;cursor:pointer}
.ss-dl-overlay.is-ios .ss-dl-save{display:block;visibility:hidden}
.ss-dl-save:hover,.ss-dl-save:focus-visible{background:#0d59db}
.ss-dl-save:disabled{opacity:.6;cursor:default}
.ss-dl-overlay.is-await-save .ss-dl-save{display:block;visibility:visible;animation:ss-dl-rise .28s cubic-bezier(.2,1.2,.4,1) both}
@keyframes ss-dl-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ss-dl-overlay.is-await-save .ss-dl-cancel{visibility:visible}
/* visibility, not display: hiding Cancel must not change the card's height. */
.ss-dl-overlay.is-nocancel .ss-dl-cancel{visibility:hidden}
@media (prefers-reduced-motion:reduce){.ss-dl-overlay.is-await-save .ss-dl-save{animation:none}}