/* ==========================================================================
   دار السحاب — أنماط الصفحات الداخلية
   (صفحة الكتاب، الشيك أوت، تتبع الطلب، الحساب)
   ========================================================================== */

/* ==========================================================================
   صفحة الكتاب
   ========================================================================== */
.book-immersive-header { position: relative; overflow: hidden; padding: 60px 0 70px; isolation: isolate; }
.book-immersive-bg {
    position: absolute; inset: -12%; z-index: -2;
    background-size: cover; background-position: center;
    filter: blur(38px) saturate(1.25); opacity: 0.55; transform: scale(1.15);
}
.book-immersive-header::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand) 78%, transparent),
        color-mix(in srgb, var(--brand) 94%, transparent));
}
.book-immersive-inner { display: grid; grid-template-columns: 320px 1fr; gap: 46px; align-items: start; }

.book-hero-cover { position: relative; perspective: 1200px; }
.book-hero-cover img {
    width: 100%; border-radius: 16px; display: block;
    box-shadow: 0 40px 70px -25px rgba(0, 0, 0, 0.7);
    transition: transform 0.6s var(--ease-out-soft);
}
.book-hero-cover:hover img { transform: rotateY(-9deg) rotateX(4deg) translateY(-8px); }
.book-hero-cover .book-cover-fallback { border-radius: 16px; aspect-ratio: 3 / 4; position: relative; padding: 0; }
.book-type-tag {
    position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
    background: var(--accent); color: #0f172a; padding: 7px 14px;
    border-radius: 99px; font-size: 12px; font-weight: 800;
}

