/* ═══════════════════════════════════════
   PLUGIN UYUM — OUG Widget Stilleri
═══════════════════════════════════════ */

/* ── Countdown — sağ sütunda tam genişlik ── */
.oug-countdown {
    background: #1c1c1e;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.oug-countdown__label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oug-countdown__digits {
    display: flex;
    align-items: center;
    gap: 6px;
}

.oug-countdown__block {
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 10px;
    padding: 8px 12px 6px;
    min-width: 56px;
    text-align: center;
}

.oug-countdown__block span {
    font-family: 'DM Mono', monospace;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    display: block;
    line-height: 1;
}

.oug-countdown__block span.is-urgent { color: #ff6b6b; }
.oug-countdown__block small { color: rgba(255,255,255,.3); font-size: 9px; margin-top: 4px; display: block; }
.oug-sep { color: rgba(255,255,255,.2); font-size: 22px; margin-bottom: 4px; }

@media (max-width: 480px) {
    .oug-countdown { flex-direction: column; gap: 10px; text-align: center; }
    .oug-countdown__digits { justify-content: center; }
    .oug-countdown__block span { font-size: 24px; }
}

/* ── Stok barı ── */
.oug-stock {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 18px;
}

.oug-stock__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.oug-stock__label { font-size: 13px; font-weight: 600; color: #3a3a3c; }
.oug-stock__count {
    font-size: 13px;
    font-weight: 500;
    color: #aeaeb2;
    display: flex;
    align-items: baseline;
    gap: 1px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.oug-stock__count strong {
    font-size: 22px;
    font-weight: 800;
    color: #0071e3;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.oug-stock__sep { font-size: 15px; color: #c7c7cc; margin: 0 1px; font-weight: 400; }

/* Bar + tier işaretleri */
.oug-stock__bar-wrap {
    position: relative;
    margin: 4px 0;
}

.oug-stock__bar {
    height: 7px;
    background: #e5e5ea;
    border-radius: 99px;
    overflow: visible;
    position: relative;
}

.oug-stock__fill {
    height: 100%;
    background: linear-gradient(90deg, #0071e3, #34aadc);
    border-radius: 99px;
    transition: width .4s ease;
    position: relative;
}

/* Tier eşik işaretleri */
.oug-stock__mark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 13px;
    background: #fff;
    border-radius: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

.oug-stock__bonus-info {
    font-size: 13px;
    color: #636366;
    margin-top: 6px;
}
.oug-stock__bonus-info strong { color: #e67700; font-weight: 700; }

.oug-stock__explain {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f5f5f7;
    border-radius: 8px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.oug-stock__explain strong { color: #0071e3; }
.oug-stock__how {
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

.oug-stock.is-empty { background: #f0fdf4 !important; border-color: #86efac !important; }
.oug-stock__empty { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.oug-stock__empty > div { display: flex; flex-direction: column; gap: 2px; }
.oug-stock__empty strong { font-size: 15px; color: #1a8a3a; display: block; }
.oug-stock__empty span { font-size: 13px; color: #636366; }

.oug-stock__bar {
    height: 6px;
    background: #e5e5ea;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}

.oug-stock__fill { height: 100%; background: #0071e3; border-radius: 99px; transition: width .6s ease; }
.oug-stock__tier { font-size: 12px; color: #8e8e93; }
.oug-stock__tier strong { color: #e67700; font-weight: 600; }

/* ── Tier listesi ── */
.oug-tiers {
    background: none;
    border: none;
    margin-bottom: 0;
    display: flex;
    gap: 6px;
    padding: 0;
    margin-bottom: 18px;
}

.oug-tiers__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    gap: 2px;
    transition: border-color .15s;
}

.oug-tiers__item.is-active {
    background: #e8f1fd;
    border-color: #0071e3;
}

.oug-tiers__item.is-done { opacity: .5; }

.oug-tiers__range { font-size: 10px; color: #8e8e93; font-weight: 500; white-space: nowrap; font-family: var(--font); }
.oug-tiers__bonus { font-family: var(--font); font-size: 13px; font-weight: 700; color: #e67700; }
.oug-tiers__item.is-done .oug-tiers__bonus { color: #1a8a3a; }
.oug-tiers__item.is-active .oug-tiers__bonus { color: #0071e3; }

.oug-section-title {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8e8e93;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── Gelecek ürünler ── */
.oug-upcoming__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.oug-upcoming__grid::-webkit-scrollbar { display: none; }

.oug-upcoming__card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    flex: 0 0 180px;
    scroll-snap-align: start;
}

.oug-upcoming__card:hover { border-color: #d1d1d6; box-shadow: 0 4px 16px rgba(0,0,0,.07); }

.oug-upcoming__img { aspect-ratio: 1; background: #f5f5f7; overflow: hidden; }
.oug-upcoming__img img { width: 100%; height: 100%; object-fit: cover; }
.oug-upcoming__img.is-blurred img { filter: blur(14px); transform: scale(1.1); }
.oug-upcoming__noimg { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #d1d1d6; }

.oug-upcoming__body { padding: 12px 12px 14px; }
.oug-upcoming__day { font-size: 11px; font-weight: 700; color: #0071e3; letter-spacing: .02em; display: block; margin-bottom: 4px; }
.oug-upcoming__name { font-size: 13px; font-weight: 600; color: #1c1c1e; line-height: 1.3; display: block; margin-bottom: 10px; }

.oug-reminder-btn {
    display: block; width: 100%;
    background: #f5f5f7; border: 1px solid #e5e5ea;
    border-radius: 8px; padding: 7px 8px;
    font-size: 12px; font-weight: 600; color: #636366;
    cursor: pointer; text-align: center;
    transition: all .15s; font-family: inherit;
}
.oug-reminder-btn:hover { background: #e8f1fd; border-color: #93c5fd; color: #0071e3; }

/* ── Geçmiş ürünler ── */
.oug-past__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.oug-past__grid::-webkit-scrollbar { display: none; }

.oug-past__card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s;
    flex: 0 0 180px;
    scroll-snap-align: start;
}
.oug-past__card:hover { border-color: #d1d1d6; }

.oug-past__thumb { aspect-ratio: 1; background: #f5f5f7; position: relative; overflow: hidden; }
.oug-past__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) opacity(.85); }

/* Çapraz damga */
.oug-past__stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    border: 3px solid rgba(160,0,0,.55);
    color: rgba(160,0,0,.6);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 8px 14px;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.3;
    user-select: none;
    text-shadow: 0 1px 2px rgba(160,0,0,.15);
}

.oug-past__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.oug-past__date { font-size: 10px; color: #8e8e93; font-weight: 500; display: block; }
.oug-past__name { font-size: 12px; font-weight: 600; color: #1c1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.oug-past__price { font-size: 13px; font-weight: 700; color: #1c1c1e; display: block; margin: 3px 0; }

.oug-past__bar { height: 3px; background: #e5e5ea; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.oug-past__fill { height: 100%; background: #0071e3; border-radius: 4px; }
.oug-past__card.is-full .oug-past__fill { background: #1a8a3a; }

.oug-past__stats { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #8e8e93; font-weight: 500; }
.oug-past__bonus-info { color: #e67700; font-weight: 700; }

/* ── Kısmi kredi ── */
.oug-partial-credit {
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    margin-bottom: 16px;
}

#oug-apply-credit {
    background: #1c1c1e;
    color: #fff;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: none;
    padding: 9px 16px;
    cursor: pointer;
}

/* ── Kredi sayfası override ── */
.oug-credits-balance {
    background: linear-gradient(135deg, #0071e3 0%, #0062c4 100%) !important;
    border-radius: 16px !important;
    border: none !important;
}

@media (max-width: 500px) {
    .oug-upcoming__grid, .oug-past__grid { grid-template-columns: repeat(2, 1fr); }
    .oug-tiers { flex-wrap: wrap; }
    .oug-tiers__item { min-width: calc(33% - 4px); }
}

/* ── Bildirim & Bekleme Listesi ── */
.oug-subscribe-box,
.oug-waitlist-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 8px;
    font-size: 13px;
}

.oug-subscribe-box {
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
    color: #636366;
}

.oug-waitlist-box {
    background: #fff8e6;
    border: 1px solid #f0c040;
    color: #92400e;
}

.oug-notify-btn {
    flex-shrink: 0;
    background: #1c1c1e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}
.oug-notify-btn:hover { background: #333; color: #fff; }
.oug-notify-btn:disabled { background: #1a8a3a; cursor: default; }

.oug-notify-btn--outline {
    background: transparent;
    color: #636366;
    border: 1.5px solid #d1d1d6;
}
.oug-notify-btn--outline:hover { border-color: #0071e3; color: #0071e3; background: transparent; }
.oug-notify-btn--outline:disabled { background: #f0fdf4; color: #1a8a3a; border-color: #86efac; }