/* =====================================================================
   ادعيلي — style.css
   =====================================================================
   ملاحظة عشان تفهم فكرة الملف: بنستخدم "متغيرات CSS" (variables) في
   الأول، زي ما بتعمل في أي كود، عشان لو حبيت تغير لون بعدين، تغيره
   مرة واحدة هنا وهو يتغير في كل الموقع بدل ما تدور على كل مكان.
   ===================================================================== */

:root {
  /* الألوان الأساسية */
  --bg: #1b2333;        /* خلفية الموقع كله: كحلي غامق (زي ليل) */
  --bg-soft: #232c40;   /* لون أفتح شوية، للأقسام المتقسمة */
  --paper: #f4efe1;     /* لون "الورقة" اللي بيتكتب عليها كل دعوة */
  --ink: #1b2333;       /* لون الكتابة فوق الورق (نفس لون الخلفية بالظبط) */
  --cream-text: #f4efe1;/* لون الكتابة فوق الخلفية الغامقة */
  --gold: #c9a227;      /* اللون المميز: للأزرار والعناوين المهمة */
  --rose: #b5566a;      /* لون تاني مميز: لشارة المناسبة والتفاصيل الصغيرة */
  --muted: #8b93a7;     /* لون رمادي مايل للكحلي، للكلام الثانوي */

  /* الخطوط */
  --font-display: "Reem Kufi", sans-serif;     /* للعناوين الكبيرة */
  --font-body: "IBM Plex Sans Arabic", sans-serif; /* لكل الكلام العادي */
}

/* ---------- إعدادات عامة ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream-text);
  font-family: var(--font-body);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 0.5em 0;
}

a {
  color: var(--gold);
}

/* ---------- الهيدر ---------- */
.site-header {
  padding: 1.5rem 6vw;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream-text);
  text-decoration: none;
}

/* ---------- الأزرار ---------- */
.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gold);
  color: var(--bg);
}

/* زرار تسجيل الدخول بجوجل: سيبناه أبيض قياسي زي المتعارف عليه
   عالميًا -- ده أوضح وأسهل تمييز، وبيدّي كنتراست حلو فوق الكارت
   الغامق من غير ما نحتاج نلوّنه بلون تاني */
.btn-google {
  background: #fff;
  color: #3c4043;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  justify-content: center;
}

.btn-google:hover {
  transform: translateY(-2px);
}

/* الكارت اللي بيحمل خطوات عمل الصفحة: غامق متناسق مع باقي
   الموقع، بس بلمسة "خطاب" بسيطة -- حدّ ذهبي خفيف + ركنة مطوية
   في الزاوية العلوية، من غير ما نكسر هوية الألوان الليلية */
.create-card {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 10px;
  padding: 2.2rem 1.8rem 1.8rem;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* ركنة "مطوية" زي خطاب ورقي، بلون ذهبي خفيف */
.create-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28px 28px 0 0;
  border-color: rgba(201, 162, 39, 0.5) transparent transparent transparent;
}

.create-card .step-hint {
  color: var(--muted);
}

.create-card #signed-in-name {
  color: var(--gold);
  font-weight: 700;
}

.step-hint {
  color: var(--muted);
  margin-bottom: 1rem;
}

.checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem;
  color: var(--cream-text) !important;
  cursor: pointer;
}

.checkbox-row input {
  width: auto;
}

/* ---------- قسم الهيرو ---------- */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
  padding: 3rem 6vw 5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-text {
  flex: 1 1 380px;
  max-width: 46ch;
}

.hero-text h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.25;
}

.hero-sub {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* حاوية الكروت الورقية اللي في الهيرو */
.hero-notes {
  position: relative;
  flex: 1 1 320px;
  min-height: 320px;
}

/* شكل كل "ورقة" دعوة: خلفية بيج، دوران خفيف، ظل زي الورق الحقيقي */
.note {
  position: absolute;
  width: 240px;
  background: var(--paper);
  color: var(--ink);
  padding: 1.4rem 1.3rem 1.1rem;
  border-radius: 2px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.95rem;
}

.note p {
  margin: 0 0 0.6rem;
}

.note-from {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  color: #6a6252;
}

.note-1 { top: 0; right: 10%; transform: rotate(-6deg); z-index: 3; }
.note-2 { top: 90px; right: 38%; transform: rotate(4deg); z-index: 2; }
.note-3 { top: 190px; right: 5%; transform: rotate(-2deg); z-index: 1; }

/* ---------- قسم إزاي بيشتغل ---------- */
.how {
  background: var(--bg-soft);
  padding: 4rem 6vw;
}

.how h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
}

.how-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.how-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.how-steps h3 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.how-steps p {
  color: var(--muted);
  margin: 0;
}

/* ---------- قسم عمل الصفحة (الفورم) ---------- */
.create {
  padding: 4rem 6vw;
  max-width: 480px;
  margin: 0 auto;
}

.create h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/* ---------- الفورمات (مشتركة بين create و wish) ---------- */
.board-form,
.wish-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.board-form label,
.wish-form label {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.8rem;
}

.board-form input,
.wish-form input,
.wish-form textarea {
  background: var(--bg-soft);
  border: 1px solid #38425a;
  border-radius: 4px;
  padding: 0.8rem;
  color: var(--cream-text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.board-form input:focus,
.wish-form input:focus,
.wish-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.slug-row {
  display: flex;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid #38425a;
  border-radius: 4px;
  overflow: hidden;
}

.slug-row .slug-prefix {
  padding: 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.slug-row input {
  border: none;
  background: transparent;
  flex: 1;
  direction: ltr;
  text-align: right;
}

.board-form button,
.wish-form button {
  margin-top: 1.5rem;
}

.form-msg {
  min-height: 1.4em;
  font-size: 0.9rem;
  color: var(--rose);
}

/* ---------- صفحة استقبال الدعاوى (board-view) ---------- */
#board-view {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 6vw 5rem;
  text-align: center;
}

.board-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.board-sub {
  color: var(--muted);
}

.occasion-badge {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.5rem 1.2rem;
  background: var(--rose);
  color: var(--cream-text);
  border-radius: 999px;
  font-size: 0.9rem;
}

/* ---------- بوت "أمل": الدعوة الافتراضية للصفحات الفاضية ---------- */
.bot-wish {
  margin-top: 2rem;
}

.bot-wish-intro {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.bot-wish-intro-sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* بنستخدم نفس شكل .note (الورقة المايلة) بتاع الهيرو، بس هنا
   ثابتة مش absolute، عشان تتحط في السياق العادي للصفحة */
.bot-note {
  position: static;
  display: inline-block;
  transform: rotate(-2deg);
  margin: 0 auto;
  text-align: right;
}

.wish-section {
  text-align: right;
  margin-top: 2rem;
}

.wish-success {
  text-align: center;
  padding: 3rem 1rem;
}

.wish-success p {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.wish-success span {
  color: var(--muted);
}

/* حركة بسيطة واحدة بس: ظهور رسالة النجاح، مش حركات كتير في كل حتة */
.wish-success:not([hidden]) {
  animation: rise 0.5s ease;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .wish-success:not([hidden]) {
    transition: none;
    animation: none;
  }
}

/* ---------- الفوتر ---------- */
.site-footer {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- الموبايل ---------- */
@media (max-width: 640px) {
  .hero {
    padding-top: 1rem;
  }
  .hero-notes {
    min-height: 260px;
  }
  .note {
    width: 190px;
  }
}