.book-hero-info { color: #fff; }
.book-hero-info h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.35; margin-bottom: 14px; color: #fff; }
.book-hero-cat {
    display: inline-block; background: rgba(212, 175, 55, 0.2); color: var(--accent);
    padding: 6px 16px; border-radius: 99px; font-size: 13px; font-weight: 800; margin-bottom: 16px;
    transition: transform 0.3s var(--ease-out-back);
}
.book-hero-cat:hover { transform: translateY(-3px); }
.book-hero-author { color: rgba(255, 255, 255, 0.8); font-size: 17px; display: inline-block; margin-bottom: 16px; }
.book-hero-author:hover { color: var(--accent); }
.book-hero-author i { color: var(--accent); }
.book-hero-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.book-hero-rating .stars { color: var(--accent); font-size: 17px; letter-spacing: 2px; }
.book-hero-rating a { color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.book-hero-rating a:hover { color: var(--accent); }

.book-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.bhm-item {
    background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px); border-radius: 14px; padding: 12px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px;
    transition: transform 0.35s var(--ease-out-back), background 0.3s;
}
.bhm-item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); }
.bhm-item i { color: var(--accent); font-size: 15px; margin-bottom: 4px; }
.bhm-item span { font-weight: 800; font-size: 15px; color: #fff; }
.bhm-item small { font-size: 11px; color: rgba(255, 255, 255, 0.6); }

.book-hero-buy {
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px); border-radius: 20px; padding: 24px; max-width: 640px;
}
.book-hero-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.book-hero-price .price-now { font-size: 34px; font-weight: 700; color: var(--gold-2); }
.book-hero-price .price-old { color: rgba(255, 255, 255, 0.5); font-size: 19px; }
.price-save { background: var(--success); color: #fff; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.book-hero-buy .price-on-request { color: #fff; font-size: 22px; font-weight: 800; }

.stock-warning {
    display: inline-flex; align-items: center; gap: 8px; color: #fca5a5;
    font-size: 14px; font-weight: 700; margin-bottom: 14px;
}

.book-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.add-to-cart-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-buy { padding: 15px 34px; font-size: 16px; }
.btn-icon-only {
    width: 52px; height: 52px; display: grid; place-items: center; padding: 0;
    color: #fff; border-color: rgba(255, 255, 255, 0.25); font-size: 19px;
}
.btn-icon-only.is-active { color: #e74c3c; border-color: #e74c3c; }

.qty-picker {
    display: flex; align-items: center; background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; overflow: hidden;
}
.qty-picker button {
    width: 44px; height: 52px; border: 0; background: transparent; color: #fff;
    font-size: 21px; cursor: pointer; transition: background 0.25s;
}
.qty-picker button:hover { background: rgba(255, 255, 255, 0.15); color: var(--accent); }
.qty-picker input {
    width: 52px; height: 52px; border: 0; background: transparent; color: #fff;
    text-align: center; font-size: 17px; font-weight: 800; font-family: inherit;
    -moz-appearance: textfield; appearance: textfield;
}
.qty-picker input::-webkit-outer-spin-button,
.qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.preview-link {
    display: inline-flex; align-items: center; gap: 8px; color: var(--accent);
    font-weight: 700; margin-bottom: 14px; transition: transform 0.3s var(--ease-out-soft);
}
.preview-link:hover { transform: translateX(-5px); }

.book-assurances { display: grid; gap: 9px; margin-top: 14px; }
.book-assurances li { color: rgba(255, 255, 255, 0.72); font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.book-assurances i { color: var(--accent); width: 18px; }

.book-description {
    color: var(--text-light); line-height: 2.1; font-size: 16.5px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 30px; margin-top: 26px;
}

/* ==========================================================================
   التقييمات
   ========================================================================== */
.reviews-layout { display: grid; grid-template-columns: 280px 1fr; gap: 34px; margin-top: 30px; align-items: start; }
.reviews-summary {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px; text-align: center; position: sticky; top: 100px;
}
.rs-score { font-size: 52px; font-weight: 900; color: var(--accent); line-height: 1; }
.rs-stars { color: var(--accent); font-size: 17px; letter-spacing: 3px; margin: 10px 0 6px; }
.rs-count { color: var(--text-light); font-size: 14px; margin-bottom: 20px; }
.rs-bars { display: grid; gap: 9px; }
.rs-bar-row { display: grid; grid-template-columns: 42px 1fr 26px; align-items: center; gap: 10px; font-size: 12px; }
.rs-bar-row > span { color: var(--text-light); white-space: nowrap; }
.rs-bar-row > span i { color: var(--accent); font-size: 10px; }
.rs-bar { height: 7px; background: var(--border); border-radius: 99px; overflow: hidden; }
.rs-bar > span {
    display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f1c40f);
    border-radius: 99px; transition: width 0.9s var(--ease-out-soft);
}
.rs-empty { color: var(--text-light); }
.rs-empty i { font-size: 40px; color: var(--border); display: block; margin-bottom: 12px; }

.reviews-main { display: grid; gap: 26px; }
.review-form h3 { margin-bottom: 20px; font-size: 19px; }
.review-form h3 i { color: var(--accent); margin-inline-end: 8px; }
.reviews-list { display: grid; gap: 16px; }
.review-item {
    display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 20px;
    transition: transform 0.35s var(--ease-out-back), box-shadow 0.35s;
}
.review-item:hover { transform: translateX(-5px); box-shadow: var(--shadow); }
.review-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), #f1c40f); color: #0f172a; font-weight: 900; font-size: 19px;
}
.review-body { flex: 1; min-width: 0; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-head time { color: var(--text-light); font-size: 12px; margin-inline-start: auto; }
.verified-badge {
    background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a;
    font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px;
}
.review-stars { color: var(--accent); font-size: 13px; margin-bottom: 8px; letter-spacing: 1px; }
.review-body p { color: var(--text-light); line-height: 1.9; }

/* ==========================================================================
   الشيك أوت والفواتير وتتبع الطلب
   ========================================================================== */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.checkout-summary { position: sticky; top: 100px; }
.summary-row { display: flex; justify-content: space-between; padding: 11px 0; color: var(--text-light); }
.summary-row.is-total {
    border-top: 2px solid var(--border); margin-top: 10px; padding-top: 16px;
    font-size: 20px; font-weight: 900; color: var(--text);
}
.summary-row.is-total strong { color: var(--accent); }
.summary-row.is-discount { color: #16a34a; }

.pay-methods { display: grid; gap: 12px; }
.pay-method {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer;
    border: 2px solid var(--border); border-radius: 14px; background: var(--bg-color);
    transition: border-color 0.28s ease, transform 0.28s var(--ease-out-back), background 0.28s;
}
.pay-method:hover { transform: translateY(-3px); }
.pay-method input { accent-color: var(--accent); width: 19px; height: 19px; }
.pay-method.is-selected { border-color: var(--accent); background: var(--accent-light); }
.pay-method i { font-size: 21px; color: var(--accent); }
.pay-method-body strong { display: block; }
.pay-method-body small { color: var(--text-light); font-size: 12.5px; }
.pay-method.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* خط زمني لحالة الطلب */
.order-timeline { display: flex; justify-content: space-between; position: relative; margin: 40px 0; }
.order-timeline::before {
    content: ''; position: absolute; inset-block-start: 22px; inset-inline: 22px;
    height: 3px; background: var(--border); border-radius: 3px;
}
.order-timeline::after {
    content: ''; position: absolute; inset-block-start: 22px; inset-inline-start: 22px;
    height: 3px; width: var(--progress, 0%); background: linear-gradient(90deg, var(--accent), #f1c40f);
    border-radius: 3px; transition: width 1.1s var(--ease-out-soft);
}
.timeline-step { position: relative; z-index: 2; text-align: center; flex: 1; }
.timeline-dot {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
    display: grid; place-items: center; background: var(--surface);
    border: 3px solid var(--border); color: var(--text-light); font-size: 16px;
    transition: transform 0.4s var(--ease-out-back), border-color 0.4s, color 0.4s, background 0.4s;
}
.timeline-step.is-done .timeline-dot {
    border-color: var(--accent); background: var(--accent); color: #0f172a; transform: scale(1.06);
}
.timeline-step.is-current .timeline-dot { animation: sa-pop 1.8s ease-in-out infinite; }
.timeline-step span { font-size: 13px; font-weight: 700; color: var(--text-light); }
.timeline-step.is-done span { color: var(--text); }

.tracking-code-box {
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    border-radius: 18px; padding: 26px; text-align: center; color: #fff; margin-bottom: 26px;
}
.tracking-code-box .code {
    font-size: 30px; font-weight: 900; color: var(--accent); letter-spacing: 3px; direction: ltr;
    display: block; margin-top: 8px;
}

/* الفاتورة */
.invoice-sheet {
    background: #fff; color: #0f172a; max-width: 820px; margin: 40px auto;
    padding: 44px; border-radius: 16px; box-shadow: var(--shadow-hover);
}
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
.invoice-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.invoice-table th, .invoice-table td { padding: 13px; border-bottom: 1px solid #e2e8f0; text-align: right; }
.invoice-table th { background: #f8fafc; font-weight: 800; }
.invoice-table td:last-child, .invoice-table th:last-child { text-align: left; }

@media print {
    .header, .footer, .mobile-bottom-nav, .back-to-top, .newsletter-section,
    .scroll-progress, .top-loader, .no-print, .side-cart, .side-cart-overlay { display: none !important; }
    .invoice-sheet { box-shadow: none; margin: 0; padding: 0; max-width: 100%; }
    body { background: #fff !important; }
}

/* ==========================================================================
   الحساب / المفضلة
   ========================================================================== */
.account-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.account-tab {
    padding: 11px 22px; border-radius: 99px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-light); font-weight: 700; cursor: pointer;
    transition: transform 0.28s var(--ease-out-back), background 0.28s, color 0.28s, border-color 0.28s;
}
.account-tab:hover { transform: translateY(-3px); }
.account-tab.is-active { background: var(--accent); color: #0f172a; border-color: var(--accent); }

/* ==========================================================================
   استجابة
   ========================================================================== */
@media (max-width: 992px) {
    .book-immersive-inner { grid-template-columns: 1fr; gap: 30px; }
    .book-hero-cover { max-width: 240px; margin: 0 auto; }
    .reviews-layout { grid-template-columns: 1fr; }
    .reviews-summary { position: static; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
}
@media (max-width: 600px) {
    .book-hero-actions { flex-direction: column; align-items: stretch; }
    .add-to-cart-form { width: 100%; }
    .btn-buy { flex: 1; justify-content: center; }
    .btn-icon-only { width: 100%; height: 48px; }
    .sticky-buy-bar .sbb-title { display: none; }
    .order-timeline { flex-direction: column; gap: 18px; }
    .order-timeline::before, .order-timeline::after { display: none; }
    .timeline-step { display: flex; align-items: center; gap: 14px; text-align: right; }
    .timeline-dot { margin: 0; }
    .invoice-sheet { padding: 24px; }
}

/* ==========================================================================
   حقول كلمة المرور
   ========================================================================== */
.password-wrap { position: relative; }
.password-wrap input { padding-inline-end: 48px; }
.toggle-pass {
    position: absolute; inset-inline-end: 8px; inset-block-start: 50%;
    transform: translateY(-50%); background: none; border: 0; cursor: pointer;
    color: var(--text-light); width: 34px; height: 34px; border-radius: 9px;
    transition: color 0.25s, background 0.25s;
}
.toggle-pass:hover { color: var(--accent); background: var(--bg-color); }
.pass-strength { height: 5px; background: var(--border); border-radius: 99px; margin: 9px 0 6px; overflow: hidden; }
.pass-strength span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 0.35s ease, background 0.35s ease; }

/* علامة النجاح بعد الطلب */
.success-check { animation: sa-zoom-in 0.6s var(--ease-out-back) both; }

/* ==========================================================================
   سطر السلة
   ========================================================================== */
.cart-line {
    display: flex; align-items: center; gap: 18px; padding: 18px; flex-wrap: wrap;
    transition: transform 0.35s var(--ease-out-back), box-shadow 0.35s ease;
}
.cart-line:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.cart-line-cover { width: 72px; height: 98px; border-radius: 10px; overflow: hidden; background: var(--bg-color); flex: 0 0 auto; }
.cart-line-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out-soft); }
.cart-line:hover .cart-line-cover img { transform: scale(1.08); }
.cart-line-body { flex: 1; min-width: 160px; }
.cart-line-title { font-weight: 800; font-size: 16px; color: var(--text); display: block; margin-bottom: 6px; }
.cart-line-title:hover { color: var(--accent); }
.cart-line-unit { color: var(--text-light); font-size: 13px; margin-top: 6px; }
.cart-line-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-light); padding: 3px 10px; border-radius: 99px; }
.cart-line-tag.is-warn { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.cart-line-total { font-weight: 900; font-size: 18px; color: var(--accent); min-width: 92px; text-align: left; }
.cart-qty-form { display: flex; align-items: center; gap: 8px; }
.qty-picker-light { background: var(--bg-color); border-color: var(--border); }
.qty-picker-light button, .qty-picker-light input { color: var(--text); height: 42px; }
.qty-picker-light button { width: 38px; }
.qty-picker-light input { width: 46px; }
.qty-picker-light button:hover { background: var(--border); }
.cart-update-btn {
    width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border);
    background: var(--bg-color); color: var(--text-light); cursor: pointer;
    transition: transform 0.3s var(--ease-out-back), background 0.25s, color 0.25s;
}
.cart-update-btn:hover { background: var(--accent); color: #0f172a; transform: rotate(180deg); }
@media (max-width: 640px) {
    .cart-line { gap: 12px; }
    .cart-line-total { min-width: 0; margin-inline-start: auto; }
}

/* ==========================================================================
   المؤلفون
   ========================================================================== */
.authors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.author-card {
    display: block; text-align: center; padding: 32px 24px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
    transition: transform 0.42s var(--ease-out-back), box-shadow 0.42s ease, border-color 0.35s ease;
    position: relative; overflow: hidden;
}
.author-card::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), #f1c40f);
    transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out-soft);
}
.author-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.author-card:hover::before { transform: scaleX(1); }
.author-avatar {
    width: 112px; height: 112px; margin: 0 auto 18px; border-radius: 50%;
    overflow: hidden; border: 3px solid var(--accent); background: var(--bg-color);
    display: grid; place-items: center;
    transition: transform 0.45s var(--ease-out-back);
}
.author-card:hover .author-avatar { transform: scale(1.07) rotate(-4deg); }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-initial {
    font-size: 42px; font-weight: 900; color: var(--accent);
    display: grid; place-items: center; width: 100%; height: 100%;
}
.author-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.author-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); font-weight: 700; }
.author-bio { color: var(--text-light); font-size: 14px; line-height: 1.8; margin: 12px 0 16px; }
.author-cta { color: var(--text-light); font-size: 13.5px; font-weight: 700; transition: color 0.3s, gap 0.3s; display: inline-flex; align-items: center; gap: 6px; }
.author-card:hover .author-cta { color: var(--accent); gap: 12px; }

