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

/* ---------------- Reset / Base ---------------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Tajawal','Amiri',sans-serif;
  color:#fff;
  background:#181b24;
  min-height:100svh;
  display:grid; place-items:center;
  overflow-x:hidden;
}

/* ---------------- Background scene (isolated) ---------------- */
.scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }

.drop{
  position:absolute;
  left:50%;
  bottom:5vh;
  width:1px; height:100vh;
  transform:translate3d(calc(-50% + var(--tx,0)),0,var(--tz,0));
  background-image:linear-gradient(transparent 95vh,#def3);
  animation:drop 12s var(--delay,0s) ease-in infinite;
  transform-style:preserve-3d;
  pointer-events:none;
}
.drop::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:60vmin; height:60vmin;
  background-image:radial-gradient(closest-side,transparent,#def,transparent,#eff,transparent,#def,transparent);
  animation:waves 12s calc(var(--delay,0s) - .36s) linear infinite;
  pointer-events:none;
}

@keyframes drop{
  0%,75%{background-position-y:5vh}
  100%  {background-position-y:105vh}
}
@keyframes waves{
  0%   {transform:translate(-50%,50%) rotateX(-90deg) scale(0); opacity:.05}
  100% {transform:translate(-50%,50%) rotateX(-90deg) scale(2); opacity:0}
}

/* Rain drop positions */
.drop:nth-child(1)  { --delay:   0s;   --tx: -58vmin; --tz: -8vmin; }
.drop:nth-child(2)  { --delay: -.25s;  --tx:  54vmin; --tz: 12vmin; }
.drop:nth-child(3)  { --delay: -.5s;   --tx: -46vmin; --tz: -6vmin; }
.drop:nth-child(4)  { --delay: -.75s;  --tx:  40vmin; --tz: 15vmin; }
.drop:nth-child(5)  { --delay: -1s;    --tx: -34vmin; --tz: -12vmin; }
.drop:nth-child(6)  { --delay: -1.25s; --tx:  28vmin; --tz:  9vmin; }
.drop:nth-child(7)  { --delay: -1.5s;  --tx: -22vmin; --tz: -5vmin; }
.drop:nth-child(8)  { --delay: -1.75s; --tx:  16vmin; --tz:  6vmin; }
.drop:nth-child(9)  { --delay: -2s;    --tx: -10vmin; --tz: -4vmin; }
.drop:nth-child(10) { --delay: -2.25s; --tx:   4vmin; --tz:  4vmin; }
.drop:nth-child(11) { --delay: -2.5s;  --tx:  60vmin; --tz:  0vmin; }
.drop:nth-child(12) { --delay: -2.75s; --tx: -52vmin; --tz:  8vmin; }
.drop:nth-child(13) { --delay: -3s;    --tx:  44vmin; --tz: -7vmin; }
.drop:nth-child(14) { --delay: -3.25s; --tx: -38vmin; --tz: 14vmin; }
.drop:nth-child(15) { --delay: -3.5s;  --tx:  32vmin; --tz: -10vmin; }
.drop:nth-child(16) { --delay: -3.75s; --tx: -26vmin; --tz: 10vmin; }
.drop:nth-child(17) { --delay: -4s;    --tx:  20vmin; --tz: -8vmin; }
.drop:nth-child(18) { --delay: -4.25s; --tx: -14vmin; --tz:  6vmin; }
.drop:nth-child(19) { --delay: -4.5s;  --tx:   8vmin; --tz: -4vmin; }
.drop:nth-child(20) { --delay: -4.75s; --tx:  -2vmin; --tz:  4vmin; }
.drop:nth-child(21) { --delay: -5s;    --tx:  56vmin; --tz:  6vmin; }
.drop:nth-child(22) { --delay: -5.25s; --tx: -48vmin; --tz: -9vmin; }
.drop:nth-child(23) { --delay: -5.5s;  --tx:  42vmin; --tz: 18vmin; }
.drop:nth-child(24) { --delay: -5.75s; --tx: -36vmin; --tz: -11vmin; }
.drop:nth-child(25) { --delay: -6s;    --tx:  30vmin; --tz: 12vmin; }
.drop:nth-child(26) { --delay: -6.25s; --tx: -24vmin; --tz: -6vmin; }
.drop:nth-child(27) { --delay: -6.5s;  --tx:  18vmin; --tz:  8vmin; }
.drop:nth-child(28) { --delay: -6.75s; --tx: -12vmin; --tz: -3vmin; }
.drop:nth-child(29) { --delay: -7s;    --tx:   6vmin; --tz:  3vmin; }
.drop:nth-child(30) { --delay: -7.25s; --tx:  -6vmin; --tz: -2vmin; }
.drop:nth-child(31) { --delay: -7.5s;  --tx:  12vmin; --tz:  2vmin; }
.drop:nth-child(32) { --delay: -7.75s; --tx: -18vmin; --tz: -7vmin; }
.drop:nth-child(33) { --delay: -8s;    --tx:  24vmin; --tz:  9vmin; }
.drop:nth-child(34) { --delay: -8.25s; --tx: -30vmin; --tz: -5vmin; }
.drop:nth-child(35) { --delay: -8.5s;  --tx:  36vmin; --tz: 11vmin; }
.drop:nth-child(36) { --delay: -8.75s; --tx: -42vmin; --tz: -9vmin; }
.drop:nth-child(37) { --delay: -9s;    --tx:  48vmin; --tz:  7vmin; }
.drop:nth-child(38) { --delay: -9.25s; --tx: -56vmin; --tz: -12vmin; }
.drop:nth-child(39) { --delay: -9.5s;  --tx:   2vmin; --tz:  5vmin; }
.drop:nth-child(40) { --delay: -9.75s; --tx:  -8vmin; --tz: -5vmin; }
.drop:nth-child(41) { --delay: -10s;   --tx:  14vmin; --tz:  7vmin; }
.drop:nth-child(42) { --delay: -10.25s;--tx: -20vmin; --tz: -7vmin; }
.drop:nth-child(43) { --delay: -10.5s; --tx:  26vmin; --tz:  9vmin; }
.drop:nth-child(44) { --delay: -10.75s;--tx: -32vmin; --tz: -9vmin; }
.drop:nth-child(45) { --delay: -11s;   --tx:  38vmin; --tz: 11vmin; }
.drop:nth-child(46) { --delay: -11.25s;--tx: -44vmin; --tz: -11vmin; }
.drop:nth-child(47) { --delay: -11.5s; --tx:  50vmin; --tz: 13vmin; }
.drop:nth-child(48) { --delay: -11.75s;--tx: -60vmin; --tz: -13vmin; }

/* ---------------- Content ---------------- */
.container{
  position:relative; z-index:1;
  width:min(880px,92vw);
  margin:0 auto;
  padding:24px 18px 32px;
}

.profile-section{ text-align:center; margin-bottom:24px; }
.rounded-avatar{
  width:128px; height:128px; border-radius:50%;
  display:block; margin:0 auto 18px;
  box-shadow:0 0 0 3px #1f232e; background-color:#1f232e !important;
  object-fit:cover;
}

.title{ font-size:28px; font-weight:700; margin-bottom:12px; }
.subtitle{
  font-size:16px; line-height:1.7; color:rgba(255,255,255,.9);
  margin-bottom:24px;
}

.section-title {
  font-size:22px; font-weight:600; margin:32px 0 16px;
  text-align:center; color:#fff;
  position:relative;
}
.section-title::after {
  content:''; position:absolute; bottom:-4px; left:50%;
  transform:translateX(-50%); width:40px; height:2px;
  background:linear-gradient(90deg,transparent,#25d366,transparent);
}

.links-container{
  display:flex; flex-direction:column; gap:15px;
  isolation:isolate; contain:paint;
  margin-bottom:24px;
}
.link-item{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 20px; border-radius:16px;
  text-decoration:none; color:#fff; font-weight:600; font-size:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  backface-visibility:hidden; transform:translateZ(0);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.15);
}
.link-item::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-120%); transition:transform .6s ease;
  pointer-events:none;
}
.link-item:hover,.news-item:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.35); filter:brightness(1.02) }
.link-item:hover::before{ transform:translateX(120%) }

