/*
Author : SiberMimar "Guray Avci" | Website: www.sibermimar.com.tr

SPR-220
Siber Purchase Popup - UI Shell (skeleton)
*/

.siber-purchasePopup {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
}

.siber-purchasePopup.is-open {
    display: block;
}

body.siber-purchase-open {
    overflow: hidden;
}

.siber-purchasePopup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.siber-purchasePopup__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 24px);
    max-width: 1120px;
    max-height: calc(100% - 24px);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.siber-purchasePopup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.siber-purchasePopup__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}

.siber-purchasePopup__close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    padding: 0 10px;
    cursor: pointer;
    color: #2d2d2d;
}

.siber-purchasePopup__body {
    display: flex;
    gap: 0;
    height: calc(100% - 54px);
    max-height: calc(100vh - 78px);
}

.siber-purchasePopup__main {
    flex: 1;
    padding: 18px 18px;
    overflow: auto;
}

.siber-purchasePopup__aside {
    width: 340px;
    border-left: 1px solid rgba(0, 0, 0, 0.07);
    background: #fafafa;
    padding: 18px 18px;
    overflow: auto;
}

/* Step box */
.siber-purchaseStep {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 16px 16px;
}

.siber-purchaseStep__title {
    font-size: 18px;
    margin: 0 0 10px;
    font-weight: 800;
}

.siber-purchaseStep__desc {
    margin: 0 0 12px;
    color: rgba(0,0,0,0.78);
}

.siber-purchaseStep__hint {
    font-size: 12px;
    color: rgba(0,0,0,0.58);
    border-top: 1px dashed rgba(0,0,0,0.18);
    padding-top: 10px;
}

.siber-purchaseStep__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.siber-purchaseStep__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* Aside */
.siber-purchaseChat {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 14px 14px;
}

/* Step info (SPR-224) */
.siber-purchaseInfo {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 14px 14px;
    margin-bottom: 12px;
}

.siber-purchaseInfo__title {
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 8px;
}

.siber-purchaseInfo__desc {
    font-size: 13px;
    color: rgba(0,0,0,0.75);
    margin-bottom: 10px;
}

.siber-purchaseInfo__meta {
    font-size: 12px;
    color: rgba(0,0,0,0.55);
    border-top: 1px dashed rgba(0,0,0,0.16);
    padding-top: 10px;
}

/* Live chat slot (embed) */
.siber-purchaseChatSlot {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    min-height: 420px;
}

.siber-purchaseChatPlaceholder {
    padding: 14px;
    font-size: 13px;
    color: rgba(0,0,0,0.68);
}

/* SiberLiveChat embed overrides (SPR-224)
   - widget normalde fixed pozisyonlu; popup içinde statik olarak sağ sütunu doldurmalı.
*/
.siber-purchaseChatSlot .sblc-widget.sblc-embedded {
    position: static !important;
    z-index: auto !important;
    pointer-events: auto;
    width: 100%;
}

.siber-purchaseChatSlot .sblc-widget.sblc-embedded .sblc-fab {
    display: none !important;
}

.siber-purchaseChatSlot .sblc-widget.sblc-embedded .sblc-panel {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 420px !important;
    max-height: none !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
}

.siber-purchaseChatSlot .sblc-widget.sblc-embedded .sblc-panel__close {
    display: none !important;
}

/* Auth step (SPR-224) */
.siber-authStep {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 16px 16px;
}

.siber-authStep__title {
    font-size: 18px;
    margin: 0 0 8px;
    font-weight: 900;
}

.siber-authStep__desc {
    margin: 0 0 12px;
    color: rgba(0,0,0,0.78);
}

.siber-authStep__tabs {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 12px;
}

.siber-authStep__error,
.siber-authStep__info {
    display: none;
    padding: 10px 10px;
    border-radius: 12px;
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(0,0,0,0.80);
}

.siber-authStep__error.is-show {
    display: block;
    border: 1px solid rgba(244, 67, 54, 0.22);
    background: rgba(244, 67, 54, 0.06);
}

.siber-authStep__info.is-show {
    display: block;
    border: 1px solid rgba(2, 136, 209, 0.20);
    background: rgba(2, 136, 209, 0.06);
}

.siber-authStep__social {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 12px;
    margin: 0 0 12px;
    background: #fff;
}

