/* THEME & VARIABLES - NEW PALETTE */
:root{
  --primary: #0077b6; /* أزرق احترافي من الشعار */
  --primary-600: #023e8a; /* درجة أغمق للتأثيرات */
  --accent: #fca311;  /* ذهبي دافئ للتمييز */
  --bg: #0b131a;      /* خلفية داكنة جداً */
  --surface: #121c25; /* سطح أغمق قليلاً */
  --card: #15222e;    /* لون البطاقات */
  --text: #edf2f4;    /* نص أبيض مائل للرمادي */
  --muted: #8d99ae;   /* نص ثانوي باهت */
  --ring: rgba(0, 119, 182, .25);
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --primary: #0077b6;
  --primary-600: #023e8a;
  --accent: #fca311;
  --bg: #f8f9fa;      /* خلفية بيضاء مائلة للرمادي */
  --surface: #ffffff; /* سطح أبيض نقي */
  --card: #ffffff;
  --text: #2b2d42;    /* نص رمادي داكن */
  --muted: #8d99ae;
  --ring: rgba(0, 119, 182, .25);
  --shadow: 0 8px 30px rgba(10,20,40,.08);
}

/* BASE */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin-inline:auto}
.section{padding:10px 0}

/* ACCESSIBILITY */
.skip-link{
  position:absolute; inset-block-start:0; inset-inline-start:0; z-index:1000;
  transform:translateY(-120%); background:var(--primary); color:#fff;
  padding:.5rem .75rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ transform:translateY(0); outline:2px solid #fff }


/* HEADER */
.site-header {
    top: 0;
    z-index: 80;
    background: var(--surface); /* استخدام لون السطح */
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    box-shadow: 0 2px 10px rgba(0,0,0,.1); /* إضافة ظل خفيف */
}
.desktop-header{
  display:grid;grid-template-columns:220px 1fr;align-items:center;gap:12px;padding:10px 0
}
.dh-left .custom-logo-link img { height: 72px; width: auto; object-fit: contain; }
.dh-right{display:grid;grid-template-rows:auto auto;gap:6px}

/* Desktop Navigation */
.main-nav .menu{list-style:none;display:flex;gap:22px;margin:0;padding:0;align-items:center;flex-wrap:wrap;justify-content:center;}
.menu-item > a{position:relative;padding:.6rem .7rem;border-radius:10px;transition:.2s ease;display:inline-block;font-size:1.02rem;font-weight:600;line-height:1}
.menu-item > a:hover{background:color-mix(in oklab,var(--text),transparent 94%)}
.menu-item-has-children{position:relative}
.sub-menu{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);background:var(--surface);border:1px solid color-mix(in oklab,var(--text),transparent 92%);border-radius:12px;min-width:260px;display:none;box-shadow:var(--shadow);padding:8px;z-index:80}
.menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus-within .sub-menu {display:block}
.sub-menu a{display:block;padding:.6rem .75rem;border-radius:8px}
.sub-menu a:hover{background:color-mix(in oklab,var(--text),transparent 94%)}

/* Desktop Header Tools */
.dh-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid color-mix(in oklab,var(--text),transparent 88%);border-radius:10px;background:transparent;cursor:pointer}
.icon-btn:hover{background:color-mix(in oklab,var(--text),transparent 94%)}
.lang-area{position:relative}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid color-mix(in oklab,var(--text),transparent 90%);border-radius:12px;padding:8px;display:none;z-index:100;min-width:140px}
.lang-dropdown a{display:block;padding:.45rem .6rem;border-radius:8px}
.lang-dropdown a:hover{background:color-mix(in oklab,var(--text),transparent 94%)}
.lang-dropdown .active{font-weight:700}
.theme-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid color-mix(in oklab,var(--text),transparent 88%);background:transparent;cursor:pointer;color:var(--text)}
.theme-toggle:hover{background:color-mix(in oklab,var(--text),transparent 94%)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{width:20px;height:20px;display:none}
:root[data-theme="light"] .icon-sun{display:block}
:root:not([data-theme="light"]) .icon-moon{display:block}

/* MOBILE Header */
.mobile-header{display:none;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:8px 0;gap:6px}
.hamburger{display:flex;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;width:max-content;margin-left:-2px}
.hamburger span{width:24px;height:2px;background:currentColor;display:block;border-radius:2px}
.mh-center .custom-logo-link img{height:40px;width:auto;display:block;object-fit:contain;margin-inline:auto}
.mh-left{display:flex;align-items:center}
.mh-center{display:grid;place-items:center}
.mh-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}

/* Mobile Overlay Menu */
.mobile-overlay{position:fixed;inset:0;display:none;z-index:100}
.mobile-overlay.active{display:block}
.overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.mobile-menu{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;background:var(--surface);padding:16px 18px 22px;overflow:auto}
.overlay-close{align-self:flex-end;background:transparent;border:0;color:inherit;font-size:28px;line-height:1;cursor:pointer}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu .menu-item{margin:8px 0 12px;font-weight:800}
.mobile-menu .sub-menu{margin-top:6px; padding-left: 15px; font-weight: normal;}
.mobile-menu a{display:block;padding:.6rem;border-radius:10px}
.mobile-menu a:hover{background:color-mix(in oklab,var(--text),transparent 94%)}

/* MAIN LAYOUT & SIDEBAR */
.content-grid{
  display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:start;
}
.main-col-full { width: 100%; } /* For index.php */
.sidebar-col{ position:sticky; top:100px; align-self:start }

/* Sidebar Widgets */
.sidebar-card{
  background:var(--card);
  border:1px solid color-mix(in oklab,var(--text),transparent 90%);
  border-radius:16px; padding:16px; margin-bottom:14px;
}
.sidebar-col h3{ margin:0 0 10px; font-size:1rem; }
.sidebar-col ul { list-style: none; padding-left: 0; margin: 0; }
.sidebar-col ul li { margin-bottom: 8px; }
.media-list{ display:grid; gap:10px; }
.media-item{
  display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center;
  background:var(--surface-2);
  border:1px solid color-mix(in oklab,var(--text),transparent 90%);
  border-radius:12px; padding:6px; text-decoration:none; color:inherit;
}
.media-item:hover{ outline:2px solid color-mix(in oklab,var(--primary),transparent 60%) }
.media-item .thumb{ width:100%; height:64px; object-fit:cover; border-radius:8px }
.media-item .title{ font-weight:700; line-height:1.2 }

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1rem;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:.2s ease;font-weight:700;gap:.5rem}
.btn-primary{background:var(--primary);color:white;box-shadow:0 8px 20px color-mix(in oklab,var(--primary),transparent 65%)}
.btn-primary:hover{background:var(--primary-600)}

