/* ==========================================================================
   UnitTimeConvert - Embed Widget & Zero-FOUC Embed Mode (?embed=true)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zero-FOUC Embed Mode (?embed=true)
   -------------------------------------------------------------------------- */
html.utc-embed-mode {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
}

html.utc-embed-mode body {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* In embed mode: strictly hide header, hero banner, CTA buttons, mobile menu,
   footer, embed button/modal, and any sections other than #converter */
html.utc-embed-mode header,
html.utc-embed-mode footer,
html.utc-embed-mode #mobile-menu,
html.utc-embed-mode .utc-hero-section,
html.utc-embed-mode main > section:not(#converter),
html.utc-embed-mode .utc-embed-trigger,
html.utc-embed-mode #utc-embed-trigger-btn,
html.utc-embed-mode #utc-embed-modal {
    display: none !important;
}

/* Fluid, transparent container reset for seamless iframe display */
html.utc-embed-mode main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: auto !important;
}

html.utc-embed-mode section#converter {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    width: 100% !important;
}

html.utc-embed-mode section#converter > .card-glow {
    margin-bottom: 0 !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05) !important;
    padding: 18px !important;
    background: #ffffff !important;
}

/* In embed mode, tighten the card header spacing */
html.utc-embed-mode .converter-card-header {
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.85rem !important;
}

html.utc-embed-mode .converter-presets {
    gap: 4px !important;
}

html.utc-embed-mode .converter-presets .preset-btn {
    padding: 3px 8px !important;
    font-size: 11px !important;
}

/* Responsive adjustments for iframe widths */
@media (max-width: 640px) {
    html.utc-embed-mode section#converter {
        padding: 6px !important;
    }

    html.utc-embed-mode section#converter > .card-glow {
        padding: 12px !important;
    }

    html.utc-embed-mode #matrix-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html.utc-embed-mode .matrix-card {
        padding: 10px !important;
    }

    html.utc-embed-mode .matrix-val {
        font-size: 1.05rem !important;
    }
}

/* --------------------------------------------------------------------------
   2. Embed Trigger Button (Normal Homepage View)
   -------------------------------------------------------------------------- */
.utc-embed-trigger {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.utc-embed-trigger:hover {
    transform: translateY(-1px);
}

.utc-embed-trigger:active {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. Embed Modal Dialog & Backdrop
   -------------------------------------------------------------------------- */
#utc-embed-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#utc-embed-modal.utc-modal-open {
    display: flex !important;
    opacity: 1 !important;
}

.utc-modal-card {
    position: relative;
    width: 100%;
    max-width: 42rem;
    background-color: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#utc-embed-modal.utc-modal-open .utc-modal-card {
    transform: scale(1) translateY(0);
}

/* Size Preset Buttons */
.utc-size-btn {
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    color: #475569;
    transition: all 0.15s ease-in-out;
}

.utc-size-btn:hover {
    border-color: #cbd5e1;
    background-color: #ffffff;
    color: #0f172a;
}

.utc-size-btn.active {
    border-color: #2563eb !important;
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 1px 3px 0 rgba(37, 99, 235, 0.15) !important;
}

/* Copy Button Feedback */
#utc-copy-btn.utc-copied {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}