@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&display=swap');

/* =========================================================
   IRAQ AI TEAM / BRCODE
   LISTMONK PUBLIC PAGES
   ========================================================= */

:root {

  /* BRCode */
  --br-dark: #10382F;
  --br-dark-2: #0D2F27;
  --br-green: #91E85A;
  --br-green-2: #51C800;

  /* Studio accents */
  --br-purple: #7F3FE4;
  --br-orange: #F08A13;
  --br-teal: #19996C;

  /* Iraq AI Team */
  --iat-blue: #0067C8;
  --iat-navy: #07172F;

  /* Neutral */
  --cream: #F7F5EF;
  --cream-2: #FBFAF7;
  --card: #FFFFFF;
  --text: #14251F;
  --muted: #738079;
  --border: #E2E7E3;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
  direction: rtl !important;
  background: var(--cream) !important;
}


body {
  direction: rtl !important;
  text-align: right !important;

  min-height: 100vh !important;

  margin: 0 !important;

  font-family:
    "Alexandria",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif !important;

  color: var(--text) !important;

  background:

    radial-gradient(
      circle at 8% 0%,
      rgba(127,63,228,.07),
      transparent 25%
    ),

    radial-gradient(
      circle at 92% 2%,
      rgba(145,232,90,.11),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #FCFBF8 0%,
      #F7F5EF 100%
    ) !important;
}


/* =========================================================
   PAGE ANIMATION
   ========================================================= */

main {
  animation: brcodeEnter .38s ease-out !important;
}


@keyframes brcodeEnter {

  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   TRUE CIRCULAR LOGO HOLDER
   ========================================================= */

.iraq-ai-logo-holder {

  width: 78px !important;
  height: 78px !important;

  min-width: 78px !important;
  min-height: 78px !important;

  max-width: 78px !important;
  max-height: 78px !important;

  margin:
    9px auto
    11px auto !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;

  border-radius: 50% !important;

  /* THIS physically cuts off square corners */
  overflow: hidden !important;

  background: #FFFFFF !important;

  border:
    3px solid #FFFFFF !important;

  outline:
    3px solid var(--br-green) !important;

  outline-offset:
    3px !important;

  box-sizing:
    border-box !important;

  box-shadow:
    0 0 0 6px var(--br-dark),
    0 10px 28px rgba(16,56,47,.22),
    0 0 22px rgba(145,232,90,.12) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}


/* Luxury hover */

.iraq-ai-logo-holder:hover {

  transform:
    translateY(-2px)
    scale(1.025) !important;

  box-shadow:
    0 0 0 6px var(--br-dark),
    0 0 0 8px rgba(145,232,90,.30),
    0 14px 34px rgba(16,56,47,.26) !important;
}


/* =========================================================
   LINK INSIDE HOLDER
   ========================================================= */

.iraq-ai-logo-holder > a {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;

  overflow: hidden !important;

  line-height: 0 !important;
}


/* =========================================================
   ACTUAL LOGO IMAGE
   ========================================================= */

.iraq-ai-logo-holder img,
.iraq-ai-team-logo,
img[alt*="العراقي"],
img[alt*="IRAQ AI TEAM"] {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 50% !important;

  object-fit: cover !important;
  object-position: center center !important;

  overflow: hidden !important;

  box-shadow: none !important;

  background: #FFFFFF !important;
}


/*
   FALLBACK:
   If JavaScript fails to make the holder,
   your branded logo itself is still circular.
*/

.iraq-ai-team-logo {

  width: 78px !important;
  height: 78px !important;

  max-width: 78px !important;
  max-height: 78px !important;

  margin:
    9px auto
    12px auto !important;

  border-radius:
    50% !important;

  object-fit:
    cover !important;

  clip-path:
    circle(50% at 50% 50%) !important;
}


/* =========================================================
   BRAND NAME
   ========================================================= */

.iraq-ai-brand-name {

  text-align: center !important;

  margin:
    12px auto
    22px auto !important;

  padding: 0 !important;
}


.iraq-ai-brand-ar {

  color:
    var(--br-dark) !important;

  font-size:
    13px !important;

  line-height:
    1.55 !important;

  font-weight:
    800 !important;
}


.iraq-ai-brand-en {

  color:
    #51736A !important;

  margin-top:
    3px !important;

  font-size:
    8px !important;

  line-height:
    1.4 !important;

  font-weight:
    700 !important;

  letter-spacing:
    1.8px !important;
}


/* =========================================================
   MAIN CARD / FORMS
   ========================================================= */

form,
.card,
.box {

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FCFBF8 100%
    ) !important;

  border:
    1px solid rgba(16,56,47,.08) !important;

  border-radius:
    20px !important;

  overflow:
    hidden !important;

  box-shadow:
    0 22px 60px rgba(16,56,47,.09),
    0 7px 20px rgba(16,56,47,.035) !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family:
    "Alexandria",
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif !important;

  color:
    var(--br-dark) !important;

  font-weight:
    800 !important;

  line-height:
    1.5 !important;

  letter-spacing:
    -.25px !important;
}