/* FOOTER */
.site-footer {
    border-top: 1px solid color-mix(in oklab,var(--text),transparent 90%);
    padding: 24px 0;
    margin-top: 64px;
    text-align: center;
    color: var(--muted);
}

/* RESPONSIVE */
@media (max-width:1100px){
  .desktop-header{display:none}
  .mobile-header{display:grid}
  .content-grid{ grid-template-columns:1fr }
}


/* ARCHIVE PAGE & POSTS GRID
--------------------------------------------- */
.archive-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

.archive-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--primary);
}

.archive-description {
    font-size: 1.1rem;
    color: var(--muted);
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.post-card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,.3);
}

.post-thumbnail-link {
    display: block;
}

.post-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 18px;
}

.post-meta {
    font-size: 0.9rem;
    font-weight: 400; /* خط رقيق */
    color: var(--muted);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-title {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.4;
}

.post-title a {
    text-decoration: none;
    color: var(--text);
    transition: color 0.2s ease;
}

.post-title a:hover {
    color: var(--primary);
}

/* Pagination Styles */
.pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination .nav-links .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    font-weight: 600;
}

.pagination .nav-links .page-numbers.current,
.pagination .nav-links .page-numbers:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* BREADCRUMBS
--------------------------------------------- */
.breadcrumbs {
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 20px;
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs .separator {
    margin: 0 10px;
}

/* LOAD MORE BUTTON
--------------------------------------------- */
.load-more-container {
    text-align: center;
    margin-top: 40px;
}

#load-more-btn {
    padding: 12px 30px;
    font-size: 1rem;
    cursor: pointer;
}

#load-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* SINGLE POST STYLES
--------------------------------------------- */
.single-post-container {
    padding-bottom: 30px;
    margin-bottom: 40px;
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

.single-post-container:last-of-type {
    border-bottom: none;
}

.single-post-container .entry-title {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.post-meta-single {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    color: var(--muted);
}

.post-meta-single a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.post-meta-single a:hover {
    text-decoration: underline;
}

.featured-image-single {
    margin-bottom: 30px;
}

.featured-image-single img {
    border-radius: 20px; /* Rounded corners */
    width: 100%;
    height: auto;
}

.entry-content {
    line-height: 1.8;
    font-size: 1.1rem;
}
.entry-content p,
.entry-content h2,
.entry-content h3,
.entry-content ul {
    margin-bottom: 1.5em;
}

/* RELATED POSTS
--------------------------------------------- */
.related-posts {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

.related-posts-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.related-post-card {
    background: var(--surface-2);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.related-post-card a {
    text-decoration: none;
}
.related-post-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.related-post-title {
    padding: 15px;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    margin: 0;
}
.related-post-card:hover .related-post-title {
    color: var(--primary);
}

@media (max-width: 900px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* COMMENTS AREA
--------------------------------------------- */
.comments-area {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

.comment-list {
    list-style: none;
    padding: 0;
}
.comment-list li {
    padding: 20px;
    margin-bottom: 15px;
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.comment-author .avatar {
    border-radius: 50%;
    margin-right: 15px;
}
.comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 85%);
    background: var(--surface);
    color: var(--text);
    margin-bottom: 15px;
}
.comment-form .form-submit .submit {
    /* Use button classes from the theme */
    display: inline-flex;
    padding: .8rem 1rem;
    border-radius: 14px;
    font-weight: 700;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
}

/*
--- AUTHOR PROFILE PAGE ---
*/
.author-page-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Breadcrumbs Styling */
.breadcrumbs {
    margin-bottom: 30px;
    color: var(--muted);
    font-size: 0.95rem;
}
.breadcrumbs .separator {
    margin: 0 8px;
}
.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}
.breadcrumbs a:hover {
    color: var(--primary);
}

/* Author Header Box */
.author-header-box {
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: var(--card);
    padding: 30px;
    border-radius: var(--radius);
    margin-bottom: 40px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.author-photo .avatar {
    border-radius: 50%; /* Circular photo */
    border: 4px solid var(--surface);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.author-info h1 {
    font-size: 2.5rem;
    margin: 0 0 5px 0;
    color: var(--text);
}
.author-info h2 {
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    color: var(--primary);
    font-weight: 500;
}
.author-skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-item {
    background-color: var(--surface-2);
    color: var(--text);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}


/* Main Content Layout (2 Columns) */


.author-main-content {
    display: grid;
    grid-template-columns: 320px 1fr; /* هذا يعرض المحتوى جنبًا إلى جنب */
    gap: 30px;
    align-items: flex-start;
}


@media (max-width: 900px) {
    .author-main-content {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
}

/* Left Column (Resume) */
.author-resume-col .resume-block {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}
.resume-block h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: var(--primary);
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    padding-bottom: 10px;
}
.resume-entry {
    margin-bottom: 15px;
}
.resume-entry:last-child {
    margin-bottom: 0;
}
.resume-entry h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: var(--text);
}
.resume-entry h5 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--muted);
}
.resume-entry h5 span {
    font-style: italic;
}
.resume-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Right Column (Posts) */
.author-posts-col h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8rem;
}
.author-posts-col .posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Adjust grid for this layout */
}
.author-posts-col .post-title {
    font-size: 1.1rem; /* Slightly smaller titles for this view */
}

/* Make the author resume column sticky */
.author-resume-col {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 120px; /* Adjust this value based on your sticky header's height */
    align-self: start; /* Important for sticky positioning in a grid */
}


/*
--- TEAM PAGE ---
*/

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
    gap: 25px;
    margin-top: 30px;
}

.team-member-card {
    display: block;
    text-decoration: none;
    background-color: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-member-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.team-member-photo .avatar {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1; /* Make photo square */
    object-fit: cover;
}

.team-member-info {
    padding: 20px 15px;
}

.team-member-name {
    font-size: 1.4rem;
    margin: 0 0 5px 0;
    color: var(--text);
}

.team-member-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    margin: 0;
}

/* Responsive adjustments for the grid */
@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 560px) {
    .team-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/*
--- SINGLE VIDEO PAGE ---
*/
.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 25px;
    background-color: #000;
    border-radius: var(--radius);
}
.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*
--- SEARCH RESULTS PAGE ---
*/

.archive-header .archive-title span {
    color: var(--primary);
}

.search-no-results {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    padding: 30px;
    border-radius: var(--radius);
}

.search-no-results p {
    font-size: 1.1rem;
    color: var(--muted);
    margin-top: 0;
}

.suggested-keywords,
.random-content {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid color-mix(in oklab, var(--text), transparent 92%);
}

