.opp-container {
  margin: 20px auto;
  padding: 20px;
}

/* Top Header Section */
.opp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.opp-title {
  color: #25652c; /* Greenish title */
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Top Card Layout */
.main-card {
  display: flex;
  overflow: hidden;
  color: #333;
  margin-bottom: 30px;
  min-height: 300px;
  gap: 30px;
  border-radius: 24px;
  padding: 9px;
  padding-left: 0px;
}

.card-image-wrapper {
  flex: 2;
  max-width: 580px;
  border-radius: 24px;
}



.card-info-content {
  flex: 2;
  background-color: #fff;
  padding: 25px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  box-shadow: 0px 0px 10px 0px #00000040;
}

.info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  column-gap: 70px;
  margin-bottom: 15px;
}

.info-label {
  color: #999;
  font-size: 0.95rem;
}

.info-value {
  color: #333;
  font-weight: 500;
}

.short-desc {
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
  font-size: 0.95rem;
}

/* Bottom Details Card */
.details-card {
  margin-right: 9px;
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  color: #333;
  text-align: right;
  box-shadow: 0px 0px 10px 0px #00000040;
}

.section-title {
  color: #25652c;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 15px;
  margin-top: 25px;
}

.section-content {
  color: #444;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Buttons */
.apply-button {
  background-color: #f99d27; /* Orange button */
  color: white !important;
  padding: 10px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.apply-button:hover {
  background-color: #e88c16;
}

.btn-back-container {
  margin-top: 5px;
  text-align: left;
}

.btn-back {
  background-color: #6c757d;
  color: white !important;
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.verify-badge {
  background-color: #25652c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin-right: 5px;
}
/* ===== دائرة التوثيق ===== */
    .verify-badge-circle {
        display: inline-flex; /* لتوسيط المحتوى داخل الدائرة */
        justify-content: center;
        align-items: center;
        width: 22px; /* حجم الدائرة */
        height: 22px;
        background-color: #F99D27;
        color: white; /* لون العلامة داخل الدائرة */
        border-radius: 50%; /* يجعلها دائرة */
        font-size: 14px; /* حجم علامة الصح */
        font-weight: bold;
        margin-left: 6px; /* مسافة بين النص والدائرة */
        vertical-align: middle; /* يرفع الدائرة لمستوى النص */
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* ظل خفيف لإبراز الدائرة */
        transition: all 0.2s ease; /* تأثير عند التحويم لو حبيت تضيف hover */
    }

        /* تأثير عند التحويم على الدائرة */
        .verify-badge-circle:hover {
            background-color: #e08a1c;
            transform: scale(1.1); /* تكبير بسيط */
            cursor: default;
        }

    .section-title {
        text-align: inherit;
    }
    /* ===== اتجاه الصفحة ===== */

    .opp-container[dir="rtl"] {
        direction: rtl;
        text-align: right;
    }

    .opp-container[dir="ltr"] {
        direction: ltr;
        text-align: left;
    }

    /* ===== سهم الرجوع احترافي ونهائي ===== */

    .back-link {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .back-arrow {
        color: #F99D27;
        font-size: 22px;
        display: inline-block;
        transition: transform 0.2s ease;
    }

    html[dir="ltr"] .back-arrow {
        transform: rotate(180deg);
    }
    
   
    .opp-container[dir="rtl"] .verify-badge-circle {
        margin-right: 6px;
        margin-left: 0;
    }

    .opp-container[dir="ltr"] .verify-badge-circle {
        margin-left: 6px;
        margin-right: 0;
    }
    /* ===== سهم الرجوع حسب اللغة ===== */

    

    /* أيقونة السهم */
    .back-icon {
        transition: transform 0.2s ease;
    }

    .back-link {
        text-decoration: none;
        color: #F99D27;
        font-size: 22px;
        display: inline-flex;
        align-items: center;
    }
    .ltr-content {
        text-align: left;
        direction: ltr;
    }

    .rtl-label {
        text-align: right;
        direction: rtl;
    }

    .ltr-label {
        text-align: left;
        direction: ltr;
    }

    /* إنجليزي + فرنسي LTR → السهم يطلع لليمين */
    .opp-container[dir="ltr"] .back-icon {
        transform: scaleX(-1);
    }

    /* ===== القوائم بنقطة الورقة (Details + Eligibility + Benefits + Description) ===== */

/* نلغي النقاط الافتراضية */
.section-content ul,
.section-content ol,
.info-value ul,
.info-value ol {
  list-style: none;
  padding-inline-start: 0;
  margin: 0 0 1rem 0;
}

/* كل عنصر بالقائمة */
.section-content li,
.info-value li {
  position: relative;
  padding-inline-start: 36px;   /* مسافة للنص بعد الأيقونة */
  margin-bottom: 10px;
  line-height: 1.7;
}

/* أيقونة الورقة */
.section-content li::before,
.info-value li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;       /* يشتغل صح مع RTL/LTR */
  top: 0.35em;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'>\
<circle cx='27' cy='27' r='27' fill='%23F99D27'/>\
<path d='M21.9102 25.2275C22.0085 25.1232 22.1263 25.0392 22.2569 24.9804C22.3876 24.9216 22.5286 24.8891 22.6718 24.8848C22.815 24.8805 22.9577 24.9045 23.0916 24.9553C23.2256 25.0062 23.3482 25.0829 23.4525 25.1811C28.4727 29.9102 33.51 32.7875 39.4377 34.2541C40.2375 32.0723 40.3084 29.6709 39.6177 27.3282C38.7014 24.2198 36.5673 21.5116 33.448 19.4968C30.6634 17.6982 27.8802 17.2298 25.1877 16.777C21.7909 16.2057 18.5823 15.6657 15.5202 12.4236C15.1793 12.065 14.715 11.9211 14.2711 12.0377C13.7639 12.1741 13.4236 12.575 13.2607 13.2377C12.8789 14.7889 13.1243 19.1361 14.1982 23.7254C15.9225 31.0986 18.6743 34.8295 20.6796 36.6616C23.2705 39.0268 26.6536 40.3366 30.0157 40.3366C30.6494 40.3376 31.2823 40.2911 31.9091 40.1975C34.753 39.7666 37.1202 38.3382 38.4546 36.26C32.353 34.6727 27.1405 31.6543 21.9546 26.7718C21.8501 26.6734 21.766 26.5554 21.7072 26.4245C21.6484 26.2935 21.616 26.1523 21.6119 26.0088C21.6078 25.8654 21.632 25.7225 21.6832 25.5884C21.7344 25.4544 21.8116 25.3317 21.9102 25.2275Z' fill='white'/>\
</svg>");
}

/* ===== في LTR (إنجليزي / فرنسي): اقلب الورقة ===== */
.opp-container[dir="ltr"] .section-content li::before,
.opp-container[dir="ltr"] .info-value li::before {
  transform: scaleX(-1);
}

        /* ===== Swal ===== */
        .custom-swal-title {
            color: #333;
            font-size: 24px;
            font-weight: 700;
        }
        .custom-swal-text {
            color: #666;
            font-size: 20px;
        }
        .custom-swal-confirm {
            background-color: #F99D27;
            color: white;
            border: none;
            padding: 14px 45px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0 8px;
            width: auto;
            height: auto;
            border-radius: 16px;
        }
        .custom-swal-confirm:hover {
            background-color: #e88d1a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(249, 157, 39, 0.3);
        }
        .custom-swal-close {
            color: #999;
            font-size: 28px;
            position: relative;
            left: auto !important;
            right: -93% !important;
        }
        .custom-swal-close:hover {
            color: #F99D27;
        }

        /* ===== General ===== */
        .deadline-label {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }
        .deadline-active { background-color: #25652C; }
        .deadline-expired { background-color: #dc3545; }

        .apply-button {
            background-color: #f99d27;
            color: white !important;
            padding: 12px 30px;
            border-radius: 12px;
            font-weight: bold;
            font-size: 16px;
            text-decoration: none;
            transition: 0.3s;
            display: inline-block;
            white-space: nowrap;
        }
        .apply-button:hover { background-color: #e88c16; }

        .expired-button {
            background-color: #F99D27;
            color: white;
            cursor: not-allowed;
            opacity: 0.9;
        }

        /* ===== Layout ===== */
        .opp-container{
            width: min(1200px, 100%);
            margin: 0 auto;
            padding: 16px;
            box-sizing: border-box;
        }

        .opp-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .opp-title{
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            color: #25652c;
            font-size: 24px;
            font-weight: bold;
        }

        .opp-title span{
            font-size: 22px;
            font-weight: 800;
            line-height: 1.2;
            color: #25652C;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .main-card{
            display: grid;
            grid-template-columns: 1.35fr 0.65fr;
            gap: 16px;
            align-items: stretch;
            margin-top: 10px;
        }

        .card-info-content{
            background: #fff;
            border-radius: 16px;
            padding: 16px;
            box-sizing: border-box;
            box-shadow: 0px 0px 10px 0px #00000040;
        }

        .card-image-wrapper{
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            min-height: 260px;
        }
        .card-image-wrapper img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .info-grid{
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: 10px 14px;
            align-items: start;
        }

        .info-label{
            font-weight: 800;
            color: #25652C;
            opacity: .95;
        }
        .info-value{
            color: #111;
            line-height: 1.7;
            min-width: 0;
        }
        .info-value *{ max-width: 100%; }

        .details-card{
            background: #fff;
            border-radius: 16px;
            padding: 16px;
            margin-top: 16px;
            box-shadow: 0px 0px 10px 0px #00000040;
        }

        .section-title{
            font-weight: 900;
            font-size: 20px;
            color: #25652C;
            margin: 14px 0 8px;
            text-align: inherit;
        }

        .section-content{
            color: #444;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        /* اتجاه الصفحة */
        .opp-container[dir="rtl"] { direction: rtl; text-align: right; }
        .opp-container[dir="ltr"] { direction: ltr; text-align: left; }

        .ltr-content { text-align: left; direction: ltr; }
        .rtl-label { text-align: right; direction: rtl; }
        .ltr-label { text-align: left; direction: ltr; }

        /* سهم الرجوع */
        .back-link{
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            color: #F99D27;
            font-size: 22px;
        }
        .back-arrow{
            color: #F99D27;
            font-size: 22px;
            display: inline-block;
            transition: transform 0.2s ease;
        }
        html[dir="ltr"] .back-arrow { transform: rotate(180deg); }

        /* ===== Desktop-only helper ===== */
        .desktop-only{ display: block; }

        /* =========================
           Breakpoints
           ========================= */

        /* تابلت */
      @media (max-width: 992px){
            .main-card{ grid-template-columns: 1fr; }
            .info-grid{ grid-template-columns: 160px 1fr; }
        }

        /* =========================
           ✅ Mobile reorder
           ========================= */
        @@media (max-width: 576px){

            /* خلي الحاوية Grid عشان نتحكم بالترتيب */
            .opp-container{
                display: grid;
                grid-template-columns: 1fr;
                gap: 12px;
                padding: 12px;
            }

            /* الترتيب: الصورة -> الزر -> كارد الوصف -> الكارد الأخير */
            #oppImage{ order: 1; }
            #applyBtn{ order: 2; }
            .main-card{ order: 3; }
            .details-card{ order: 4; }

            /* الزر full width */
            #applyBtn{
                width: 100%;
                text-align: center;
                display: block;
            }

            /* صغّر العنوان */
            .opp-title span{
                font-size: 18px;
                -webkit-line-clamp: 3;
            }

            /* خلي grid تبع المعلومات عمودي */
            .info-grid{
                grid-template-columns: 1fr;
                gap: 6px;
            }
            .info-label{ margin-top: 8px; }

            /* أخفي الصورة اللي داخل main-card (desktop-only) */
            .desktop-only{ display: none !important; }

            /* padding أقل */
            .card-info-content,
            .details-card{
                padding: 14px;
            }

            /* صغر ارتفاع الصورة */
            #oppImage{ min-height: 220px; }
        }

        /* ===== القوائم بنقطة الورقة ===== */
        .section-content ul,
        .section-content ol,
        .info-value ul,
        .info-value ol {
            list-style: none;
            padding-inline-start: 0;
            margin: 0 0 1rem 0;
        }

        .section-content li,
        .info-value li {
            position: relative;
            padding-inline-start: 36px;
            margin-bottom: 10px;
            line-height: 1.7;
        }

        .section-content li::before,
        .info-value li::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 0.35em;
            width: 22px;
            height: 22px;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'>\
<circle cx='27' cy='27' r='27' fill='%23F99D27'/>\
<path d='M21.9102 25.2275C22.0085 25.1232 22.1263 25.0392 22.2569 24.9804C22.3876 24.9216 22.5286 24.8891 22.6718 24.8848C22.815 24.8805 22.9577 24.9045 23.0916 24.9553C23.2256 25.0062 23.3482 25.0829 23.4525 25.1811C28.4727 29.9102 33.51 32.7875 39.4377 34.2541C40.2375 32.0723 40.3084 29.6709 39.6177 27.3282C38.7014 24.2198 36.5673 21.5116 33.448 19.4968C30.6634 17.6982 27.8802 17.2298 25.1877 16.777C21.7909 16.2057 18.5823 15.6657 15.5202 12.4236C15.1793 12.065 14.715 11.9211 14.2711 12.0377C13.7639 12.1741 13.4236 12.575 13.2607 13.2377C12.8789 14.7889 13.1243 19.1361 14.1982 23.7254C15.9225 31.0986 18.6743 34.8295 20.6796 36.6616C23.2705 39.0268 26.6536 40.3366 30.0157 40.3366C30.6494 40.3376 31.2823 40.2911 31.9091 40.1975C34.753 39.7666 37.1202 38.3382 38.4546 36.26C32.353 34.6727 27.1405 31.6543 21.9546 26.7718C21.8501 26.6734 21.766 26.5554 21.7072 26.4245C21.6484 26.2935 21.616 26.1523 21.6119 26.0088C21.6078 25.8654 21.632 25.7225 21.6832 25.5884C21.7344 25.4544 21.8116 25.3317 21.9102 25.2275Z' fill='white'/>\
</svg>");
        }

        .opp-container[dir="ltr"] .section-content li::before,
        .opp-container[dir="ltr"] .info-value li::before {
            transform: scaleX(-1);
        }



        @media (max-width: 576px){

  /* نخلي الصفحة Grid عشان نرتب العناصر */
  .opp-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* الترتيب:
     1 = الصورة
     2 = زر التقديم
     3 = الكارد اللي فيه الوصف/المعلومات
     4 = الكارد الأخير (details)
  */
  .main-card{
    order: 3;
    display: contents; /* نفك الكارد عشان نرتب العناصر اللي داخله */
  }

  #oppImage{
    order: 1;
    min-height: 220px;
  }

  #applyBtn{
    order: 2;
    width: 100%;
    text-align: center;
    display: block;
  }

  .card-info-content{
    order: 3;
  }

  .details-card{
    order: 4;
  }

  /* خلي معلومات الفرصة عمودي بالموبايل */
  .info-grid{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
/* =========================
   Base
   ========================= */
.opp-container{
  width: min(1200px, 100%);
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
}

.opp-container[dir="rtl"] { direction: rtl; text-align: right; }
.opp-container[dir="ltr"] { direction: ltr; text-align: left; }

/* ===== Top row: title + apply (desktop) ===== */
.opp-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

.opp-header{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.btn-back-container{ margin-top: 2px; }

.back-link{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: #F99D27;
  font-size: 22px;
}

.back-arrow{
  color: #F99D27;
  font-size: 22px;
  display: inline-block;
  transition: transform 0.2s ease;
}
html[dir="ltr"] .back-arrow { transform: rotate(180deg); }

.opp-title{
  color: #25652c;
  font-size: 24px;
  font-weight: 900;
  min-width: 0;
}
.opp-title span{
  display:block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height:1.2;
}

/* ===== Apply button ===== */
.apply-button{
  background-color: #f99d27;
  color: white !important;
  padding: 12px 30px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
  white-space: nowrap;
}

.apply-button:hover{ background-color:#e88c16; }

.expired-button{
  cursor: not-allowed;
  opacity: .9;
}

/* ===== Image (single) ===== */
.card-image-wrapper{
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  min-height: 300px;
  box-shadow: 0px 0px 10px 0px #00000040;
}

.card-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ===== Info Card ===== */
.card-info-content{
  background-color: #fff;
  padding: 25px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  box-shadow: 0px 0px 10px 0px #00000040;
}

.info-grid{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px 18px;
  align-items: start;
}

.info-label{
  color: #999;
  font-size: 0.95rem;
  font-weight: 800;
}

.info-value{
  color: #333;
  font-weight: 500;
  line-height: 1.7;
  min-width:0;
}
.info-value *{ max-width:100%; }

/* ===== Deadline label ===== */
.deadline-label{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.deadline-active { background-color: #25652C; }
.deadline-expired { background-color: #dc3545; }

/* ===== Details Card ===== */
.details-card{
  margin-top: 16px;
  background-color: #fff;
  border-radius: 24px;
  padding: 40px;
  color: #333;
  box-shadow: 0px 0px 10px 0px #00000040;
}

.section-title{
  color: #25652c;
  font-weight: 900;
  font-size: 20px;
  margin: 18px 0 10px;
  text-align: inherit;
}

.section-content{
  color: #444;
  line-height: 1.8;
  margin-bottom: 20px;
}

.ltr-content { text-align:left; direction:ltr; }
.rtl-label { text-align:right; direction:rtl; }
.ltr-label { text-align:left; direction:ltr; }

/* ===== Lists leaf bullets ===== */
.section-content ul,
.section-content ol,
.info-value ul,
.info-value ol{
  list-style:none;
  padding-inline-start:0;
  margin:0 0 1rem 0;
}

.section-content li,
.info-value li{
  position:relative;
  padding-inline-start:36px;
  margin-bottom:10px;
  line-height:1.7;
}

.section-content li::before,
.info-value li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0.35em;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'>\
<circle cx='27' cy='27' r='27' fill='%23F99D27'/>\
<path d='M21.9102 25.2275C22.0085 25.1232 22.1263 25.0392 22.2569 24.9804C22.3876 24.9216 22.5286 24.8891 22.6718 24.8848C22.815 24.8805 22.9577 24.9045 23.0916 24.9553C23.2256 25.0062 23.3482 25.0829 23.4525 25.1811C28.4727 29.9102 33.51 32.7875 39.4377 34.2541C40.2375 32.0723 40.3084 29.6709 39.6177 27.3282C38.7014 24.2198 36.5673 21.5116 33.448 19.4968C30.6634 17.6982 27.8802 17.2298 25.1877 16.777C21.7909 16.2057 18.5823 15.6657 15.5202 12.4236C15.1793 12.065 14.715 11.9211 14.2711 12.0377C13.7639 12.1741 13.4236 12.575 13.2607 13.2377C12.8789 14.7889 13.1243 19.1361 14.1982 23.7254C15.9225 31.0986 18.6743 34.8295 20.6796 36.6616C23.2705 39.0268 26.6536 40.3366 30.0157 40.3366C30.6494 40.3376 31.2823 40.2911 31.9091 40.1975C34.753 39.7666 37.1202 38.3382 38.4546 36.26C32.353 34.6727 27.1405 31.6543 21.9546 26.7718C21.8501 26.6734 21.766 26.5554 21.7072 26.4245C21.6484 26.2935 21.616 26.1523 21.6119 26.0088C21.6078 25.8654 21.632 25.7225 21.6832 25.5884C21.7344 25.4544 21.8116 25.3317 21.9102 25.2275Z' fill='white'/>\
</svg>");
}

.opp-container[dir="ltr"] .section-content li::before,
.opp-container[dir="ltr"] .info-value li::before{
  transform: scaleX(-1);
}

/* =========================
   ✅ Mobile order
   ========================= */
@media (max-width: 576px){

  /* ترتيب الصفحة:
     1) العنوان (opp-top)
     2) الصورة
     3) زر apply
     4) كارد المعلومات
     5) الكارد الأخير
  */

  .opp-container{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding: 12px;
  }

  /* العنوان يضل فوق */
  .opp-top{ order: 0; margin-bottom: 0; }

  /* الصورة */
  #oppImage{ order: 1; min-height: 220px; }

  /* زر apply تحت الصورة */
  #applyBtn{
    order: 2;
    width: 100%;
    text-align:center;
    display:block;
  }

  /* كارد المعلومات */
  #oppInfoCard{ order: 3; padding: 14px; }

  /* كارد التفاصيل */
  .details-card{ order: 4; padding: 14px; }

  .opp-title span{
    font-size: 18px;
    -webkit-line-clamp: 3;
  }

  .info-grid{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .info-label{ margin-top: 8px; }
}

/* ===== Swal styles ===== */
.custom-swal-title{
  color:#333;
  font-size:24px;
  font-weight:700;
}
.custom-swal-text{
  color:#666;
  font-size:20px;
}
.custom-swal-confirm{
  background-color:#F99D27;
  color:#fff;
  border:none;
  padding:14px 45px;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:all .3s ease;
  margin:0 8px;
  border-radius:16px;
}
.custom-swal-confirm:hover{
  background-color:#e88d1a;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(249,157,39,.3);
}
.custom-swal-close{
  color:#999;
  font-size:28px;
  position:relative;
  left:auto !important;
  right:-93% !important;
}
.custom-swal-close:hover{ color:#F99D27; }

/* صورة الفرصة */
.card-image-wrapper{
  width: 100%;              /* نفس عرض الصفحة */
  max-width: 100%;
  margin-bottom: 16px;      /* مسافة تحت الصورة */
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  min-height: 300px;
  box-shadow: 0px 0px 10px 0px #00000040;
}

.card-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== Container ===== */
.opp-container{
  width: min(1200px, 100%);
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
}
.opp-container[dir="rtl"] { direction: rtl; text-align: right; }
.opp-container[dir="ltr"] { direction: ltr; text-align: left; }

/* ===== Top ===== */
.opp-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}
.opp-header{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.opp-title span{
  font-size:22px;
  font-weight:800;
  color:#25652C;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Back arrow */
.back-link{ text-decoration:none; color:#F99D27; font-size:22px; display:inline-flex; }
.back-arrow{ transition: transform .2s ease; }
html[dir="ltr"] .back-arrow{ transform: rotate(180deg); }

/* Apply */
.apply-button{
  background:#F99D27;
  color:#fff !important;
  padding:12px 30px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
}
.apply-button:hover{ background:#e88c16; }
.expired-button{ cursor:not-allowed; opacity:.9; }

/* ===== Main Card (Desktop: side by side) ===== */
.main-card{
  display:grid;
  grid-template-columns:0.8fr 1.2fr ;
  gap:16px;
  align-items:stretch;
}

/* Image */
.card-image-wrapper{
  height: 100%;           /* مهم */
  min-height: unset;      /* شيل min-height */
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 0 10px #00000040;
  background: #fff;
}
.card-image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Info Card */
.card-info-content{
  background:#fff;
  padding:25px;
  border-radius:24px;
  box-shadow:0 0 10px #00000040;
}
.info-grid{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px 18px;
}
.info-label{ color:#999; font-weight:800; }
.info-value{ color:#333; line-height:1.7; }

/* Deadline */
.deadline-label{
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  color:#fff;
  font-weight:800;
  font-size:14px;
}
.deadline-active{ background:#25652C; }
.deadline-expired{ background:#dc3545; }

/* Details Card */
.details-card{
  margin-top:16px;
  background:#fff;
  border-radius:24px;
  padding:40px;
  box-shadow:0 0 10px #00000040;
}
.section-title{
  color:#25652c;
  font-weight:900;
  font-size:20px;
  margin:18px 0 10px;
}
.section-content{ line-height:1.8; }

/* ===== Responsive ===== */

/* Tablet & below: image فوق info */
@media (max-width: 992px){
  .main-card{
    grid-template-columns:1fr;
  }
  .card-image-wrapper{ min-height:220px; }
}

/* Mobile order */
@media (max-width: 576px){
  .opp-container{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px;
  }
  .opp-top{ order:0; }
  .main-card{ order:1; display:flex; flex-direction:column; gap:12px; }
  #applyBtn{ order:2; width:100%; text-align:center; }
  .details-card{ order:3; padding:14px; }

  .info-grid{ grid-template-columns:1fr; gap:6px; }
}