/* ==========================================================================
   public/css/portal.css  —  بوابة الوكالات والموردين
   مؤسسة المنهل لنظم المعلومات  |  مشروع مباني رواف
   --------------------------------------------------------------------------
   يُقرأ بعد site.css ويستعمل متغيراته (ألوان رواف). صفحات فاتحة هادئة،
   والشريط العلوي فحمي كالموقع.
   ========================================================================== */

body.portal{ background:#F6F8F9; }
.p-top{ background:var(--charcoal); position:sticky; top:0; z-index:40; box-shadow:0 6px 18px -12px rgba(0,0,0,.6); }
.p-top-in{ display:flex; align-items:center; gap:1.2rem; height:66px; }
.p-top .nav-brand img{ height:42px; }
.p-nav{ display:flex; gap:.3rem; margin-inline-start:1rem; flex-wrap:wrap; }
.p-nav a{ color:rgba(255,255,255,.78); font-weight:600; font-size:.92rem; padding:.35rem .8rem; border-radius:999px; display:inline-flex; gap:.35rem; align-items:center; }
.p-nav a:hover{ color:var(--gold-light); background:rgba(239,211,163,.08); }
.p-nav a.on{ background:rgba(239,211,163,.14); color:var(--gold-light); }
.p-user{ margin-inline-start:auto; display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.85); font-size:.9rem; }
.p-user form{ margin:0; }
.p-user button{ background:none; border:1px solid rgba(239,211,163,.4); color:var(--gold-light); border-radius:999px; padding:.25rem .8rem; font:inherit; font-size:.85rem; cursor:pointer; }
.p-bell{ position:relative; color:var(--gold-light); font-size:1.2rem; }
.p-bell b{ position:absolute; top:-6px; inset-inline-end:-8px; background:#E0584B; color:#fff; font-size:.65rem; border-radius:999px; padding:0 .35rem; }
.cart-pill{ position:relative; }
.cart-pill b{ background:var(--gold); color:var(--charcoal); border-radius:999px; font-size:.72rem; padding:0 .45rem; }

.p-main{ padding:28px 0 60px; }
.p-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.p-head h1{ font-size:1.6rem; color:var(--teal-dark); font-weight:800; }
.p-head p{ margin:.2rem 0 0; color:var(--muted); }

/* بطاقات وإطارات */
.p-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem; margin-bottom:1.2rem; }
.p-card h2{ font-size:1.15rem; color:var(--teal-dark); margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; }
.p-card h2 i{ color:var(--gold); }