.suggested-keywords h3,
.random-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-cloud a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--surface-2);
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.tag-cloud a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/*
--- Custom Search Form ---
*/

.search-form {
    display: flex;
    align-items: center;
    background-color: var(--surface-2);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: 999px; /* Pill shape */
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Add a subtle glow when focused */
.search-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary), transparent 80%);
}

.search-label {
    flex-grow: 1;
    display: flex;
}

.search-field {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 15px;
    color: var(--text);
    font-size: 1rem;
    outline: none;
}

.search-field::placeholder {
    color: var(--muted);
    opacity: 0.8;
}

.search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.3s ease;
}

.search-submit:hover {
    color: var(--primary);
}

/* Hide text label for accessibility */
.screen-reader-text {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/*
--- Social Icons ---
*/

.socials {
    display: flex; /* This is the key property to align items horizontally */
    align-items: center;
    gap: 8px; /* Space between icons */
}

.social {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 88%);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    transition: all 0.2s ease;
}

.social:hover {
    background: color-mix(in oklab, var(--text), transparent 94%);
    color: var(--primary);
    border-color: color-mix(in oklab, var(--primary), transparent 70%);
    transform: translateY(-2px);
}

.social svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   CUSTOM CPT ARCHIVE STYLES (Countries & Universities)
   ========================================================================== */

/* --- Countries Archive Page --- */
.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 35px;
}
.country-card {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    border-radius: 20px;
    padding: 25px 20px;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.country-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.country-flag {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--surface);
    box-shadow: 0 0 0 5px var(--accent);
    transition: transform 0.3s ease;
}
.country-card:hover .country-flag {
    transform: rotate(10deg);
}
.country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.country-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

/* --- Single Country Page --- */
.country-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
}
.meta-item {
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    flex-grow: 1;
    border-left: 5px solid var(--accent);
}
.advantages-list li {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2327ae60" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>') no-repeat left center;
    padding-left: 40px;
    margin-bottom: 12px;
}
.universities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}
.university-card {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.uni-name { font-size: 1.1rem; margin: 0 0 5px 0; }
.uni-ranking { font-size: 0.9rem; color: var(--accent); font-weight: 600; margin: 0; }



/* ==========================================================================
   University Archive Page - Creative Version
   ========================================================================== */

/* --- Enhanced Filter Form Styles --- */
.university-filters-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    padding: 30px;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 50px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

.filter-item {
    position: relative;
}

.filter-item label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.filter-item select,
.filter-item input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid color-mix(in oklab, var(--text), transparent 88%);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--surface-2);
    color: var(--text);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
}

.filter-item select {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a7b3c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px; /* Space for the arrow */
}

.filter-item select:focus,
.filter-item input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring);
}

/* ==========================================================================
   CREATIVE UNIVERSITY CARD STYLES
   ========================================================================== */

/* --- Main Card Container --- */
.uni-card-enhanced {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 4px solid var(--primary); /* لمسة لونية مميزة */
}

.uni-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* --- Card Header (Row 1) --- */
.uni-card__header {
    padding: 15px 25px;
    background-color: var(--surface);
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 94%);
}

.uni-card__title {
    margin: 0;
    font-size: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5ch; /* مسافة تعادل نصف حرف */
}
.uni-card__title .uni-name-link {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}
.uni-card__title .country-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}
.uni-card__title .country-link:hover {
    color: var(--accent);
}
.country-flag-icon-small {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card);
}
.uni-card__title .separator {
    color: var(--muted);
    font-weight: 400;
}

/* --- Card Body (Row 2) --- */
.uni-card__body {
    display: grid;
    grid-template-columns: 140px 1fr; /* عمود الشعار | عمود التفاصيل */
    gap: 25px;
    padding: 25px;
    align-items: center;
}

.uni-card__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    background: var(--surface);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
}
.uni-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.logo-placeholder {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary);
}


/* --- Details Column --- */
.uni-card__details {
    display: flex;
    flex-direction: column;
    gap: 14px; /* مسافة بين كل معلومة */
}

.uni-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
}
.uni-card__meta-item i {
    color: var(--accent);
    margin-top: 4px;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.uni-card__meta-item strong {
    display: block;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 2px;
}
.uni-card__meta-item span {
    color: var(--text);
    font-weight: 600;
}

/* --- Card Footer (Button) --- */
.uni-card__footer {
    margin-top: auto; /* يدفع الزر إلى أسفل البطاقة دائمًا */
    padding: 20px 25px;
    text-align: right;
    border-top: 1px solid color-mix(in oklab, var(--text), transparent 94%);
}
.uni-card__footer .btn {
    font-size: 0.9rem;
    padding: 0.7rem 1.2rem;
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .uni-card__body {
        grid-template-columns: 1fr; /* عمود واحد في الشاشات الصغيرة */
        text-align: center;
    }
    .uni-card__logo {
        width: 120px;
        height: 120px;
        margin: 0 auto 20px; /* توسيط الشعار */
    }
    .uni-card__meta-item {
        justify-content: center;
        text-align: left;
    }
    .uni-card__footer {
        text-align: center;
    }
}


/* ==========================================================================
   Creative Single Country Page Styles (single-country.php)
   ========================================================================== */

.country-single-reloaded .entry-header {
    text-align: left;
    margin-bottom: 30px;
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    padding-bottom: 20px;
}

.country-single-reloaded .entry-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--muted);
    margin: 0;
}

.country-single-reloaded .entry-title {
    font-size: 3rem;
    line-height: 1.1;
    margin: 0;
    color: var(--primary);
}

.content-image-box {
    background: var(--card); /* استخدام لون البطاقة من الثيم */
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%); /* حد رقيق */
    border-radius: var(--radius); /* حواف دائرية متناسقة مع الثيم */
    padding: 30px; /* حشوة داخلية لإعطاء مساحة للمحتوى */
    box-shadow: var(--shadow); /* ظل لتمييز الصندوق */
    margin-bottom: 50px; /* الحفاظ على المسافة السفلية */
}

/* Style for the floated featured image */
.wp-post-image-floated {
    float: left;
    width: 40%;
    max-width: 400px;
    height: auto;
    border-radius: var(--radius);
    margin-right: 30px;
    margin-bottom: 20px;
    shape-outside: margin-box; /* Helps text wrap more nicely */
}

/* Clear the float after the content */
.content-image-box:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Two Column Layout for Details & Universities --- */
.details-and-universities {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .details-and-universities {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
}

/* --- Left Sticky Column Styles --- */
.country-details-col-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Adjust based on your sticky header's height */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.meta-item-box {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    padding: 20px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 15px;
}