h1 {

  font-size:
    22px !important;

  margin-top:
    8px !important;

  margin-bottom:
    11px !important;
}


h2 {
  font-size:
    18px !important;
}


h3 {
  font-size:
    15px !important;
}


/* =========================================================
   TEXT
   ========================================================= */

p {

  color:
    var(--muted) !important;

  font-size:
    13px !important;

  line-height:
    1.9 !important;
}


label {

  color:
    var(--br-dark) !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {

  width:
    100% !important;

  box-sizing:
    border-box !important;

  background:
    #FFFFFF !important;

  color:
    var(--text) !important;

  border:
    1px solid #DCE4DF !important;

  border-radius:
    11px !important;

  padding:
    11px 13px !important;

  font-size:
    13px !important;

  outline:
    none !important;

  box-shadow:
    inset 0 1px 2px rgba(16,56,47,.02) !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease !important;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {

  border-color:
    var(--br-green-2) !important;

  box-shadow:
    0 0 0 4px rgba(81,200,0,.09),
    0 6px 18px rgba(16,56,47,.05) !important;
}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

input[type="checkbox"],
input[type="radio"] {

  accent-color:
    var(--br-green-2) !important;

  transform:
    scale(1.06);
}


/* =========================================================
   MAIN BUTTON
   ========================================================= */

button,
input[type="submit"],
input[type="button"],
.btn,
.button {

  border:
    0 !important;

  border-radius:
    999px !important;

  padding:
    12px 25px !important;

  background:
    linear-gradient(
      135deg,
      var(--br-green) 0%,
      #72DB41 100%
    ) !important;

  color:
    var(--br-dark) !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  cursor:
    pointer !important;

  box-shadow:
    0 9px 22px rgba(81,200,0,.18),
    inset 0 1px 0 rgba(255,255,255,.45) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease !important;
}


button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover {

  transform:
    translateY(-2px) !important;

  box-shadow:
    0 13px 30px rgba(81,200,0,.24),
    inset 0 1px 0 rgba(255,255,255,.50) !important;

  filter:
    brightness(1.02) !important;
}


/* =========================================================
   DANGER ACTIONS
   ========================================================= */

button.danger,
.btn-danger,
.button-danger {

  background:
    linear-gradient(
      135deg,
      #E95151,
      #C93636
    ) !important;

  color:
    #FFFFFF !important;

  box-shadow:
    0 9px 22px rgba(201,54,54,.18) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {

  color:
    #177154 !important;

  text-decoration:
    none !important;

  font-weight:
    700 !important;

  transition:
    color .18s ease !important;
}


a:hover {

  color:
    var(--br-green-2) !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

hr {

  height:
    1px !important;

  border:
    0 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16,56,47,.12),
      transparent
    ) !important;

  margin:
    23px 0 !important;
}


/* =========================================================
   ALERTS / NOTIFICATIONS
   ========================================================= */

.alert,
.notification,
.message {

  border-radius:
    13px !important;

  border:
    1px solid rgba(81,200,0,.15) !important;

  background:
    #FAFFF7 !important;

  box-shadow:
    0 7px 22px rgba(16,56,47,.045) !important;
}


/* =========================================================
   OPTIONAL BRCODE ACCENT LINE
   ========================================================= */

form::before,
.card::before,
.box::before {

  content:
    "" !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    4px !important;

  background:
    linear-gradient(
      90deg,
      var(--br-purple) 0%,
      var(--iat-blue) 28%,
      var(--br-teal) 52%,
      var(--br-green) 76%,
      var(--br-orange) 100%
    ) !important;
}


/* =========================================================
   REMOVE LISTMONK BRANDING
   ========================================================= */

a[href*="listmonk"],
a[href*="github.com/knadh/listmonk"] {

  display:
    none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 600px) {

  body {

    padding-left:
      9px !important;

    padding-right:
      9px !important;
  }


  .iraq-ai-logo-holder {

    width:
      66px !important;

    height:
      66px !important;

    min-width:
      66px !important;

    min-height:
      66px !important;

    max-width:
      66px !important;

    max-height:
      66px !important;

    margin-top:
      8px !important;

    box-shadow:
      0 0 0 5px var(--br-dark),
      0 0 0 7px var(--br-green),
      0 8px 21px rgba(16,56,47,.18) !important;
  }


  .iraq-ai-team-logo {

    width:
      66px !important;

    height:
      66px !important;

    max-width:
      66px !important;

    max-height:
      66px !important;
  }


  .iraq-ai-brand-name {

    margin-bottom:
      17px !important;
  }


  .iraq-ai-brand-ar {

    font-size:
      11px !important;
  }


  .iraq-ai-brand-en {

    font-size:
      7px !important;

    letter-spacing:
      1.3px !important;
  }


  h1 {

    font-size:
      20px !important;
  }


  h2 {

    font-size:
      17px !important;
  }


  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .button {

    width:
      100% !important;

    text-align:
      center !important;
  }
}