/* =========================================================================
   Konoz — client requests, October 2026
   Header (brand name, trial + account buttons), announcement ticker,
   features strip, services subtitle, payment cards, certificates gallery.
   Uses the variables of konoz.css, so dark mode follows automatically.
   ========================================================================= */

/* ---------- Header: platform name next to the logo ---------- */
.kz-brand { min-width: 0; }
.kz-brand-name {
    font-weight: 800; font-size: 1.02rem; line-height: 1.2; white-space: nowrap;
    color: var(--kz-teal-dark, #0a4a56);
}
html[data-theme="dark"] .kz-brand-name { color: #eef5f6; }
.kz-brand-name-menu { font-size: .95rem; }
@media (min-width: 992px) and (max-width: 1199.98px) { .header-nav .kz-brand-name { font-size: .88rem; } }
@media (max-width: 400px) { .header-nav .kz-brand-name { font-size: .82rem; } }
@media (max-width: 340px) { .header-nav .kz-brand-name { display: none; } }

/* ---------- Header: the two main actions ---------- */
.kz-header-trial, .kz-header-account {
    display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1rem;
    border-radius: 50px; font-weight: 800; font-size: .88rem; white-space: nowrap;
    text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
}
.kz-header-trial {
    color: #fff !important; background: linear-gradient(135deg, var(--kz-gold), #e8ab2c);
    box-shadow: 0 6px 18px rgba(216, 155, 29, .35);
}
.kz-header-trial:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(216, 155, 29, .42); }
.kz-header-account {
    color: #fff !important; background: linear-gradient(135deg, var(--kz-teal), #157a8c);
    border: 0; box-shadow: 0 6px 16px rgba(15, 109, 128, .25);
}
.kz-header-account:hover { transform: translateY(-2px); }
.kz-header-account.dropdown-toggle::after { margin-inline-start: .15rem; }
.kz-account-menu { border-radius: 14px; padding: .4rem; min-width: 210px; box-shadow: var(--kz-shadow); border: 1px solid var(--kz-border); }
.kz-account-menu .dropdown-item { border-radius: 10px; padding: .6rem .8rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.kz-account-menu .dropdown-item i { color: var(--kz-teal); width: 18px; text-align: center; }
.kz-account-menu .dropdown-item:hover { background: var(--kz-surface-2); }
/* The trial button always shows its label (client request); when room is short the account button
   becomes a round icon, and on phones the trial label gets shorter. */
.kz-header-trial-short { display: none; }
@media (max-width: 1399.98px) {
    .kz-header-account { width: 42px; padding: 0; justify-content: center; }
    .kz-header-account-text { display: none; }
    .kz-header-account.dropdown-toggle::after { display: none; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header-nav-links a { padding-inline: .6rem !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .kz-header-trial { padding: 0 .8rem; font-size: .8rem; gap: .35rem; }
    .header-nav-links a { padding-inline: .45rem !important; font-size: .88rem; }
}
@media (max-width: 575.98px) {
    .kz-header-trial { height: 38px; padding: 0 .7rem; font-size: .78rem; gap: .3rem; }
    .kz-header-trial-text { display: none; }
    .kz-header-trial-short { display: inline; }
    .kz-header-account { width: 38px; height: 38px; }
    .header-nav [data-kz-theme-toggle] { display: none; }
}
/* Small phones (360–399px): everything stays inside the screen */
@media (max-width: 399.98px) {
    .header-nav > .container { padding-inline: 10px; }
    .header-nav > .container > .d-flex { gap: .35rem !important; }
    .header-nav .header-logo { height: 34px; width: auto; }
    .header-nav .kz-brand { gap: .3rem !important; }
    .header-nav .kz-brand-name { font-size: .78rem; }
    .header-nav .mobile-toggle { padding: .3rem .5rem; }
    .kz-header-trial { height: 36px; padding: 0 .6rem; font-size: .74rem; }
    .kz-header-account { width: 36px; height: 36px; }
}
@media (max-width: 359.98px) { .kz-header-trial i { display: none; } }

/* ---------- Announcement ticker (above the header) ---------- */
.kz-ticker { background: linear-gradient(90deg, #072f38, var(--kz-teal-deep, #083a45) 35%, #0b5664); color: #fff; font-size: .9rem; font-weight: 700; position: relative; z-index: 1031; border-bottom: 2px solid rgba(216, 155, 29, .55); }
html[data-theme="dark"] .kz-ticker { background: linear-gradient(90deg, #04191e, #06262e 35%, #0b4250); }
.kz-ticker-link { display: flex; align-items: stretch; color: #fff !important; text-decoration: none; height: 40px; }
.kz-ticker-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; padding: 0 1.1rem; position: relative; z-index: 2;
    background: linear-gradient(135deg, var(--kz-gold, #D89B1D), #e8ab2c); color: #fff; font-weight: 800; white-space: nowrap;
    box-shadow: 6px 0 14px rgba(0, 0, 0, .18);
}
[dir="rtl"] .kz-ticker-badge { box-shadow: -6px 0 14px rgba(0, 0, 0, .18); }
.kz-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; position: relative; }
/* Soft fade at both edges */
.kz-ticker-viewport::before, .kz-ticker-viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none; }
.kz-ticker-viewport::before { inset-inline-start: 0; background: linear-gradient(to left, transparent, #083a45); }
.kz-ticker-viewport::after { inset-inline-end: 0; background: linear-gradient(to right, transparent, #0b5664); }
[dir="rtl"] .kz-ticker-viewport::before { background: linear-gradient(to right, transparent, #083a45); }
[dir="rtl"] .kz-ticker-viewport::after { background: linear-gradient(to left, transparent, #0b5664); }
.kz-ticker-track { display: inline-flex; flex-shrink: 0; white-space: nowrap; will-change: transform; }
.kz-ticker-group { display: inline-flex; flex-shrink: 0; }
.kz-ticker-item { display: inline-flex; align-items: center; padding: 0 1.6rem; letter-spacing: .2px; }
.kz-ticker-item::after { content: "✦"; margin-inline-start: 3.2rem; color: var(--kz-gold-light, #f5bd58); font-size: .8rem; }
/* Always moving once the script has filled the bar (the client asked for it on every device). */
.kz-ticker.is-ready .kz-ticker-track { animation: kzTickerLoop var(--kz-ticker-time, 25s) linear infinite; }
.kz-ticker-link:hover .kz-ticker-track, .kz-ticker-link:focus-visible .kz-ticker-track { animation-play-state: paused; }
.kz-ticker-link:hover .kz-ticker-item { text-decoration: underline; text-underline-offset: 4px; }
@keyframes kzTickerLoop { from { transform: translateX(0); } to { transform: translateX(var(--kz-ticker-shift, -50%)); } }
@media (max-width: 575.98px) {
    .kz-ticker { font-size: .82rem; }
    .kz-ticker-link { height: 36px; }
    .kz-ticker-badge { padding: 0 .7rem; font-size: .76rem; }
    .kz-ticker-item { padding: 0 1.1rem; }
    .kz-ticker-item::after { margin-inline-start: 2.2rem; }
}

/* ---------- Features strip: one card centred exactly on the line between the hero and the services section.
   Half of the card sits on the hero, half on the white section; --kzf-h is the card height (set by a small
   script in the partial, with per-screen fallbacks), so the spacing stays right on every screen size. ---------- */
:root { --kzf-h: 118px; }
.kz-features { position: relative; z-index: 3; padding: 0 !important; background: transparent; margin-top: calc(var(--kzf-h) / -2); margin-bottom: calc(var(--kzf-h) / -2); }
#hero { padding-bottom: calc(var(--kzf-h) / 2 + 2.25rem) !important; }
#services { padding-top: calc(var(--kzf-h) / 2 + 3rem) !important; }
/* Desktop: the first screen shows the ticker, the hero and the top half of the card (no empty band). */
@media (min-width: 992px) { #hero.hero-fullscreen { min-height: calc(100vh - 116px - var(--kzf-h) / 2); } }
html[data-theme="dark"] .kz-features-bar { background: #2a3d42; border-color: #2a3d42; }
.kz-features-bar {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
    background: #e2e8ea; border: 1px solid #e2e8ea; border-radius: 16px; overflow: hidden;
    box-shadow: 0 16px 40px -14px rgba(8, 58, 69, .3);
}
.kz-feature { background: var(--kz-surface, #fff); padding: 1.15rem .8rem 1.05rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.kz-feature-title { font-family: 'Aref Ruqaa', 'Amiri', 'Tajawal', serif; font-weight: 700; font-size: 1.22rem; line-height: 1.35; color: var(--kz-teal-dark, #0a4a56); margin: 0 0 .25rem; }
.kz-feature-desc { font-size: .8rem; line-height: 1.55; margin: 0; color: var(--kz-muted, #6b7a7e) !important; }
html[data-theme="dark"] .kz-feature-title { color: #eef5f6; }
@media (max-width: 1199.98px) { :root { --kzf-h: 236px; } .kz-features-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    :root { --kzf-h: 380px; }
    #hero { padding-bottom: calc(var(--kzf-h) / 2 + 1.5rem) !important; }
    #services { padding-top: calc(var(--kzf-h) / 2 + 2.25rem) !important; }
    .kz-features-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
    .kz-feature { padding: .9rem .5rem .85rem; }
    .kz-feature-title { font-size: 1.08rem; }
    .kz-feature-desc { font-size: .74rem; }
}



/* ---------- Services: subtitle on one line on wide screens ---------- */
@media (min-width: 1200px) {
    #services .section-subtitle { max-width: none; white-space: nowrap; }
}

/* ---------- Payment methods ---------- */
.kz-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); gap: 1rem; justify-content: center; }
.kz-pay-card {
    background: var(--kz-surface, #fff); border: 1px solid var(--kz-border); border-top: 4px solid var(--kz-gold);
    border-radius: 18px; padding: 1.4rem 1.1rem; text-align: center; box-shadow: var(--kz-shadow);
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.kz-pay-card.is-soon { border-top-color: rgba(15, 109, 128, .35); }
.kz-pay-card-icon {
    width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--kz-teal); background: var(--kz-surface-2, #f3f8f9);
}
.kz-pay-card-name { font-weight: 800; color: var(--kz-text); }
.kz-pay-card-value {
    font-weight: 800; letter-spacing: 1px; color: var(--kz-teal-dark, #0a4a56);
    background: var(--kz-surface-2, #f3f8f9); border-radius: 10px; padding: .4rem .8rem; width: 100%;
}
html[data-theme="dark"] .kz-pay-card-value { color: #8fd5e1; }
.kz-pay-card-soon { font-size: .86rem; font-weight: 700; color: var(--kz-muted); background: rgba(216, 155, 29, .1); border-radius: 10px; padding: .45rem .8rem; }
.kz-pay-card .kz-copy-btn { margin-top: .15rem; }

/* ===== Certificate gallery cards + search (home + /certificates) ===== */
.kzc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kzc-card { display: flex; flex-direction: column; background: var(--kz-surface, #fff); border: 1px solid var(--kz-border, rgba(15,109,128,.12)); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px -14px rgba(8,58,69,.25); transition: transform .25s, box-shadow .25s; }
.kzc-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -16px rgba(8,58,69,.35); }
.kzc-card-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 14px; border: 0; cursor: zoom-in; background: linear-gradient(160deg, #f7f1e3, #fffaf0); }
.kzc-card-media > img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 18px rgba(8,58,69,.18); background: #fff; }
.kzc-card-badge { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 30px; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--kz-teal, #0F6D80), #157a8c); box-shadow: 0 4px 12px rgba(15,109,128,.3); }
.kzc-card-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: rgba(8,58,69,.35); opacity: 0; transition: opacity .25s; }
.kzc-card-media:hover .kzc-card-zoom, .kzc-card-media:focus-visible .kzc-card-zoom { opacity: 1; }
.kzc-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.kzc-card-title { font-size: 1rem; font-weight: 800; line-height: 1.6; margin: 0; color: var(--kz-text, #23303a); }
.kzc-card-code { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .5px; color: var(--kz-teal, #0F6D80); background: rgba(15,109,128,.07); border-radius: 8px; padding: 3px 10px; }
.kzc-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.kzc-card-actions > * { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; font-size: .85rem; font-weight: 800; text-decoration: none; border: 1.5px solid rgba(15,109,128,.22); background: transparent; color: var(--kz-teal, #0F6D80); cursor: pointer; }
.kzc-card-actions > a { background: linear-gradient(135deg, var(--kz-gold, #D89B1D), #e8ab2c); border-color: transparent; color: #fff; }
.kzc-card-actions > *:hover { filter: brightness(1.05); }
.kzc-card-actions > a.kzc-card-view { background: transparent; border-color: rgba(15,109,128,.22); color: var(--kz-teal, #0F6D80); }
/* Miniature of a generated certificate inside the card */
.kzc-card-media-design { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.kzc-thumb { display: block; width: 100%; overflow: hidden; border-radius: 4px; box-shadow: 0 6px 18px rgba(8,58,69,.18); pointer-events: none; }
.kzc-thumb .kzc-fit { margin: 0; }
.kzc-search { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 520px; background: var(--kz-surface, #fff); border: 1.5px solid rgba(15,109,128,.18); border-radius: 16px; padding: 6px; box-shadow: 0 8px 24px -12px rgba(8,58,69,.25); }
.kzc-search:focus-within { border-color: var(--kz-teal, #0F6D80); }
.kzc-search > i { color: var(--kz-teal, #0F6D80); padding-inline-start: 10px; }
.kzc-search input:not(:placeholder-shown) { direction: ltr; text-align: start; }
.kzc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--kz-text, #23303a); font-weight: 700; padding: 8px 4px; }
.kzc-search button { border: 0; border-radius: 12px; padding: 9px 20px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--kz-teal, #0F6D80), #157a8c); white-space: nowrap; }
.kzc-search-none { text-align: center; color: var(--kz-muted, #6b7a7e); font-weight: 700; padding: 2rem 0; }
.kzc-count { font-size: .85rem; font-weight: 700; color: var(--kz-muted, #6b7a7e); }
html[data-theme="dark"] .kzc-card-media { background: linear-gradient(160deg, #10313a, #0d2930); }
@media (max-width: 991.98px) { .kzc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kzc-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- WhatsApp button: only the round icon; the "الإدارة متصلة الآن" note appears on mouse hover
   (it used to stay fixed over the page content). Touch screens keep just the icon. ---------- */
.kz-wa-fab .kz-wa-fab-text { opacity: 0; visibility: hidden; transform: translateX(-8px); pointer-events: none; transition: opacity .25s, transform .25s, visibility 0s .25s; }
[dir="ltr"] .kz-wa-fab .kz-wa-fab-text { transform: translateX(8px); }
@media (hover: hover) {
    .kz-wa-fab:hover .kz-wa-fab-text, .kz-wa-fab:focus-visible .kz-wa-fab-text {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .25s, transform .25s, visibility 0s;
    }
}