.meta-item-box.flag-box {
    padding: 10px;
    justify-content: center;
}
.meta-item-box.flag-box img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.meta-item-box i {
    font-size: 1.8rem;
    color: var(--accent);
    flex-shrink: 0;
}

.meta-item-box .meta-label {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
    display: block;
}

.meta-item-box .meta-value {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 500;
}

.advantages-box {
    display: block;
}
.advantages-box .advantages-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    color: var(--primary);
}
.advantages-box .advantages-list ul { margin: 0; padding-left: 5px; }
.advantages-box .advantages-list li { font-size: 1rem; padding-left: 25px; }


/* --- Right Universities Column Styles --- */



.universities-list-col{
    position: -webkit-sticky; /* For Safari */
    position: sticky;
}

.universities-section-title {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8rem;
}

.uni-list-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.uni-list-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.uni-list-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: var(--surface);
    border-radius: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uni-list-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.uni-list-details {
    flex-grow: 1;
}

.uni-list-name {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    color: var(--text);
}

.uni-list-card:hover .uni-list-name {
    color: var(--primary);
}

.uni-list-meta {
    display: flex;
    gap: 20px;
    color: var(--muted);
    font-size: 0.9rem;
}
.uni-list-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.uni-list-meta i {
    color: var(--accent);
}

/* ==========================================================================
   New Footer Styles (Final Update)
   ========================================================================== */
.site-footer-reloaded {
    background-color: #0b131a; /* Using a fixed dark color */
    padding-top: 60px;
    font-size: 0.95rem;
    color: #8d99ae; /* Using a fixed light text color for contrast */
}
.footer-top-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(141, 153, 174, 0.2);
}

.footer-about-box {
    background-color: #121c25;
    padding: 25px;
    border-radius: var(--radius);
    /* New styles for alignment */
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-about-box .custom-logo-link {
    flex-shrink: 0; /* Prevents the logo from shrinking */
}
.footer-col .custom-logo {
    max-width: 150px; /* Adjusted size */
    margin-bottom: 0; /* Removed bottom margin */
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li {
    margin-bottom: 12px;
}
.footer-menu a {
    text-decoration: none;
    color: #8d99ae;
    transition: color 0.2s ease;
}
.footer-menu a:hover {
    color: var(--accent);
}

.footer-contact-info {
    text-align: center;
    padding: 30px 0; /* Adjusted padding */
}
.footer-contact-info p {
    margin: 5px 0;
}
.footer-bottom-bar {
    background-color: #000;
    padding: 15px 0;
    text-align: center;
    font-size: 0.9rem;
}
/* Responsive Footer */
@media (max-width: 992px) {
    .footer-top-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .footer-about-box {
        flex-direction: column; /* Stack logo and text on small screens */
        align-items: flex-start;
    }
}
/* ==========================================================================
   Contact Page Styles (Updated Version)
   ========================================================================== */
.contact-header { padding-top: 0; }
.contact-subtitle { font-size: 1.2rem; color: var(--muted); max-width: 700px; margin: 15px auto 0; }

.contact-content-grid .container { max-width: 1000px; }
.contact-columns {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: flex-start;
}
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between the boxes */
}
.contact-info-box {
    background-color: var(--surface);
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.info-item { display: flex; align-items: flex-start; gap: 20px; }
.info-item:not(:last-child) { margin-bottom: 25px; }
.info-item i { font-size: 1.5rem; color: var(--accent); margin-top: 5px; }
.info-item h4 { margin: 0 0 5px 0; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.info-item p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.info-item p a { transition: color 0.2s ease; }
.info-item p a:hover { color: var(--accent); }

/* New styled boxes for emails, hours, and socials */
.styled-box {
    background-color: var(--surface);
    border-left: 4px solid var(--accent);
}
/* Email list styling */
.email-listing .email-item {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin-bottom: 8px;
}
.email-listing .email-item span {
    color: var(--muted);
    font-weight: 400;
}
.email-listing a {
    font-weight: 600;
}

/* Business hours styling */
.hours-listing .hour-item {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 8px;
    color: var(--muted);
}
.hours-listing .hour-item span {
    font-weight: 600;
    color: var(--text);
}

/* Socials box styling */
.socials-title {
    font-size: 1rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 15px 0;
    text-align: center;
}
.contact-socials .socials { justify-content: center; }

/* Contact form column */
.contact-form-col .wpcf7-form p,
.contact-form-col .wpforms-field { margin-bottom: 15px; }
.contact-form-col input:not([type="submit"]),
.contact-form-col textarea {
    width: 100%; padding: 12px; border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 85%);
    background: var(--surface); color: var(--text);
}
.contact-form-col input[type="submit"] {
    display: inline-flex; padding: .8rem 1.5rem; border-radius: 14px; font-weight: 700;
    background: var(--primary); color: white; border: none; cursor: pointer;
}

/* New Google Map block style */
.google-map-container {
    margin-top: 40px; /* This adds space above the map */
    padding: 20px;
    background-color: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    height: 450px;
}
.google-map-container iframe { 
    width: 100%; 
    height: 100%; 
    border: 0; 
    border-radius: 12px; 
}

/* ==========================================================================
   404 Error Page Styles
   ========================================================================== */
.error-404-section .container {
    max-width: 700px; /* Limit the width for better readability */
}

.error-content.text-center {
    text-align: center;
}

.error-title {
    font-size: clamp(8rem, 25vw, 12rem); /* Responsive font size */
    font-weight: 900;
    line-height: 1;
    color: var(--accent);
    margin: 0;
    text-shadow: 4px 4px 0px var(--surface-2);
}

.error-subtitle {
    font-size: 2.5rem;
    color: var(--primary);
    margin: 0 0 15px 0;
}

.error-description {
    font-size: 1.2rem;
    color: var(--muted);
    margin-bottom: 40px;
}

.error-search {
    background: var(--surface);
    padding: 25px;
    border-radius: var(--radius);
    margin-bottom: 40px;
}

.error-search p {
    margin: 0 0 15px 0;
    font-weight: 600;
}

/* Ensure the search form from the header looks good here */
.error-search .search-form {
    max-width: 400px;
    margin: 0 auto;
}

.error-helpful-links ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* ==========================================================================
   PrepCenter Custom Widget Styles
   ========================================================================== */

/* General List Style for Widgets */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
}
.widget ul li:last-child {
    border-bottom: none;
}
.widget ul li a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    transition: color 0.2s ease;
}
.widget ul li a:hover {
    color: var(--accent);
}
.widget ul li i {
    color: var(--accent);
    font-size: 0.9rem;
}

/* ==========================================================================
   UPDATED: Author Bio Widget (2-Column Layout)
   ========================================================================== */