.author-hero { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.author-hero-avatar {
    width: 168px; height: 168px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    border: 5px solid var(--accent); background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.5); display: grid; place-items: center;
}
.author-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-hero-info { flex: 1; min-width: 260px; color: #fff; }
.author-hero-info h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; margin-bottom: 12px; color: #fff; }
.author-hero-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.author-hero-stats span { color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 14.5px; }
.author-hero-stats i { color: var(--accent); margin-inline-end: 6px; }
.author-hero-bio { color: rgba(255, 255, 255, 0.78); line-height: 1.95; max-width: 780px; }

/* ==========================================================================
   Publishing request — editorial application experience
   ========================================================================== */
.publish-hero {
    position: relative; overflow: hidden; color: #fff; padding: 86px 0 100px;
    background:
        linear-gradient(90deg, rgba(16,26,49,.98) 0%, rgba(16,26,49,.88) 47%, rgba(16,26,49,.38) 100%),
        var(--cms-publish-header-image, url('../images/publishing-hero-v2.webp')) left center / cover no-repeat;
}
.publish-hero-pattern {
    position: absolute; inset: 0; opacity: .12; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to left, #000, transparent 76%);
}
.publish-hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 70px; }
.publish-kicker {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 19px;
    color: #ead69f; font-weight: 800; font-size: 14px;
}
.publish-hero h1 { color: #fff; font-size: clamp(44px, 5.8vw, 74px); line-height: 1.14; letter-spacing: -1.5px; margin-bottom: 23px; }
.publish-hero h1 em { color: var(--accent); font-style: normal; }
.publish-hero-copy > p { max-width: 680px; color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.95; }
.publish-hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.publish-hero-points span {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); font-size: 13px;
}
.publish-hero-points i { color: var(--accent); }
.publish-book-art { height: 370px; position: relative; perspective: 1000px; opacity: 0; pointer-events: none; }
.publish-book-page, .publish-book-cover {
    position: absolute; width: 245px; height: 340px; top: 10px; left: 50%; border-radius: 5px 15px 15px 5px;
}
.publish-book-page {
    background: #f5f0e4; transform: translateX(-47%) rotateY(-18deg) rotateZ(3deg);
    box-shadow: -24px 28px 45px rgba(0,0,0,.32);
}
.publish-book-cover {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 35px 24px;
    background: linear-gradient(155deg, #d0a43b, #a87d23); color: #101a31;
    transform: translateX(-54%) rotateY(-18deg) rotateZ(3deg); transform-origin: right center;
    box-shadow: inset 10px 0 18px rgba(0,0,0,.1); border-right: 8px solid #8d671b;
}
.publish-book-cover::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(16,26,49,.28); border-radius: 3px 10px 10px 3px; }
.publish-book-cover span, .publish-book-cover small, .publish-book-cover i { position: relative; }
.publish-book-cover span { font-size: 20px; font-weight: 900; }
.publish-book-cover i { font-size: 72px; opacity: .78; }
.publish-book-cover small { font-weight: 800; }

