/**
 * ICD Widgets - Core Styles
 * All styles needed for ICD widgets to render correctly.
 * =================================================
 */

/* ================================================
   GLOBAL: Remove blue focus ring on all buttons
   Fixes: hover blue outline/ring on all ICD widget buttons
   ================================================ */
.modalx .elementor-button:focus,
.modalx .elementor-button:focus-visible,
.modalx .elementor-button:active,
.modalx .elementor-button:hover,
.icd-wellcome-wrap .elementor-button:focus,
.icd-wellcome-wrap .elementor-button:focus-visible,
.icd-wellcome-wrap .elementor-button:active,
.icd-wellcome-wrap .elementor-button:hover {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    /* Remove mobile browser tap highlight (iOS Safari / Android Chrome) */
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Keep Comment Kit submit button visually stable on hover/focus/active. */
.elementor-widget-akd_comment_kit .akd-btn-send:hover,
.elementor-widget-akd_comment_kit .akd-btn-send:focus,
.elementor-widget-akd_comment_kit .akd-btn-send:focus-visible,
.elementor-widget-akd_comment_kit .akd-btn-send:active {
    background-color: var(--akd-btn-bg, inherit) !important;
    color: var(--akd-btn-color, inherit) !important;
    box-shadow: var(--akd-btn-shadow, none) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* --- Modalx: Fullscreen Cover Layer --- */
.modalx {
    position: fixed;
    z-index: 2000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(0);
}

/* --- Overlay: Dark Background --- */
.overlayy {
    background-color: #000;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2001;
    top: 0;
    opacity: 0.7;
    left: 0;
}

/* Override overlayy for wellcome (position:fixed parent) */
.icd-wellcome-wrap > .overlayy {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- Content: Content Container --- */
.content-modalx {
    background-color: transparent;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2002;
    top: 10px;
    color: #fff;
    left: 0;
}

/* --- Info Modalx: Center Align Content --- */
.info_modalx {
    width: 100%;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

.info_modalx > div {
    width: auto;
    text-align: center;
    height: auto;
}

/* --- Remove Modals: Slide-out Animation --- */
.removeModals {
    transform: translateY(200%);
    transition: 0.4s ease-in-out;
}

/* --- Text Styles (mirrored from wdp.css) --- */
.icd-text { color: #fff; font-size: 18px; text-align: center; }
.icd-dear { color: #fff; font-size: 18px; text-align: center; }
.icd-name { font-weight: 600; color: #fff; font-size: 25px; }
.icd-mempelai { color: #fff; font-size: 14px; }
.icd-txt-the-wedding { color: #fff; font-size: 14px; }
.icd-tgl { color: #fff; font-size: 18px; }
.icd-keterangan { color: #fff; font-size: 12px; }
.icd-button-wrapper { text-align: center; }

/* --- QR Button (inline style in render) --- */
.elementor-button-qr {
    display: inline-block;
    line-height: 1;
    background-color: #818a91;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

/* --- ICD Invitation Styles (icd-* prefix variants) --- */
.icd-txt-the-wedding { color: #fff; font-size: 14px; }
.icd-mempelai { color: #fff; font-size: 14px; }
.icd-tgl { color: #fff; font-size: 18px; }
.icd-dear { color: #fff; font-size: 18px; text-align: center; }
.icd-name { font-weight: 600; color: #fff; font-size: 25px; }
.icd-text { color: #fff; font-size: 18px; text-align: center; }
.icd-keterangan { color: #fff; font-size: 12px; }
.icd-button-wrapper { text-align: center; }
.icd-button-qr {
    display: inline-block;
    line-height: 1;
    background-color: #818a91;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

/* ================================================
   ELEMENTOR EDITOR ISOLATION
   When dragging cover into editor, modalx overlays
   must NOT be fixed-positioned — convert to normal
   flow so editor remains responsive.

   NOTE: Elementor renders preview inside an iframe.
   The root of that iframe is body.elementor-editor-active.
   We use position:fixed (same as frontend) so modalx
   escapes the widget container and fills the iframe viewport.
   WDP does the same — no editor-specific override.
   ================================================ */
body.elementor-editor-active .modalx,
body.elementor-editor-preview .modalx {
    position: fixed !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    background-image: none !important;
    background-color: #111 !important;
    transform: none !important;
    overflow: hidden !important;
}

body.elementor-editor-active .modalx .overlayy,
body.elementor-editor-preview .modalx .overlayy {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background-color: #000 !important;
}

body.elementor-editor-active .modalx .content-modalx,
body.elementor-editor-preview .modalx .content-modalx {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10000 !important;
    color: #fff !important;
}

body.elementor-editor-active .modalx .info_modalx,
body.elementor-editor-preview .modalx .info_modalx {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10001 !important;
}

/* ================================================
   WELLCOME WIDGET EDITOR ISOLATION
   Same fullscreen treatment as cover widget.
   When dragged into Elementor editor, wellcome-wrap
   becomes fixed and fills the entire iframe viewport.
   ================================================ */
body.elementor-editor-active .icd-wellcome-wrap,
body.elementor-editor-preview .icd-wellcome-wrap {
    position: fixed !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    background-color: #111 !important;
    overflow: hidden !important;
}

body.elementor-editor-active .icd-wellcome-content,
body.elementor-editor-preview .icd-wellcome-content {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10000 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 20px !important;
}

/* ================================================
   COVER BUTTON ICON SIZE
   Match exact icon size from WDP fullscreen.
   Icon should be inline with text, not oversized.
   ================================================ */
.modalx .elementor-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    line-height: 1;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Remove default browser/Elementor blue focus ring on hover/focus */
    outline: none !important;
    box-shadow: none !important;
}

.modalx .elementor-button:focus,
.modalx .elementor-button:focus-visible,
.modalx .elementor-button:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

.modalx .elementor-button-icon,
.modalx .elementor-button-icon i,
.modalx .elementor-button-icon svg {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 1;
    vertical-align: middle;
}

/* QR Button icon size in cover modalx */
.modalx .elementor-button-qr {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1;
    border: none;
    border-radius: 0;
    /* Remove default browser/Elementor blue focus ring on hover/focus */
    outline: none !important;
    box-shadow: none !important;
}

.modalx .elementor-button-qr:focus,
.modalx .elementor-button-qr:focus-visible,
.modalx .elementor-button-qr:active {
    background-color: #818a91 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

.modalx .elementor-button-qr .elementor-button-icon,
.modalx .elementor-button-qr .elementor-button-icon i,
.modalx .elementor-button-qr .elementor-button-icon svg {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1;
    vertical-align: middle;
}

/* ================================================
   ICD WELLCOME WIDGET — FULLSCREEN COVER (FRONTEND)
   Mirrors the cover widget: position fixed full viewport.
   Frontend = fixed to fill screen (same as editor preview).
   ================================================ */
.icd-wellcome-wrap {
    position: fixed !important;
    z-index: 2000 !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    background-color: #111 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}

.icd-wellcome-content {
    position: absolute !important;
    z-index: 2001 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: #fff !important;
}

.icd-wellcome-content .elementor-image img,
.icd-wellcome-content .img {
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 15px !important;
}

.icd-wellcome-content .elementor-image {
    width: 100% !important;
    text-align: center !important;
}

.icd-wellcome-content .icd-txt-the-wedding {
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-bottom: 5px;
}

.icd-wellcome-content .icd-mempelai {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
}

.icd-wellcome-content .icd-tgl {
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
}

.icd-wellcome-content .icd-dear {
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-bottom: 5px;
}

.icd-wellcome-content .icd-name {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.icd-wellcome-content .icd-text {
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.icd-wellcome-content .icd-keterangan {
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}

.icd-wellcome-content .icd-button-wrapper {
    text-align: center;
    margin-top: 15px;
}

.icd-wellcome-content .icd-button-qr {
    text-align: center;
    margin-top: 10px;
}

.icd-wellcome-content .elementor-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0;
    color: #fff;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Remove default browser/Elementor blue focus ring on hover/focus */
    outline: none !important;
    box-shadow: none !important;
}

.icd-wellcome-content .elementor-button:hover {
    background-color: rgba(255,255,255,0.15);
    outline: none !important;
    box-shadow: none !important;
}

.icd-wellcome-content .elementor-button:focus,
.icd-wellcome-content .elementor-button:focus-visible,
.icd-wellcome-content .elementor-button:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

.icd-wellcome-content .elementor-button-icon,
.icd-wellcome-content .elementor-button-icon i,
.icd-wellcome-content .elementor-button-icon svg {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 1;
    vertical-align: middle;
}

.icd-wellcome-content .elementor-button-qr {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1;
    border: none;
    color: #fff;
    background-color: #818a91;
    cursor: pointer;
    /* Remove default browser/Elementor blue focus ring on hover/focus */
    outline: none !important;
    box-shadow: none !important;
}

.icd-wellcome-content .elementor-button-qr:focus,
.icd-wellcome-content .elementor-button-qr:focus-visible,
.icd-wellcome-content .elementor-button-qr:active {
    background-color: #818a91 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
}

.icd-wellcome-content .elementor-button-qr .elementor-button-icon i,
.icd-wellcome-content .elementor-button-qr .elementor-button-icon svg {
    font-size: 14px !important;
}

/* ================================================
   ICD COPY WIDGET — BUTTON ICON
   Icon sizing/spacing for the standalone copy button
   (the .modalx rules only cover cover-widget buttons).

   Elementor 3.x Icons_Manager::render_icon() outputs inline SVG
   (not <i class="fa-...">) so we need explicit SVG sizing.
   Without this, icons appear at 0×0 or full container size.
   ================================================ */
.elementor-button-wrapper .elementor-button-icon,
.elementor-button-wrapper .elementor-button-icon i,
.elementor-button-wrapper .elementor-button-icon svg {
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 1;
    vertical-align: middle;
}

/* ================================================
   ICD COUNTDOWN WIDGET STYLES
   100% mirrors WDP wdp.css countdown section.
   Uses display:table (WDP's original layout) so
   it works reliably in both frontend and editor.

   IMPORTANT: Selectors match Elementor generated styles exactly.
   Structural layout uses !important. Visual properties use NO !important.
   Elementor generates {WRAPPER}.wpkoi-elements-countdown-item > div as (0,2,1).
   External stylesheet comes BEFORE Elementor dynamic injection in the <head>,
   so Elementor always wins (correct behavior). !important ONLY on structural
   layout (display, table-layout) to prevent editor/other plugins override.
   ================================================ */
.wpkoi-elements-countdown-wrapper {
    width: 100%;
}

/* Structural layout — !important keeps table layout intact in all contexts */
ul.wpkoi-elements-countdown-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
}

/* Structural layout — !important keeps table-cell intact */
ul.wpkoi-elements-countdown-items > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: table-cell !important;
    position: relative !important;
}

/* Visual — NO !important. Selector matches Elementor: .wpkoi-elements-countdown-item > div (0,2,1) */
.wpkoi-elements-countdown-item > div {
    text-align: center;
    padding: 20px;
}

/* Visual label view — NO !important */
.wpkoi-elements-countdown-label-block .wpkoi-elements-countdown-digits,
.wpkoi-elements-countdown-label-block .wpkoi-elements-countdown-label {
    display: block;
    text-align: center;
}

.wpkoi-elements-countdown-label-inline .wpkoi-elements-countdown-digits,
.wpkoi-elements-countdown-label-inline .wpkoi-elements-countdown-label {
    display: inline;
    text-align: center;
}

/* Visual digits — NO !important so font-size/color controls work */
.wpkoi-elements-countdown-digits {
    font-size: 50px;
    line-height: 1;
}

/* Visual label — NO !important so color/font controls work */
.wpkoi-elements-countdown-label {
    font-size: 18px;
    line-height: 1;
    color: #fff;
}

/* Separator — position structural, content visual */
.wpkoi-elements-countdown-show-separator .wpkoi-elements-countdown-digits::after {
    content: ":";
    position: absolute;
    left: 98%;
    z-index: 9999;
}

.wpkoi-elements-countdown-item:last-child .wpkoi-elements-countdown-digits::after {
    display: none;
}

/* Visual background — NO !important so Elementor color control works.
   Selector matches Elementor generated: .wpkoi-elements-countdown-item > div (0,2,1).
   External stylesheet loads BEFORE Elementor dynamic injection → Elementor wins. */
.wpkoi-elements-countdown-item > div {
    background: #111;
}

/* Mobile: horizontal layout (all in one row) */
@media (max-width: 480px) {
    ul.wpkoi-elements-countdown-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    ul.wpkoi-elements-countdown-items > li {
        display: block !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ================================================
   ICD AUDIO WIDGET STYLES
   - Hide youtube iframe container (only used for logic)
   - Force show play/stop icons in Elementor Editor
   ================================================ */
#youtube-audio {
    display: none !important;
    visibility: hidden !important;
}

body.elementor-editor-active #unmute-sound,
body.elementor-editor-active #mute-sound,
body.elementor-editor-preview #unmute-sound,
body.elementor-editor-preview #mute-sound {
    display: block !important;
}