.author-bio-widget-grid {
    display: flex;
    align-items: center; /* This vertically centers the content of both columns */
    gap: 20px; /* This creates space between the photo and the info */
}

.author-bio-avatar {
    flex: 0 0 120px; /* Sets the avatar column width to 120px and prevents it from growing or shrinking */
    width: 120px;
}

.author-bio-avatar .avatar {
    border-radius: 50%; /* Makes the avatar image circular */
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid var(--surface); /* Optional: Adds a small border */
}

.author-bio-info {
    flex: 1; /* Allows the info column to take up the remaining space */
}

/* We no longer need text-center for the content inside the info column */
.author-bio-info .author-name {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.author-bio-info .author-job-title {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 500;
}

.author-bio-info .author-skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* CTA Repeater Widget */
.cta-widget-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cta-widget-buttons .btn {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
}

/* Other Horizons (Countries) Widget */
.other-horizons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.country-grid-item {
    text-decoration: none;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    aspect-ratio: 4/3;
}
.country-grid-item .country-flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.country-grid-item:hover .country-flag-img {
    transform: scale(1.1);
}
.country-grid-item .country-grid-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Universities from Other Countries Widget */
.university-logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.uni-logo-item {
    background: var(--surface);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/9;
    transition: background-color 0.2s ease;
}
.uni-logo-item:hover {
    background: var(--bg);
}
.uni-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.8;
    transition: all 0.2s ease;
}
.uni-logo-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Table of Contents (ToC) Widget */
#toc-widget-container .toc-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
#toc-widget-container .toc-item-h2 > a {
    font-weight: 600;
    color: var(--text);
    padding: 8px 0;
}
#toc-widget-container .toc-submenu {
    list-style: none;
    padding-left: 15px;
    margin: 5px 0;
}
#toc-widget-container .toc-item-h3 a {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.95rem;
    padding: 5px 0 5px 10px;
    border-left: 2px solid transparent;
}
#toc-widget-container a.toc-link {
    display: block;
    text-decoration: none;
    transition: all 0.2s ease;
}
#toc-widget-container a.toc-link:hover {
    color: var(--accent);
}
#toc-widget-container a.toc-link.active {
    color: var(--accent);
    transform: translateX(5px);
}
#toc-widget-container .toc-item-h3 a.toc-link.active {
    border-left-color: var(--accent);
}

/* My Shortlist Widget & Button */
.add-to-shortlist-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.5rem; /* Adjust size */
    padding: 5px;
    line-height: 1;
}
.add-to-shortlist-btn .fa-bookmark.fas { display: none; }
.add-to-shortlist-btn.is-saved { color: var(--accent); }
.add-to-shortlist-btn.is-saved .fa-bookmark.far { display: none; }
.add-to-shortlist-btn.is-saved .fa-bookmark.fas { display: inline-block; }

.widget_prepcenter_shortlist .shortlist-items { list-style: none; margin: 0; padding: 0; }
.widget_prepcenter_shortlist .shortlist-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    padding: 8px 0;
}
.widget_prepcenter_shortlist .remove-shortlist-item {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.2rem;
}
.widget_prepcenter_shortlist .remove-shortlist-item:hover { color: #e74c3c; }




/* ==========================================================================
   SINGLE UNIVERSITY PAGE STYLES
   ========================================================================== */

/* --- Hero Section --- */
.uni-hero {
    position: relative;
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
}
.uni-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
}
.uni-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 30px;
}
.uni-hero-logo {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.95);
    border-radius: var(--radius);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.uni-hero-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.uni-hero-title {
    font-size: 3.5rem;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.uni-hero-location {
    font-size: 1.2rem;
    font-weight: 500;
}
.uni-hero-location a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.2s;
}
.uni-hero-location a:hover {
    opacity: 0.8;
}

/* --- Details Grid --- */
.uni-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.detail-box {
    background: var(--card);
    padding: 20px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.detail-box i {
    font-size: 2rem;
    color: var(--accent);
}
.detail-label {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 2px;
}
.detail-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}
.detail-value a {
    color: var(--primary);
}

/* --- Content Boxes --- */
.uni-content-box {
    background: var(--card);
    padding: 25px;
    border-radius: var(--radius);
    margin-bottom: 30px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.uni-content-box h2, .uni-content-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    display: flex;
    align-items: center;
    gap: 10px;
}
.uni-content-box h3 i {
    color: var(--primary);
}

.uni-grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.uni-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .uni-hero-content {
        flex-direction: column;
        text-align: center;
    }
    .uni-hero-title {
        font-size: 2.5rem;
    }
    .uni-grid-two-col {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ENHANCED SINGLE UNIVERSITY PAGE STYLES
   ========================================================================== */

/* --- Hero Section Enhancements --- */
.uni-hero {
    min-height: 450px; /* زيادة الارتفاع */
}
.uni-hero-overlay {
    background: linear-gradient(to top, rgba(11, 19, 26, 0.95) 10%, rgba(11, 19, 26, 0.1) 100%); /* تدرج أغمق */
}
.uni-hero-location {
    display: inline-flex; /* لترتيب العناصر بشكل أفقي */
    align-items: center;
    gap: 8px; /* مسافة بين العناصر */
}
.country-flag-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.7);
    display: inline-block;
    vertical-align: middle;
}
.uni-hero-website {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 15px;
    opacity: 0.9;
}
.uni-hero-website a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.uni-hero-website a:hover {
    color: var(--accent);
    border-color: transparent;
}

/* --- Redesigned Details Grid --- */
.uni-details-grid {
    grid-template-columns: 1fr 1fr; /* فرض عمودين فقط */
}
.detail-box {
    display: flex;
    flex-direction: column; /* ترتيب العناصر بشكل عمودي */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background: var(--card);
    padding: 30px 20px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.detail-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}
.detail-box i {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 10px;
}
.detail-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
}
.detail-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

/* --- Tag Links for Majors --- */
.uni-tags-list a.tag-item {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.uni-tags-list a.tag-item:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Responsive Adjustments for new grid --- */
@media (max-width: 600px) {
    .uni-details-grid {
        grid-template-columns: 1fr; /* عمود واحد في الشاشات الصغيرة */
    }
}


/* ==========================================================================
   ENHANCED UNIVERSITY ARCHIVE FILTERS
   ========================================================================== */

.university-filters-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    padding: 30px;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 50px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    box-shadow: var(--shadow);
}

.filter-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.filter-item label {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-item select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 88%);
    border-radius: 12px;
    font-size: 1rem;
    background-color: var(--card);
    color: var(--text);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.filter-item select:disabled {
    background-color: color-mix(in oklab, var(--text), transparent 95%);
    cursor: not-allowed;
    opacity: 0.6;
}