.publish-process { position: relative; z-index: 3; margin-top: -38px; }
.publish-process-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface);
    border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.publish-process article { display: flex; gap: 15px; align-items: center; padding: 22px 25px; border-inline-start: 1px solid var(--border); }
.publish-process article:first-child { border-inline-start: 0; }
.publish-process b { color: rgba(197,154,54,.45); font-size: 30px; line-height: 1; }
.publish-process h3 { font-size: 16px; margin-bottom: 3px; }
.publish-process p { color: var(--text-light); font-size: 13px; }

.publish-form-section { padding: 82px 0; }
.publish-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.5fr); align-items: start; gap: 52px; }
.publish-aside { position: sticky; top: 120px; padding-top: 26px; }
.publish-aside h2 { font-size: clamp(28px, 3vw, 39px); line-height: 1.35; margin-bottom: 18px; color: var(--text); }
.publish-aside > p { color: var(--text-light); line-height: 1.9; margin-bottom: 30px; }
.publish-privacy, .publish-contact-note { display: flex; gap: 13px; padding: 18px 0; border-top: 1px solid var(--border); }
.publish-privacy > i, .publish-contact-note > i {
    width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center;
    flex: 0 0 auto; background: var(--accent-light); color: var(--accent);
}
.publish-privacy div, .publish-contact-note div { display: flex; flex-direction: column; gap: 3px; }
.publish-privacy span, .publish-contact-note span { color: var(--text-light); font-size: 13px; line-height: 1.6; }