/* colored variants */
.whatsapp{ background:linear-gradient(135deg,#25d366,#128c7e); border-color:transparent }
.instagram{ background:linear-gradient(135deg,#f56040,#e1306c,#c13584,#833ab4); border-color:transparent }
.maps{ background:linear-gradient(135deg,#34a853,#4285f4); border-color:transparent }
.news{ background:linear-gradient(135deg,#ff6b6b,#ee5a24); border-color:transparent }
.membership{ background:linear-gradient(135deg,#feca57,#ff9ff3); border-color:transparent }

.icon{ width:24px; height:24px; fill:currentColor }

/* News & Offers Section */
.news-section {
  background:rgba(255,255,255,.08);
  border-radius:16px;
  padding:20px;
  margin:24px 0;
  border:1px solid rgba(255,255,255,.1);
}

.news-item{
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
  border-left:4px solid #25d366;
}
.news-item,.link-item{
  cursor: pointer;
}
.news-item:last-child { margin-bottom:0 }

.news-item h3 {
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
  color:#fff;
}

.news-item p {
  font-size:14px;
  color:rgba(255,255,255,.8);
  line-height:1.5;
  margin-bottom:6px;
}

.news-date {
  font-size:12px;
  color:rgba(255,255,255,.6);
  font-style:italic;
}

/* Membership Section */
.membership-section {
  background:rgba(255,255,255,.08);
  border-radius:16px;
  padding:20px;
  margin:24px 0;
  border:1px solid rgba(255,255,255,.1);
  text-align:center;
}

.membership-benefits {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  margin:20px 0;
}

.benefit-item {
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:12px;
}

.benefit-icon {
  width:32px; height:32px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.benefit-text {
  font-size:14px;
  color:rgba(255,255,255,.9);
}

.email-input {
  width:100%;
  max-width:300px;
  margin:20px auto;
  display:flex;
  gap:8px;
}

.email-input input {
  flex:1;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:14px;
}

.email-input input::placeholder {
  color:rgba(255,255,255,.6);
}

.email-input button {
  padding:12px 20px;
  border-radius:12px;
  border:none;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
}

.email-input button:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(37,211,102,.3);
}


    /* Career Section */
    .career-section {
      background:rgba(255,255,255,.08);
      border-radius:16px;
      padding:20px;
      margin:24px 0;
      border:1px solid rgba(255,255,255,.1);
      text-align:center;
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:all .5s ease;
    }

    .career-section.active {
      max-height:2000px;
      opacity:1;
      margin:24px 0;
    }

    .career-form {
      display:grid;
      gap:20px;
      margin-top:20px;
    }

    .form-group {
      display:flex;
      flex-direction:column;
      gap:8px;
      text-align:right;
    }

    .form-group label {
      font-weight:600;
      font-size:14px;
      color:rgba(255,255,255,.9);
    }

    .form-group input, .form-group textarea {
      padding:12px 16px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.1);
      color:#fff;
      font-size:14px;
      font-family:inherit;
    }

    .form-group input::placeholder, .form-group textarea::placeholder {
      color:rgba(255,255,255,.6);
    }

    .form-group textarea {
      min-height:100px;
      resize:vertical;
    }

    .file-upload-wrapper {
      position:relative;
      display:inline-block;
      width:100%;
    }

    .file-upload-input {
      position:absolute;
      opacity:0;
      width:100%;
      height:100%;
      cursor:pointer;
    }

    .file-upload-button {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 16px;
      border-radius:12px;
      border:2px dashed rgba(255,255,255,.3);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.8);
      font-size:14px;
      cursor:pointer;
      transition:all .3s ease;
    }

    .file-upload-button:hover {
      border-color:rgba(255,255,255,.5);
      background:rgba(255,255,255,.1);
    }

    .file-name {
      margin-top:8px;
      font-size:12px;
      color:rgba(255,255,255,.7);
      font-style:italic;
    }

    .submit-button {
      padding:16px 24px;
      border-radius:12px;
      border:none;
      background:linear-gradient(135deg,#667eea,#764ba2);
      color:#fff;
      font-weight:600;
      font-size:16px;
      cursor:pointer;
      transition:all .3s ease;
      margin-top:20px;
    }

    .submit-button:hover {
      transform:translateY(-2px);
      box-shadow:0 8px 25px rgba(102,126,234,.3);
    }

    
    
    /* --- FIX: keep .form-group inside .career-section --- */
.career-section .career-form > .form-group {
  min-width: 0;       /* CRITICAL: allow shrinking inside grid */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.career-section .career-form > .form-group input,
.career-section .career-form > .form-group textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* (optional) prevent long text from pushing width */
.career-section .career-form > .form-group,
.career-section .career-form > .form-group * {
  overflow-wrap: anywhere;
}


/* Contain the grid child */
.career-section .form-group.recaptcha{
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  justify-content:flex-end;  /* RTL */
  overflow:hidden;           /* hide any residual overflow */
}

/* Scale the v2 widget when viewport is narrow */
.career-section .form-group.recaptcha .g-recaptcha{
  transform-origin: right top;   /* RTL anchor */
}


/* Inputs still full-width inside the same group */
.career-section .form-group.recaptcha input,
.career-section .form-group.recaptcha textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}



/* --- FIX honeypot input pushing layout horizontally --- */
/* Add at the END of app.css (no deletions needed) */
.career-section .career-form input[name="website"][type="text"]{
  position: absolute !important;
  left: auto !important;            /* override inline left:-9999px */
  right: auto !important;           /* keep neutral in RTL/LTR */
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;  /* not focusable/clickable */
}

/* Contain any residual off-canvas content from third-party widgets */
.career-section{
  overflow-x: clip;                  /* fallback below for older browsers */
}
@supports not (overflow-x: clip){
  .career-section{ overflow-x: hidden; }
}
#careerForm > div:nth-child(5) > div > div,
.form-group .g-recaptcha iframe {
    width: 100% !important;
}

 
         .contact-section { margin-top: 24px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 16px; }
         .contact-section .form-group { display: grid; gap: 8px; margin-bottom: 12px; }
         .contact-section input, .contact-section textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.9); color: #222; }
         .contact-section input:focus, .contact-section textarea:focus { outline: none; border-color: #111; }
         .contact-section .form-actions { display:flex; justify-content:flex-start; }
         .form-status { margin-top: 8px; font-size: 14px; color: #fff; }
 
  /* —— Enhanced, readable offer cards (keeps your .news-item/.news-date) —— */
  .news-item.offer-card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    border-radius:16px;
    padding:18px 16px;
    margin-bottom:14px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
  }
  .offer-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom:10px;
  }
  .offer-title{
    font-size:18px; font-weight:700; letter-spacing:.2px;
  }
  .offer-badge{
    font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px;
    background:linear-gradient(135deg,#25d366,#128c7e); color:#0b2619;
    color:#fff; box-shadow:0 6px 20px rgba(37,211,102,.25);
    white-space:nowrap;
  }
    span.offer-badge.offer-action {
        width: 60%;
        display: flex;
        text-align: center;
        margin: 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 40px;
    }
     span.offer-badge.offer-action strong {padding: 6px 7px 0;}
  .deal{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 20px; border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px dashed rgba(255,255,255,.12);
    margin-bottom:10px;
    margin-right: 50px;
  }
  .deal:last-child{ margin-bottom:0 }
  .deal .titles{ line-height:1.5 }
  .deal .titles .ar{ font-size:15px; color:#fff; font-weight:600 }
  .deal .titles .en{ font-size:13px; color:rgba(255,255,255,.75) }

  .deal .price{
    text-align:left; white-space:nowrap; padding-top:2px;
    display:flex; align-items:center; gap:8px;
  }
  .price .new{
    font-weight:800; font-size:16px;
    color:#2fe290;  
  }
  .price .old,  .price .oldprice{
    font-size:13px; color:rgba(255,255,255,.55);
    text-decoration:line-through;
  }
   .price .oldprice{ 
    text-decoration:unset;
    margin-left: 5px;
   }
  .price .save{
    font-size:12px; padding:4px 8px; border-radius:999px;
    background:linear-gradient(135deg, #2fe290, #1fb874);
    color:#072b1b; color:#072b1b00; color:#062716; /* keep contrast strong */
    color:#0b2619; color:#fff;
    box-shadow:0 4px 16px rgba(47,226,144,.25);
    display: none;
  }

  /* subtle separators between logical groups in a card */
  .group-divider{
    height:1px; margin:8px 0; border:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  }

  .news-item .subnote{
    font-size:10px; color:rgba(255,255,255,.66); font-style:italic; margin-top:8px;
    text-align:center;
    margin-bottom: 5px;
  }
.offer-header h5 {
    font-weight: 100;
    color: #a9a9a9;
} 

        .oldsection {display: -webkit-inline-box;}
        
          
a.offer-badge.offer-action {
    width: 50%;
    position: relative;
    display: flex;
    text-align: center;
    margin: 0 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}   
a.offer-badge.offer-action strong {
        margin: 4px 8px 0 0;
}
a.offer-badge.offer-action svg {
    width: auto;
    max-height: 15px;
}

#consent-banner {
position: fixed;
    bottom: 0;
    left: 0;
    background: #191b24;
    color: #636363;
    border-top: 3px solid #c6a45a;
    padding: 15px 20px; 
    font-size: 14px;
    display: none;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.4s ease-in-out;
    width: 20%;
    text-align: center;
}
#consent-banner p {
  margin: 0 0 8px;
  line-height: 1.4;
}
#consent-buttons {
  display: flex;
  gap: 10px;
}
#consent-buttons button {
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}
#consent-accept {
  background: #c6a45a;
  color: #fff;
}
#consent-reject {
  background: #eee;
  color: #333;
}
@keyframes fadeIn {
  from {opacity:0; transform: translateY(20px);}
  to {opacity:1; transform: translateY(0);}
}

  /* tiny responsive nudge for small screens */
  @media (max-width:520px){
      a.offer-badge.offer-action {
    width: 100%;
      }
    .deal{ flex-direction:column; align-items:stretch }
    .deal .price{ justify-content: center; }
        .deal {
        margin-right: 0px;
                padding: 12px 5px !important;
        text-align: center;
    }
    span.offer-badge.offer-action {
    width: 100%;
    }
    .news-section { 
        background: unset;
    border: unset;
    width: 100%;
    padding: 0 !important;
}
.offer-header {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
}
.deal .price { 
    flex-direction: row-reverse;
}

#consent-banner { 
    background: #303030;
    color: #a3a3a3; 
    width: 100%; 
}

  } 
  
/* Breakpoint scales (tweak as needed) */
@media (max-width: 360px){
  .career-section .form-group.recaptcha .g-recaptcha{ transform: scale(.88); }
}
@media (max-width: 340px){
  .career-section .form-group.recaptcha .g-recaptcha{ transform: scale(.82); }
}
@media (max-width: 320px){
  .career-section .form-group.recaptcha .g-recaptcha{ transform: scale(.78); }
} 


    /* ---------------- Responsive tweaks ---------------- */
    @media (max-width:480px){
      .container{ padding:20px 14px 28px }
      .title{ font-size:24px }
      .subtitle{ font-size:14px }
      .section-title{ font-size:20px }
      .link-item{ padding:14px 16px; font-size:15px }
      .rounded-avatar{ width:110px; height:110px }
      .news-section, .membership-section, .career-section{ padding:16px }
      .email-input{ flex-direction:column; max-width:100% }
      .email-input input, .email-input button{ width:100% }
    }