.filter-item select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring);
}

/* --- Results Area --- */
#university-results-container {
    position: relative;
    min-height: 300px;
}
#university-results-container .results-content {
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   STYLES FOR NEW SINGLE UNIVERSITY ELEMENTS
   ========================================================================== */

/* --- Hero Section - New Branches --- */
.uni-hero-branches {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 10px;
    color: var(--muted);
    opacity: 0.9;
}
.uni-hero-branches i {
    color: var(--accent);
    margin-right: 5px;
}

/* --- New Diplomas List --- */
.diplomas-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.diploma-item {
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    border-radius: 12px;
    padding: 20px;
}
.diploma-title {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    color: var(--text);
}
.diploma-type-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.diploma-ranking {
    font-size: 1rem;
    margin: 0 0 15px 0;
}
.diploma-ranking i {
    color: var(--accent);
    margin-right: 5px;
}
.diploma-ranking-source {
    font-size: 0.9rem;
    color: var(--muted);
    font-style: italic;
}
.diploma-specializations {
    font-size: 0.95rem;
}
.diploma-specializations strong {
    color: var(--muted);
    margin-bottom: 10px;
    display: block;
}
/* --- Small Tag for Specializations --- */
.tag-item-small {
    background-color: var(--surface);
    color: var(--muted);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

/* --- New Fees List --- */
.uni-fees-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.uni-fees-list li {
    font-size: 1.1rem;
    padding: 15px 0;
    border-bottom: 1px dashed color-mix(in oklab, var(--text), transparent 90%);
}
.uni-fees-list li:last-child {
    border-bottom: none;
}
.fee-range {
    display: block;
    font-weight: 700;
    color: var(--text);
}
.fee-range strong {
    color: var(--accent);
}
.fee-city-note {
    font-size: 0.9rem;
    color: var(--muted);
    font-style: italic;
}


/* ==========================================================================
   STYLES FOR NEW CREATIVE UNIVERSITY LAYOUT
   ========================================================================== */

/* --- 1. The 2-Column Grid Layout --- */
.uni-creative-layout {
    display: grid;
    /* النسبة: عمود المعلومات أصغر (2) وعمود الشهادات أكبر (3) */
    grid-template-columns: 2fr 3fr; 
    gap: 30px;
    align-items: flex-start; /* يضمن بدء الأعمدة من الأعلى */
}

/* في الشاشات الصغيرة، اجعلها عموداً واحداً */
@media (max-width: 900px) {
    .uni-creative-layout {
        grid-template-columns: 1fr;
    }
}

/* --- 2. Styling for the new "Info Box" (Column 1) --- */
.uni-info-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* استخدام gap بدلاً من margin */
    gap: 25px; 
}

.info-box-item {
    display: flex; /* أيقونة بجانب المحتوى */
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px dashed color-mix(in oklab, var(--text), transparent 90%);
}
.info-box-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-box-item .icon {
    flex-shrink: 0; /* منع الأيقونة من الانكماش */
    font-size: 1.2rem;
    color: var(--accent);
    width: 20px;
    text-align: center;
    margin-top: 4px;
}

.info-box-item .label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.info-box-item .value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

/* تنسيق خاص لقائمة الرسوم داخل الصندوق */
.info-box-item .value .fee-entry {
    display: block;
    margin-bottom: 5px;
}
.info-box-item .value .fee-entry strong {
    color: var(--accent);
}
.info-box-item .value .fee-entry em {
    font-size: 0.9rem;
    color: var(--muted);
    font-style: italic;
    margin-left: 5px;
}

/* تنسيق خاص للتاغات داخل الصندوق */
.info-box-item .value.uni-tags-list {
    margin-top: -5px; /* لتقليل المسافة الناتجة عن الـ label */
}

/* --- 3. Styling for Diploma Column (Column 2) --- */
.uni-diplomas-col .uni-content-box {
    /* يمكن جعل الصندوق مميزاً */
    background: var(--surface); /* لون أغمق قليلاً */
}



/* ==========================================================================
   STYLES FOR CLICKABLE SPECIALIZATION TAGS
   ========================================================================== */

.tag-item-small.is-link {
    /* اجعلها تبدو كرابط */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    background-color: var(--surface); /* لون مختلف قليلاً */
    color: var(--muted);
}

.tag-item-small.is-link:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}



/* ==========================================================================
   STYLES FOR CREATIVE UNIVERSITY LAYOUT V2
   ========================================================================== */

/* --- 1. About Box (أول صندوق) --- */
.uni-about-box {
    margin-bottom: 40px; /* زيادة المسافة قبل العمودين */
}

/* --- 2. The New 2-Column Grid --- */
.uni-creative-layout-v2 {
    display: grid;
    /* النسبة: عمود المعلومات أصغر (1) وعمود الشهادات أكبر (1.5) */
    grid-template-columns: 1fr 1.5fr; 
    gap: 40px; /* زيادة المسافة بين الأعمدة */
    align-items: flex-start;
}

/* في الشاشات الصغيرة، اجعلها عموداً واحداً */
@media (max-width: 900px) {
    .uni-creative-layout-v2 {
        grid-template-columns: 1fr;
    }
    /* إلغاء التثبيت في الشاشات الصغيرة */
    .uni-info-col-v2 .sticky-box {
       position: static; 
    }
}

/* --- 3. Column 1: Info Column (Sticky) --- */
.uni-info-col-v2 .sticky-box {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 100px; /* اضبط هذا الرقم ليتناسب مع ارتفاع الهيدر الثابت لديك */
    align-self: start; 
    /* يمكنك إضافة تنسيقات إضافية للصندوق الثابت إذا أردت */
    /* background: var(--surface); */ 
}

/* (تنسيقات .uni-info-box-list و .info-box-item تبقى كما كانت في الإصدار السابق) */


/* --- 4. Column 2: Diplomas Column --- */

/* عنوان مميز لقسم الشهادات */
.section-title-styled {
    font-size: 1.8rem;
    color: var(--primary);
    margin: 0 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent);
    display: inline-flex; /* لضبط المسافة مع الأيقونة */
    align-items: center;
    gap: 10px;
}
.section-title-styled i {
    color: var(--accent);
}

/* قائمة بطاقات الشهادات */
.diplomas-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 25px; /* المسافة بين البطاقات */
}

/* بطاقة الشهادة الواحدة */
.diploma-card {
    display: flex; /* أيقونة بجانب المحتوى */
    gap: 20px;
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.diploma-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-left: 4px solid var(--accent); /* تمييز عند المرور */
    padding-left: 21px; /* تعويض المسافة المضافة للحد */
}