.flash{ padding:.8rem 1rem; border-radius:12px; margin-bottom:1rem; font-weight:700; display:flex; gap:.5rem; align-items:center; }
.flash.ok{ background:var(--teal-soft); color:var(--teal-dark); }
.flash.err{ background:#FDEDEC; color:#A93226; }
.flash.warn{ background:var(--gold-soft); color:#8A6317; border:1px solid #EFDFBB; }

/* الأزرار داخل البوابة */
.btn-teal{ display:inline-flex; align-items:center; gap:.45rem; background:var(--teal); color:#fff; border:0; border-radius:999px; padding:.6rem 1.3rem; font:inherit; font-weight:700; cursor:pointer; }
.btn-teal:hover{ background:var(--teal-dark); }
.btn-soft{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:.5rem 1.1rem; font:inherit; font-weight:600; cursor:pointer; }
.btn-soft:hover{ border-color:var(--gold); }
.btn-x{ background:none; border:0; color:#B03A2E; cursor:pointer; font-size:1.1rem; }

/* النماذج */
.f-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.2rem; }
.f-grid .all{ grid-column:1/-1; }
.f{ display:grid; gap:.35rem; font-weight:700; font-size:.9rem; color:var(--ink-2); }
.f input,.f select,.f textarea{
  font:inherit; font-weight:400; color:var(--ink); padding:.65rem .85rem;
  border:1px solid var(--line); border-radius:10px; background:#FAFBFC; width:100%;
}
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(201,160,99,.18); }
.f small{ font-weight:400; color:var(--muted); }
.f .err{ color:#B03A2E; font-weight:600; font-size:.82rem; }
.f .req{ color:#B03A2E; }
.f-sec{ grid-column:1/-1; font-size:1rem; color:var(--teal-dark); border-bottom:1px solid var(--line); padding-bottom:.4rem; margin-top:.6rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips label{ cursor:pointer; }
.chips input{ position:absolute; opacity:0; }
.chips span{ display:inline-flex; gap:.4rem; align-items:center; padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:700; color:var(--ink-2); }
.chips input:checked + span{ border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }

/* التسجيل */
.reg-wrap{ max-width:860px; margin-inline:auto; }
.reg-hero{ text-align:center; margin-bottom:1.4rem; }
.reg-hero img{ height:70px; margin:0 auto .6rem; }
.reg-hero h1{ color:var(--teal-dark); font-size:1.7rem; }
.reg-hero p{ color:var(--muted); margin:.3rem 0 0; }

/* رئيسية الوكالة */
.kind-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.4rem; }
.kind{
  display:flex; flex-direction:column; gap:.6rem; padding:1.4rem; border-radius:var(--r); color:#fff;
  background:linear-gradient(150deg, var(--teal-dark), #083B3B 60%, var(--charcoal)); position:relative; overflow:hidden;
  transition:transform .2s;
}
.kind:hover{ transform:translateY(-4px); }
.kind i.big{ font-size:2rem; color:var(--gold-light); }
.kind h3{ font-size:1.2rem; color:var(--gold-light); }
.kind span{ color:rgba(255,255,255,.75); font-size:.9rem; }

/* الكتالوج */
.cat-layout{ display:grid; grid-template-columns:260px 1fr; gap:1.4rem; align-items:start; }
.filters{ position:sticky; top:84px; }
.filters .f{ margin-bottom:.8rem; }
.hotels{ display:grid; gap:1rem; }
.hotel{
  display:grid; grid-template-columns:220px 1fr auto; gap:1.2rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:box-shadow .2s, border-color .2s;
}
.hotel:hover{ box-shadow:var(--shadow); border-color:#E3D3B6; }
.hotel-img{ background:var(--teal-soft) center/cover no-repeat; min-height:160px; display:grid; place-items:center; color:var(--teal); font-size:2.2rem; }
.hotel-body{ padding:1rem 0; }
.hotel-body h3{ font-size:1.15rem; color:var(--teal-dark); }
.stars{ color:#D4A437; letter-spacing:.1em; }
.meta{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; color:var(--muted); font-size:.88rem; margin:.3rem 0 .5rem; }
.meta i{ color:var(--gold); }
.hotel-body p{ color:var(--ink-2); font-size:.92rem; margin:0; }
.hotel-price{ padding:1rem 1.2rem; border-inline-start:1px solid var(--line); display:flex; flex-direction:column; align-items:end; justify-content:center; gap:.3rem; min-width:170px; text-align:end; }
.hotel-price small{ color:var(--muted); }
.hotel-price b{ font-size:1.4rem; color:var(--teal-dark); }
.locked{ color:var(--muted); font-size:.85rem; display:flex; gap:.3rem; align-items:center; }

/* صفحة المورد */
.gal{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:150px; gap:.5rem; margin-bottom:1.2rem; border-radius:var(--r); overflow:hidden; }
.gal a:first-child{ grid-row:span 2; }
.gal img{ width:100%; height:100%; object-fit:cover; }
.pkg-table{ width:100%; border-collapse:collapse; font-size:.93rem; }
.pkg-table th{ text-align:start; color:var(--muted); font-weight:700; font-size:.82rem; padding:.5rem; border-bottom:1px solid var(--line); }
.pkg-table td{ padding:.7rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.pkg-type{ display:inline-block; background:var(--gold-soft); color:#8A6317; border-radius:999px; padding:.1rem .7rem; font-weight:700; font-size:.82rem; }
.add-form{ display:none; background:#FAFBFC; }
.add-form.open{ display:table-row; }
.add-form form{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:end; padding:.4rem 0; }
.add-form .f{ min-width:130px; }

/* الطلبات */
.o-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.o-table th{ background:#FAFBFC; color:var(--muted); font-size:.82rem; font-weight:700; padding:.7rem; text-align:start; border-bottom:1px solid var(--line); }
.o-table td{ padding:.8rem .7rem; border-bottom:1px solid var(--line); }
.o-table tr:last-child td{ border-bottom:0; }
.st{ display:inline-block; border-radius:999px; padding:.15rem .75rem; font-size:.8rem; font-weight:700; background:var(--teal-soft); color:var(--teal-dark); }
.st.warn{ background:var(--gold-soft); color:#8A6317; }
.st.bad{ background:#FDEDEC; color:#A93226; }
.st.done{ background:#EEF1F3; color:var(--ink-2); }
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ position:relative; padding:0 1.6rem .9rem 0; border-inline-start:2px solid var(--line); margin-inline-start:.5rem; padding-inline-start:1.2rem; }
.timeline li::before{ content:""; position:absolute; inset-inline-start:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--gold); }
.timeline small{ color:var(--muted); }
.total-row{ display:flex; justify-content:space-between; align-items:center; font-weight:800; color:var(--teal-dark); font-size:1.1rem; padding-top:.8rem; }

.empty{ text-align:center; color:var(--muted); padding:2.5rem 1rem; }
.empty i{ font-size:2.4rem; color:#C9D6D5; display:block; margin-bottom:.4rem; }
.pager nav{ margin-top:1rem; }
.pager svg{ width:18px; }

@media (max-width:980px){
  .cat-layout{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .hotel{ grid-template-columns:140px 1fr; }
  .hotel-price{ grid-column:1/-1; border:0; border-top:1px solid var(--line); flex-direction:row; justify-content:space-between; align-items:center; }
  .kind-cards{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .p-nav{ display:none; }
  .p-nav.open{ display:flex; position:absolute; top:66px; inset-inline:0; background:var(--charcoal); flex-direction:column; padding:.6rem 16px 1rem; }
  .f-grid{ grid-template-columns:1fr; }
  .hotel{ grid-template-columns:1fr; }
  .hotel-img{ min-height:170px; }
  .hotel-body{ padding:0 1rem; }
  .gal{ grid-template-columns:1fr 1fr; grid-auto-rows:120px; }
  .o-table{ font-size:.85rem; }
  .p-user span{ display:none; }
}

/* ترقيم الصفحات (قالب Bootstrap 5 من Laravel بلا ملف Bootstrap في البوابة) */
.pager .pagination{ display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; padding:0; margin:1rem 0 0; }
.pager .page-link{ display:inline-block; padding:.35rem .8rem; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink-2); font-weight:600; }
.pager .active .page-link{ background:var(--teal); border-color:var(--teal); color:#fff; }
.pager .disabled .page-link{ opacity:.45; }
.pager p.small{ color:var(--muted); font-size:.85rem; margin:.4rem 0 0; }
.pager .d-sm-none{ display:none; }