.publish-card {
    background: var(--surface); padding: clamp(25px, 4vw, 46px); border-radius: 19px;
    border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(16,26,49,.08);
}
.publish-card-head { margin-bottom: 31px; }
.publish-card-head > span { color: var(--accent); font-size: 13px; font-weight: 800; }
.publish-card-head h2 { color: var(--text); font-size: 29px; margin: 4px 0 7px; }
.publish-card-head p { color: var(--text-light); font-size: 14px; }
.publish-alert { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border-radius: 11px; margin-bottom: 24px; }
.publish-alert > i { font-size: 20px; margin-top: 2px; }
.publish-alert div { display: flex; flex-direction: column; gap: 2px; }
.publish-alert span { font-size: 13px; }
.publish-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.publish-alert-error { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.publish-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }
.publish-field { margin-bottom: 23px; }
.publish-field > label { display: block; color: var(--text); font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.publish-field > label b { color: #dc2626; }
.publish-input-wrap { position: relative; }
.publish-input-wrap > i {
    position: absolute; top: 50%; right: 15px; transform: translateY(-50%);
    color: #94a3b8; pointer-events: none;
}
.publish-input-wrap input, .publish-input-wrap select, .publish-field textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 11px; color: var(--text);
    background: var(--bg-color); font-family: inherit; font-size: 15px; outline: none; transition: .2s;
}
.publish-input-wrap input, .publish-input-wrap select { height: 49px; padding: 0 43px 0 14px; }
.publish-field textarea { min-height: 155px; padding: 15px; resize: vertical; line-height: 1.8; }
.publish-input-wrap input:focus, .publish-input-wrap select:focus, .publish-field textarea:focus {
    border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-light);
}
.publish-check { display: flex !important; align-items: center; gap: 7px; margin: 8px 2px 0 !important; color: var(--text-light) !important; font-weight: 600 !important; font-size: 12px !important; }
.publish-check input { accent-color: #16a34a; }
.publish-check i { color: #16a34a; font-size: 16px; }
.publish-field-hint { display: block; color: var(--text-light); font-size: 11px; margin-top: 6px; }
.publish-attachments { margin: 5px 0 25px; padding: 22px; border: 1px solid var(--border); border-radius: 13px; }
.publish-attachments legend { padding: 0 10px; color: var(--text); font-weight: 900; }
.publish-attachments legend i { color: var(--accent); margin-inline-end: 5px; }
.publish-attachments > p { color: var(--text-light); font-size: 13px; margin-bottom: 16px; }
.publish-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.publish-upload {
    min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer;
    border: 1px dashed #c8c1b3; border-radius: 11px; background: var(--bg-color); transition: .2s;
}
.publish-upload:hover, .publish-upload.has-file { border-color: var(--accent); background: var(--accent-light); }
.publish-upload input { position: absolute; opacity: 0; pointer-events: none; }
.publish-upload-icon {
    width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
    flex: 0 0 auto; font-size: 21px;
}
.publish-upload-icon.word { color: #2563eb; background: #dbeafe; }
.publish-upload-icon.pdf { color: #dc2626; background: #fee2e2; }
.publish-upload-copy { min-width: 0; display: flex; flex-direction: column; }
.publish-upload-copy strong { font-size: 13px; color: var(--text); }
.publish-upload-copy small { font-size: 10px; color: var(--text-light); }
.publish-upload-copy em {
    margin-top: 5px; color: var(--accent); font-size: 11px; font-weight: 800; font-style: normal;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.publish-honeypot {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.publish-submit { width: 100%; min-height: 52px; justify-content: center; }
.publish-consent { text-align: center; color: var(--text-light); font-size: 11px; line-height: 1.7; margin-top: 13px; }
.publish-consent i { color: #16a34a; margin-inline-end: 4px; }

@media (max-width: 900px) {
    .publish-hero { padding: 70px 0 92px; }
    .publish-hero-grid { grid-template-columns: 1fr; }
    .publish-book-art { display: none; }
    .publish-process-grid { grid-template-columns: 1fr; }
    .publish-process article { border-inline-start: 0; border-top: 1px solid var(--border); }
    .publish-process article:first-child { border-top: 0; }
    .publish-layout { grid-template-columns: 1fr; gap: 30px; }
    .publish-aside { position: static; padding-top: 0; }
}
@media (max-width: 620px) {
    .publish-hero { padding: 52px 0 78px; }
    .publish-hero h1 { font-size: 43px; }
    .publish-hero-copy > p { font-size: 16px; }
    .publish-process { margin-top: -25px; }
    .publish-process article { padding: 17px 19px; }
    .publish-form-section { padding: 52px 0; }
    .publish-fields-grid, .publish-upload-grid { grid-template-columns: 1fr; }
    .publish-card { border-radius: 14px; }
    .publish-attachments { padding: 17px; }
}

.status-page-kicker { display: inline-flex; align-items: center; gap: 8px; color: #f2d883; font-weight: 800; margin-bottom: 10px; }
.order-status-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.order-status-explainer > div {
    padding: 17px; display: grid; grid-template-columns: 36px 1fr; column-gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.order-status-explainer i { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-light); color: var(--accent); }
.order-status-explainer strong { font-size: 14px; }
.order-status-explainer span { color: var(--text-light); font-size: 11px; }
.order-status-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.order-status-form label { grid-column: 1 / -1; font-weight: 800; font-size: 14px; }
@media (max-width: 700px) {
    .order-status-explainer { grid-template-columns: 1fr; }
    .order-status-form { grid-template-columns: 1fr; }
    .order-status-form .btn { width: 100%; }
}

.contact-map {
    position: relative; margin-top: 40px; height: 340px; border-radius: 20px;
    overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); background: #e5e7eb;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.map-brand-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 13px 7px 8px;
    color: #fff; background: #101a31; border: 2px solid #c59a36; border-radius: 12px;
    box-shadow: 0 10px 25px rgba(16,26,49,.3); white-space: nowrap;
}
.map-brand-pin img, .map-brand-icon {
    width: 34px; height: 34px; object-fit: contain; display: grid; place-items: center;
    border-radius: 8px; padding: 4px; background: #fff; color: #101a31;
}
.map-brand-pin strong { font-size: 13px; }
.map-pin-point {
    position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px;
    background: #101a31; border-right: 2px solid #c59a36; border-bottom: 2px solid #c59a36;
    transform: translateX(-50%) rotate(45deg);
}
.map-open-link {
    position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px; border-radius: 9px; background: #fff; color: #101a31;
    box-shadow: 0 5px 18px rgba(16,26,49,.18); font-size: 12px; font-weight: 800;
}

/* هيدر موحّد للصفحات الداخلية — يمكن تغيير صورته من لوحة التحكم */
.page-banner-creative {
    min-height: 300px; padding: 72px 0 !important; display: grid; place-items: center;
    isolation: isolate; text-align: center; background-color: #101a31 !important;
    background-image:
        linear-gradient(90deg, rgba(16,26,49,.93), rgba(16,26,49,.68)),
        var(--cms-page-header-image, url('../images/editorial-home-v2.webp')) !important;
    background-size: cover !important; background-position: center 58% !important;
    border-bottom: 1px solid rgba(197,154,54,.25);
}
.page-banner-creative::before {
    inset: 0 !important; width: auto !important; height: auto !important; transform: none !important;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
    background-size: 48px 48px !important; opacity: .55;
}
.page-banner-creative::after {
    content: ""; position: absolute; inset: auto 50% 28px auto !important; width: 46px !important; height: 3px !important;
    transform: translateX(50%) !important; border-radius: 3px; background: #c59a36 !important; opacity: 1 !important;
}
.page-banner-creative .container { max-width: 920px; }
.page-banner-creative h1 {
    color: #fff !important; font-size: clamp(36px, 5vw, 58px) !important; line-height: 1.25;
    margin-bottom: 13px !important; letter-spacing: -.8px; text-shadow: 0 5px 25px rgba(0,0,0,.28) !important;
}
.page-banner-creative p { color: rgba(255,255,255,.78); max-width: 680px; margin-inline: auto; line-height: 1.85; }
.page-banner-creative .books-banner-search-form {
    display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 9px; max-width: 510px;
}
.page-banner-creative .books-banner-search-input { min-width: 0; width: 100%; }
.page-banner-creative .books-banner-search-btn {
    width: 52px !important; min-width: 52px; height: 52px; padding: 0 !important; border-radius: 13px;
}
.banner-authors { background-position: center 44% !important; }
.banner-about { background-position: center 35% !important; }
.banner-cart { background-position: center 70% !important; }
.banner-contact { background-position: center 52% !important; }
@media (max-width: 700px) {
    .page-banner-creative { min-height: 240px; padding: 54px 0 !important; }
    .page-banner-creative h1 { font-size: 34px !important; }
    .page-banner-creative .books-banner-search-form { grid-template-columns: minmax(0, 1fr) 48px; flex-direction: row; padding-inline: 0; }
    .page-banner-creative .books-banner-search-btn { width: 48px !important; min-width: 48px; height: 48px; }
}