/* تنسيق أيقونة البطاقة */
.diploma-card-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}

/* محتوى البطاقة */
.diploma-card-content {
    flex-grow: 1;
}

/* (تنسيقات .diploma-title, .diploma-type-badge, .diploma-ranking, .diploma-specializations تبقى كما كانت) */

/* تعديل بسيط على التخصصات داخل البطاقة */
.diploma-specializations {
    margin-top: 15px; /* إضافة مسافة قبل التخصصات */
}

/* ==========================================================================
   STYLES FOR SIMPLE TAXONOMY ARCHIVE LIST
   ========================================================================== */

.taxonomy-description {
    font-size: 1.1rem;
    color: var(--muted);
    margin-top: 10px;
    margin-bottom: 30px; /* Add space below description */
    line-height: 1.7;
}

.simple-archive-list ul {
    list-style: none; /* إزالة نقاط القائمة الافتراضية */
    padding: 0;
    margin: 0;
    display: flex; /* استخدام Flexbox لتوزيع العناصر */
    flex-direction: column; /* ترتيب العناصر بشكل عمودي */
    gap: 15px; /* المسافة بين العناصر */
}

.simple-archive-list li {
    background: var(--card); /* استخدام لون البطاقة للخلفية */
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%); /* حد رقيق */
    border-radius: 12px; /* حواف دائرية */
    transition: all 0.2s ease-in-out; /* تأثير انتقال ناعم */
}

.simple-archive-list li:hover {
    transform: translateX(5px); /* تحريك طفيف عند المرور */
    border-left: 4px solid var(--accent); /* إضافة تمييز لوني */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* ظل خفيف */
}

.simple-archive-list li a {
    display: block; /* جعل الرابط يملأ كامل العنصر li */
    padding: 18px 25px; /* حشوة داخلية للرابط */
    text-decoration: none;
    color: var(--text); /* لون النص الأساسي */
    font-size: 1.1rem; /* حجم الخط */
    font-weight: 600; /* وزن الخط */
    transition: color 0.2s ease; /* انتقال ناعم للون */
}

.simple-archive-list li a:hover {
    color: var(--primary); /* تغيير لون النص عند المرور */
}

/* (اختياري) تنسيق ترقيم الصفحات إذا كنت ستستخدمه */
.main-col .navigation.posts-navigation {
    margin-top: 40px;
    border-top: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    padding-top: 30px;
}
.main-col .navigation.posts-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}
.main-col .navigation.posts-navigation .nav-previous a,
.main-col .navigation.posts-navigation .nav-next a {
    padding: 10px 20px;
    background: var(--surface);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}
.main-col .navigation.posts-navigation .nav-previous a:hover,
.main-col .navigation.posts-navigation .nav-next a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* =================================== */
/* 1. تصميم الهيرو (Country Hero)      */
/* =================================== */

.country-single-creative .country-hero {
    position: relative;
    padding: 60px 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.country-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* زيادة التعتيم قليلاً لرؤية النص الأبيض */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.country-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.country-hero-flag {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.country-hero-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.country-hero .entry-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.country-hero .entry-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.country-hero-meta {
    display: flex;
    gap: 30px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.country-hero-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.country-hero-meta .meta-item i {
    font-size: 1.5rem;
    /* استخدام اللون المميز للأيقونات */
    color: var(--accent);
}

.country-hero-meta .meta-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
}

.country-hero-meta .meta-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    /* استخدام اللون المميز الواضح للقيم */
    color: var(--accent);
    text-align: left;
}

.country-hero-meta .meta-sub-value {
    font-size: 0.8rem;
    /* إظهار النص الفرعي بشكل أوضح */
    color: rgba(255, 255, 255, 0.85);
    display: block;
    text-align: left;
}

/* =================================== */
/* 2. تصميم محتوى الأقسام المكدسة      */
/* =================================== */

/* عنوان مميز للأقسام */
.section-title-styled {
    font-size: 1.8rem;
    color: var(--primary);
    margin: 0 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--accent);
    display: inline-flex; 
    align-items: center;
    gap: 10px;
}
.section-title-styled i {
    color: var(--accent);
}

/* (Fact Cards) - هذه الأنماط موجودة بالفعل لديك */
.fact-card {
    background: var(--card); /* تعديل ليستخدم متغيرات الثيم */
    padding: 25px;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.fact-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}
.fact-card h4 {
    font-size: 1.3rem;
    margin: 0 0 10px 0;
}
.fact-card.advantages-card ul {
    list-style: none;
    padding-left: 0;
}
.fact-card.advantages-card li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--text); /* التأكد من لون النص */
}
.fact-card.advantages-card li::before {
    content: '\f00c'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #28a745;
    position: absolute;
    left: 0;
    top: 2px;
}

/* (Cost Cards) - هذه الأنماط موجودة بالفعل لديك */
.cost-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.cost-row-item {
    background: var(--surface); /* تعديل ليستخدم متغيرات الثيم */
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.cost-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--card); /* تعديل ليستخدم متغيرات الثيم */
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    font-size: 1.1rem;
    font-weight: 600;
}
.cost-item-header i {
    color: var(--primary);
}

.cost-item-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-original {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text); /* التأكد من لون النص */
}

.cost-equivalent {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text); /* التأكد من لون النص */
    background: #f0f6fa;
    padding: 5px 10px;
    border-radius: 6px;
    align-self: flex-start;
}
/* تخصيص للوضع الداكن */
:root:not([data-theme="light"]) .cost-equivalent {
    background: var(--surface);
    color: var(--muted);
}


/* (Universities List) - هذه الأنماط موجودة لديك */
.universities-list-columnar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* (Rate Disclaimer) */
.rate-disclaimer {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted); /* التأكد من لون النص */
    margin-top: 20px;
}

/* ==========================================================================
   STYLES FOR CREATIVE SINGLE COUNTRY PAGE V3 (3-Column Layout)
   ========================================================================== */