.siber-authStep__socialTitle {
    font-weight: 900;
    font-size: 13px;
    margin: 0 0 8px;
    color: rgba(0,0,0,0.78);
}

.siber-authStep__socialBtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.siber-authStep__socialBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.siber-authStep__panel {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.siber-authForm__row {
    margin-bottom: 10px;
}

.siber-authForm__passWrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.siber-authForm__passWrap .form-control {
    flex: 1;
}

.siber-authForm__passToggle {
    min-width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.siber-authForm__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 12px;
    font-size: 12px;
    color: rgba(0,0,0,0.65);
}

.siber-authForm__remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 800;
}

.siber-authForm__link {
    text-decoration: underline;
}

.siber-authForm__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.siber-authForm__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 640px) {
    .siber-authForm__grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   SPR-233: Register custom fields UI helpers
   - customfield tickbox/radio/help metinleri grid içinde düzgün görünmeli
------------------------------------------------------------- */

.siber-authForm__help {
    grid-column: 1 / -1;
    margin-top: -6px;
    font-size: 12px;
    color: rgba(0,0,0,0.62);
}

.siber-authForm__tick {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.siber-authForm__tick input {
    margin: 0;
}

.siber-authForm__radio {
    grid-column: 1 / -1;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    background: rgba(255,255,255,0.9);
    padding: 10px 12px;
}

.siber-authForm__radioTitle {
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 6px;
}

.siber-authForm__radioItem {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 6px 0;
    cursor: pointer;
}

.siber-authForm__radioItem input {
    margin: 0;
}

.siber-authStep__tab {
    appearance: none;
    border: 1px solid rgba(0,0,0,0.14);
    background: #fff;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
}

.siber-authStep__tab.is-active {
    border-color: rgba(27, 94, 32, 0.35);
    background: rgba(27, 94, 32, 0.06);
}

.siber-authStep__frameWrap {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.siber-authStep__frame {
    width: 100%;
    height: 560px;
    border: 0;
    display: block;
}


.siber-authStep__helper {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(0,0,0,0.58);
}

.siber-authStep__link {
    text-decoration: underline;
}

.siber-authStep__ok {
    padding: 12px 12px;
    border: 1px solid rgba(27, 94, 32, 0.22);
    border-radius: 12px;
    background: rgba(27, 94, 32, 0.06);
    color: rgba(0,0,0,0.78);
    margin-top: 8px;
}

.siber-authStep__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.siber-purchaseChat__title {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 8px;
}

.siber-purchaseChat__desc {
    font-size: 13px;
    color: rgba(0,0,0,0.75);
    margin-bottom: 10px;
}

.siber-purchaseChat__meta {
    font-size: 12px;
    color: rgba(0,0,0,0.55);
    margin-bottom: 12px;
}

.siber-purchaseChat__actions {
    display: flex;
    justify-content: flex-end;
}


/* Domain step (SPR-225) */
.siber-domainStep{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:16px;}
.siber-domainStep__title{font-size:18px;margin:0 0 8px;font-weight:900;}
.siber-domainStep__desc{margin:0 0 12px;color:rgba(0,0,0,0.78);}
.siber-domainStep__modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.siber-domainStep__mode{appearance:none;border:1px solid rgba(0,0,0,0.14);background:#fff;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:800;font-size:13px;}
.siber-domainStep__mode.is-active{border-color:rgba(27,94,32,0.35);background:rgba(27,94,32,0.06);}
.siber-domainStep__panel{background:#fff;border:1px solid rgba(0,0,0,0.10);border-radius:12px;padding:14px 14px;}
.siber-domainStep__row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.siber-domainStep__label{display:block;font-weight:800;font-size:13px;margin:0 0 6px;color:rgba(0,0,0,0.80);}
.siber-domainStep__input{flex:1;min-width:220px;}
.siber-domainStep__check{white-space:nowrap;}
.siber-domainStep__status{margin-top:10px;padding:10px 10px;border-radius:10px;font-size:13px;color:rgba(0,0,0,0.78);} 
.siber-domainStep__status:empty{display:none;}
.siber-domainStep__status.is-info{background:rgba(2,136,209,0.08);border:1px solid rgba(2,136,209,0.18);} 
.siber-domainStep__status.is-ok{background:rgba(27,94,32,0.06);border:1px solid rgba(27,94,32,0.18);} 
.siber-domainStep__status.is-err{background:rgba(198,40,40,0.06);border:1px solid rgba(198,40,40,0.18);} 
.siber-domainStep__actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap;}
.siber-domainStep__hint{margin-top:10px;font-size:12px;color:rgba(0,0,0,0.58);} 

/* Embed step (SPR-225) */
.siber-embedStep{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:16px;}
.siber-embedStep__title{font-size:18px;margin:0 0 8px;font-weight:900;}
.siber-embedStep__desc{margin:0 0 12px;color:rgba(0,0,0,0.78);}
.siber-embedStep__frameWrap{border:1px solid rgba(0,0,0,0.10);border-radius:12px;overflow:hidden;background:#fff;}
.siber-embedStep__frame{width:100%;height:680px;border:0;display:block;}
.siber-embedStep__helper{margin-top:10px;font-size:12px;color:rgba(0,0,0,0.58);}
.siber-embedStep__link{text-decoration:underline;}

/* Configure step (SPR-226) */
.siber-configStep{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:16px;}
.siber-configStep__title{font-size:18px;margin:0 0 8px;font-weight:900;}
.siber-configStep__desc{margin:0 0 12px;color:rgba(0,0,0,0.78);}
.siber-configStep__loading{padding:12px 12px;border:1px dashed rgba(0,0,0,0.18);border-radius:12px;color:rgba(0,0,0,0.60);font-size:13px;}
.siber-configStep__form{margin-top:12px;}
.siber-configSection{margin-bottom:14px;padding:12px 12px;border:1px solid rgba(0,0,0,0.08);border-radius:12px;background:rgba(0,0,0,0.01);} 
.siber-configSection__title{font-weight:900;font-size:14px;margin-bottom:6px;}
.siber-configSection__hint{font-size:12px;color:rgba(0,0,0,0.58);margin-bottom:10px;}
.siber-configGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.siber-configField{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:12px 12px;}
.siber-configField__label{display:block;font-weight:900;font-size:13px;margin:0 0 8px;color:rgba(0,0,0,0.82);} 
.siber-configField__help{margin-top:8px;font-size:12px;color:rgba(0,0,0,0.60);} 
.siber-configRadio{display:flex;flex-direction:column;gap:8px;}
.siber-configRadio__item{display:flex;align-items:flex-start;gap:10px;padding:10px 10px;border:1px solid rgba(0,0,0,0.10);border-radius:12px;cursor:pointer;background:#fff;}
.siber-configRadio__item input{margin-top:3px;}
.siber-configRadio__text{font-size:13px;color:rgba(0,0,0,0.78);} 
.siber-configCheck{display:flex;align-items:flex-start;gap:10px;padding:10px 10px;border:1px solid rgba(0,0,0,0.10);border-radius:12px;cursor:pointer;background:#fff;}
.siber-configCheck input{margin-top:3px;}
.siber-configCheck__text{font-size:13px;color:rgba(0,0,0,0.78);} 
.siber-configStep__status{margin-top:10px;padding:10px 10px;border-radius:10px;font-size:13px;color:rgba(0,0,0,0.78);} 
.siber-configStep__status:empty{display:none;}
.siber-configStep__status.is-info{background:rgba(2,136,209,0.08);border:1px solid rgba(2,136,209,0.18);} 
.siber-configStep__status.is-ok{background:rgba(27,94,32,0.06);border:1px solid rgba(27,94,32,0.18);} 
.siber-configStep__status.is-err{background:rgba(198,40,40,0.06);border:1px solid rgba(198,40,40,0.18);} 
.siber-configStep__actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap;}
.siber-configStep__hint{margin-top:10px;font-size:12px;color:rgba(0,0,0,0.58);} 
.siber-configStep__link{text-decoration:underline;}


/* Checkout step (SPR-227) */
.siber-checkoutStep{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:16px;}
.siber-checkoutStep__title{font-size:18px;margin:0 0 8px;font-weight:900;}
.siber-checkoutStep__desc{margin:0 0 12px;color:rgba(0,0,0,0.78);}
.siber-checkoutStep__loading{padding:12px 12px;border:1px dashed rgba(0,0,0,0.18);border-radius:12px;color:rgba(0,0,0,0.60);font-size:13px;}
.siber-checkoutGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.siber-checkoutCard{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:12px 12px;}
.siber-checkoutCard__title{font-weight:900;font-size:14px;margin:0 0 10px;}
.siber-checkoutList{display:flex;flex-direction:column;gap:8px;}
.siber-checkoutItem{display:flex;justify-content:space-between;gap:10px;border:1px solid rgba(0,0,0,0.08);border-radius:12px;padding:10px 10px;}
.siber-checkoutItem__name{font-weight:800;font-size:13px;color:rgba(0,0,0,0.82);}
.siber-checkoutItem__price{font-size:13px;color:rgba(0,0,0,0.72);white-space:nowrap;}
.siber-checkoutTotals{margin-top:10px;border-top:1px dashed rgba(0,0,0,0.16);padding-top:10px;display:flex;flex-direction:column;gap:6px;}
.siber-checkoutTotals__row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:rgba(0,0,0,0.74);}
.siber-checkoutTotals__row--total{font-weight:900;color:rgba(0,0,0,0.88);}
.siber-checkoutTotals__row--discount{color:rgba(198,40,40,0.86);}
.siber-payOptions{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.siber-payOption{display:flex;align-items:flex-start;gap:10px;border:1px solid rgba(0,0,0,0.10);border-radius:12px;padding:10px 10px;cursor:pointer;background:#fff;}
.siber-payOption input{margin-top:3px;}
.siber-payOption__name{font-weight:900;font-size:13px;color:rgba(0,0,0,0.82);}
.siber-payOption__meta{font-size:12px;color:rgba(0,0,0,0.58);}
.siber-checkoutTos{margin-top:10px;padding:10px 10px;border:1px dashed rgba(0,0,0,0.16);border-radius:12px;font-size:12px;color:rgba(0,0,0,0.70);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.siber-checkoutTos a{text-decoration:underline;}
.siber-checkoutStep__status{margin-top:10px;padding:10px 10px;border-radius:10px;font-size:13px;color:rgba(0,0,0,0.78);} 
.siber-checkoutStep__status:empty{display:none;}
.siber-checkoutStep__status.is-info{background:rgba(2,136,209,0.08);border:1px solid rgba(2,136,209,0.18);} 
.siber-checkoutStep__status.is-err{background:rgba(198,40,40,0.06);border:1px solid rgba(198,40,40,0.18);} 
.siber-checkoutStep__status.is-ok{background:rgba(27,94,32,0.06);border:1px solid rgba(27,94,32,0.18);} 
.siber-checkoutStep__actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap;}
.siber-checkoutStep__hint{margin-top:10px;font-size:12px;color:rgba(0,0,0,0.58);} 
.siber-checkoutStep__link{text-decoration:underline;}
.siber-checkoutEmbedNotice{margin:10px 0 12px;padding:10px 10px;border-radius:12px;border:1px solid rgba(0,0,0,0.10);background:rgba(0,0,0,0.02);font-size:13px;color:rgba(0,0,0,0.75);}
.siber-checkoutEmbedNotice.is-warn{background:rgba(255,152,0,0.08);border-color:rgba(255,152,0,0.18);}
.siber-checkoutEmbedNotice.is-ok{background:rgba(27,94,32,0.06);border-color:rgba(27,94,32,0.18);}
.siber-checkoutEmbedNotice.is-err{background:rgba(198,40,40,0.06);border-color:rgba(198,40,40,0.18);}


/* Mobile */
@media (max-width: 991.98px) {
    .siber-purchasePopup__panel {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        width: auto;
        max-width: none;
        max-height: calc(100% - 24px);
    }

    .siber-purchasePopup__body {
        flex-direction: column;
        height: auto;
        max-height: calc(100vh - 110px);
    }

    .siber-purchasePopup__aside {
        width: 100%;
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
    }

    .siber-purchaseChatSlot .sblc-widget.sblc-embedded .sblc-panel {
        height: 360px !important;
    }

    .siber-authStep__frame {
        height: 520px;
    }

    .siber-embedStep__frame {
        height: 560px;
    }

    .siber-configGrid {
        grid-template-columns: 1fr;
    }

    .siber-checkoutGrid {
        grid-template-columns: 1fr;
    }
}