/* 1. العنوان والنبذة */
.creative-header-v2 {
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.creative-header-v2 .entry-title {
    font-size: 2.8rem;
    line-height: 1.2;
    margin: 0;
    color: var(--primary);
}

.content-image-box-v2 {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    line-height: 1.8;
    font-size: 1.1rem;
}

.wp-post-image-floated-v2 {
    float: left;
    width: 40%;
    max-width: 400px;
    height: auto;
    border-radius: var(--radius);
    margin-right: 30px;
    margin-bottom: 20px;
    shape-outside: margin-box;
}

.content-image-box-v2:after {
    content: "";
    display: table;
    clear: both;
}

/* 2. الهيكل ثلاثي الأعمدة */
.country-3col-grid {
    display: grid;
    /* النسبة: معلومات | جامعات | سايدبار */
    grid-template-columns: 2fr 3fr 2fr;
    gap: 30px;
    align-items: flex-start;
}

/* تعديلات للشاشات المختلفة */
@media (max-width: 1100px) {
    /* في الشاشات الأصغر (مثل التابلت)، نلغي السايدبار ونكتفي بعمودين */
    .country-3col-grid {
        /* [معلومات] | [جامعات] */
        grid-template-columns: 1fr 2fr;
    }
    /* إخفاء السايدبار الافتراضي (الذي يأتي من .content-grid) */
    .country-3col-grid .sidebar-col {
        display: none;
    }
}

@media (max-width: 768px) {
    /* في شاشات الموبايل، نجعلها عموداً واحداً */
    .country-3col-grid {
        grid-template-columns: 1fr;
    }
    /* تغيير ترتيب العرض في الموبايل */
    .info-col-sticky { order: 1; }
    .main-col { order: 2; }
}

/* 3. العمود الأول: صندوق معلومات الدولة (الجميل) */
.info-col-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* يعتمد على ارتفاع الهيدر */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px; /* المسافة بين البوكسات */
}

.info-box {
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.info-box .info-label {
    display: flex; /* أيقونة بجانب النص */
    align-items: center;
    gap: 10px;
    font-size: 0.85rem; /* خط أصغر */
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px; /* أبقينا على المسافة السفلية */
    /* تم حذف البوردر والـ padding */
}

.info-box .info-label i {
    color: var(--accent);
}

.info-box .info-value {
    font-size: 1.1rem; /* خط أنيق */
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}
.info-box .info-sub-value {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 5px;
}

/* تصميم بوكسات تكلفة المعيشة */
.cost-boxes-grid {
    display: grid;
    grid-template-columns: 1fr; /* عمود واحد داخل البوكس */
    gap: 15px;
}
.cost-box-item {
    background: var(--surface);
    border-radius: 10px;
    padding: 12px 15px;
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
}
.cost-box-item .cost-city {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 5px;
}
.cost-box-item .cost-original-small {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
}
.cost-box-item .cost-equivalent-small {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 3px;
}

/* خط إخلاء المسؤولية الصغير */
.rate-disclaimer-final {
    font-size: 0.75rem; /* خط صغير جداً */
    color: var(--muted);
    font-style: italic;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center;
}

/* تصميم قائمة الميزات */
.advantages-list-small {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.advantages-list-small li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 0.95rem; /* خط أصغر */
    color: var(--text);
}
.advantages-list-small li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #28a745;
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 0.8rem;
}

/* 4. العمود الثاني: الجامعات (استخدام كلاسات جديدة) */
.universities-list-wrapper {
    /* هذا البوكس يجمع الجامعات لتمييزها */
    background: var(--card);
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow);
}
.universities-list-columnar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* 5. تصميم كارت الجامعة الجديد (V2) */
.uni-list-card-v2 {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface); /* لون أفتح لتمييزه عن الخلفية */
    border: 1px solid color-mix(in oklab, var(--text), transparent 92%);
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.uni-list-card-v2:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.uni-list-logo-v2 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: #ffffff; /* خلفية بيضاء للشعارات */
    border-radius: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.uni-list-logo-v2 img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.uni-list-details-v2 {
    flex-grow: 1;
}

.uni-list-name-v2 {
    margin: 0 0 10px 0;
    font-size: 1.25rem; /* خط أكبر للاسم */
    font-weight: 700;
    color: var(--text);
}
.uni-list-card-v2:hover .uni-list-name-v2 {
    color: var(--primary);
}

.uni-list-meta-stacked-v2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
    font-size: 0.95rem; /* الخط الجميل */
    font-family: 'Inter', sans-serif; /* استخدام خط مختلف إذا أردت */
}
.uni-list-meta-item-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.uni-list-meta-item-v2 i {
    color: var(--accent);
    font-size: 0.9rem;
}


/* ==========================================================================
   STYLES FOR V3 - Primary Info Box (Flag + Details)
   ========================================================================== */

/* 1. الصندوق الأساسي المدمج */
.info-box-primary {
    display: flex;
    align-items: center; /* توسيط عمودي للعمودين */
    gap: 20px;
    /* يمكن إضافة خلفية مميزة هنا إذا أردت */
    /* background: var(--surface); */
}

/* 2. عمود العلم */
.primary-info-flag {
    flex-shrink: 0;
    width: 100px; /* عرض ثابت لعمود العلم */
}
.primary-info-flag .country-flag-main {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface);
    box-shadow: 0 0 0 4px var(--accent);
}

/* 3. عمود التفاصيل */
.primary-info-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 18px; /* المسافة بين (العاصمة، العملة، اللغة) */
}

.primary-detail-item .info-label {
    /* يستخدم نفس ستايل .info-label الذي عدلناه */
    margin-bottom: 5px; /* تقليل المسافة بين العنوان والقيمة */
}

.primary-detail-item .info-value {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    padding-left: 26px; /* محاذاة مع النص (10px gap + 16px icon) */
}

.primary-detail-item .info-sub-value {
    display: block; /* لضمان أنه "في السطر الموالي" */
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 5px;
    padding-left: 26px; /* محاذاة */
}

/* 4. إعادة البوردر السفلي للبوكسات الأخرى */
.info-box:not(.info-box-primary) .info-label {
    border-bottom: 1px solid color-mix(in oklab, var(--text), transparent 94%);
    padding-bottom: 8px;
}

/* ==========================================================================
   تعديل V3: جعل الأعمدة الجانبية ثابتة (الأفضل عملياً)
   ========================================================================== */

/* 1. تثبيت العمود الأول (معلومات الدولة) */
/* (لقد أضفنا هذا الكود بالفعل في خطوة سابقة، هذا فقط للتأكيد) */
.info-col-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* اضبط هذا الرقم ليتناسب مع ارتفاع الهيدر */
    align-self: start;
}

/* 2. إلغاء تثبيت العمود الأوسط (الجامعات) للسماح له بالتحرك */
.country-3col-grid .main-col {
    position: static; /* مهم: هذا يلغي أي تثبيت سابق */
    align-self: normal;
}

/* 3. تثبيت العمود الثالث (السايد بار) */
/* (هذا الكود موجود بالفعل لديك في main.css، لكننا نؤكده هنا) */
.country-3col-grid .sidebar-col {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* اضبط هذا الرقم ليتناسب مع ارتفاع الهيدر */
    align-self: start;
}