.aretech-directory{max-width:1250px;margin:auto;padding:28px 18px 70px;font-family:inherit;color:#162a43}
.aretech-directory-heading{text-align:center;margin-bottom:28px}.aretech-directory-heading>span{font-size:11px;letter-spacing:2.3px;font-weight:900;color:#0b57a4}.aretech-directory-heading h2{font-size:40px;line-height:1.12;margin:8px 0;color:#10213d;font-weight:850}.aretech-directory-heading p{color:#6b7d92;margin:0;font-size:15px}
.aretech-directory-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:22px;align-items:start}
.aretech-category-sidebar{position:sticky;top:25px;background:#fff;border:1px solid #e3eaf2;border-radius:17px;padding:13px;box-shadow:0 8px 28px rgba(15,42,75,.06)}
.aretech-sidebar-heading{font-size:14px;font-weight:850;padding:7px 9px 12px;color:#172b46}
.aretech-check-row{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;box-sizing:border-box;border-radius:10px;padding:10px 9px;margin:2px 0;color:#53677e;font-size:12px;font-weight:750;cursor:pointer;transition:.2s}
.aretech-check-row input{position:absolute;opacity:0;pointer-events:none}.aretech-check-box{width:15px;height:15px;border:1.5px solid #b9c8d8;border-radius:4px;background:#fff;position:relative;box-sizing:border-box}.aretech-check-row input:checked + .aretech-check-box{background:#0b57a4;border-color:#0b57a4}.aretech-check-row input:checked + .aretech-check-box:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.aretech-check-row:has(input:checked){background:#edf5ff;color:#0b57a4}.aretech-check-row b{font-size:10px;color:#8494a6;background:#f1f5f9;border-radius:999px;padding:3px 7px}.aretech-check-row:has(input:checked) b{background:#dcecff;color:#0b57a4}
.aretech-sidebar-help{margin:15px 4px 3px;padding:13px 11px;border-radius:12px;background:#f5f9ff;border:1px solid #e8f0f8}.aretech-sidebar-help strong{display:block;color:#0b57a4;font-size:11px}.aretech-sidebar-help span{display:block;color:#7a8a9d;font-size:10px;line-height:1.5;margin-top:4px}
.aretech-directory-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 135px 80px;gap:9px;align-items:center;margin-bottom:14px}.aretech-directory-search{position:relative}.aretech-directory-search>span{position:absolute;left:13px;top:9px;font-size:20px;color:#7b8fa6}.aretech-directory-search input{width:100%;height:43px;box-sizing:border-box;border:1px solid #e0e8f1;border-radius:10px;padding:0 12px 0 39px;outline:none;box-shadow:0 5px 17px rgba(15,42,75,.04)}.aretech-directory-search input:focus{border-color:#0b57a4}.aretech-sort{height:43px;border:1px solid #e0e8f1;border-radius:10px;background:#fff;padding:0 10px;color:#52677e}.aretech-total{height:43px;border:1px solid #e0e8f1;border-radius:10px;background:#f8fbff;display:flex;align-items:center;justify-content:center;gap:4px}.aretech-total strong{color:#0b57a4}.aretech-total small{color:#75869a;font-size:9px}.aretech-selected-label{font-size:14px;font-weight:850;color:#1a304b;margin:5px 0 12px}
.aretech-course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.aretech-card{background:#fff;border:1px solid #e1e8f0;border-radius:17px;overflow:hidden;box-shadow:0 7px 25px rgba(15,42,75,.055);transition:.2s}.aretech-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(15,42,75,.11)}.aretech-card-image{height:175px;background:#edf4fb;display:block;position:relative;overflow:hidden}.aretech-card-image img{width:100%;height:100%;object-fit:cover;display:block}.aretech-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#0b57a4;font-weight:900;font-size:25px;letter-spacing:2px}.aretech-card-category{position:absolute;left:12px;top:12px;background:#fff;color:#0b57a4;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:850;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.aretech-card-body{padding:16px}.aretech-card-body h3{font-size:18px;line-height:1.3;margin:0 0 6px}.aretech-card-body h3 a{color:#10213d;text-decoration:none}.aretech-card-code{font-size:11px;color:#71849a;font-weight:750;margin-bottom:10px}.aretech-card-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.aretech-card-facts>div{background:#f7faff;border:1px solid #edf2f7;border-radius:9px;padding:9px}.aretech-card-facts small{display:block;text-transform:uppercase;letter-spacing:.5px;font-size:8px;color:#8a99aa;font-weight:850}.aretech-card-facts strong{display:block;font-size:11px;color:#2c4058;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aretech-card-link{border-top:1px solid #e9eef4;margin-top:12px;padding-top:12px;display:flex;justify-content:space-between;color:#0b57a4;text-decoration:none;font-size:12px;font-weight:850}.aretech-card-link span{font-size:17px}.aretech-empty{text-align:center;padding:65px 20px}.aretech-empty div{font-size:40px}.aretech-empty h3{color:#172b46}.aretech-empty p{color:#71839a}
.aretech-pagination{display:flex;justify-content:center;gap:6px;margin-top:25px}.aretech-pagination button{width:36px;height:36px;border:1px solid #e0e8f1;background:#fff;border-radius:8px;cursor:pointer}.aretech-pagination button.active{background:#0b57a4;color:#fff;border-color:#0b57a4}
@media(max-width:1100px){.aretech-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.aretech-directory-layout{grid-template-columns:1fr}.aretech-category-sidebar{position:static}.aretech-category-sidebar{overflow:visible}.aretech-check-row{display:grid;width:100%}.aretech-sidebar-help{display:block}.aretech-sidebar-heading{display:block}.aretech-course-grid{grid-template-columns:1fr}.aretech-directory-toolbar{grid-template-columns:1fr 110px}.aretech-total{grid-column:2}.aretech-directory-heading h2{font-size:32px}}

.aretech-course-details{background:linear-gradient(180deg,#f4f8fd,#fff 65%);padding:35px 18px 80px}.aretech-details-wrap{max-width:1100px;margin:auto}.aretech-details-back{color:#0b57a4;text-decoration:none;font-weight:800;font-size:13px}.aretech-details-hero{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:stretch;background:#fff;border:1px solid #e1e8f0;border-radius:22px;padding:25px;margin-top:15px;box-shadow:0 12px 38px rgba(15,42,75,.07)}.aretech-details-copy{display:flex;flex-direction:column;justify-content:center;padding:12px}.aretech-details-cat{align-self:flex-start;background:#eaf3ff;color:#0b57a4;padding:7px 11px;border-radius:999px;font-size:10px;font-weight:850}.aretech-details-copy h1{font-size:40px;line-height:1.15;color:#10213d;margin:15px 0 10px}.aretech-details-copy p{color:#687b90;line-height:1.65}.aretech-details-image{min-height:280px;border-radius:16px;overflow:hidden;background:#edf4fb}.aretech-details-image img{width:100%;height:100%;object-fit:cover}.aretech-details-image>div{height:100%;display:flex;align-items:center;justify-content:center;color:#0b57a4;font-size:30px;font-weight:900}.aretech-details-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.aretech-details-facts>div{background:#fff;border:1px solid #e1e8f0;border-radius:13px;padding:14px;box-shadow:0 6px 20px rgba(15,42,75,.04)}.aretech-details-facts small{display:block;color:#8b99aa;text-transform:uppercase;font-size:9px;font-weight:850;letter-spacing:.5px}.aretech-details-facts strong{display:block;color:#233b57;font-size:13px;margin-top:5px}.aretech-details-content{background:#fff;border:1px solid #e1e8f0;border-radius:20px;padding:30px;box-shadow:0 8px 28px rgba(15,42,75,.05)}.aretech-details-heading{border-bottom:1px solid #edf1f6;padding-bottom:15px;margin-bottom:22px}.aretech-details-heading span{font-size:9px;letter-spacing:1.2px;color:#0b57a4;font-weight:900}.aretech-details-heading h2{font-size:25px;color:#10213d;margin:4px 0 0}.aretech-details-content>div:last-child{font-size:15px;line-height:1.85;color:#52677d}.aretech-details-content h2,.aretech-details-content h3{color:#10213d}.aretech-details-content li{margin-bottom:7px}
@media(max-width:750px){.aretech-details-hero{grid-template-columns:1fr}.aretech-details-image{min-height:210px}.aretech-details-copy h1{font-size:31px}.aretech-details-facts{grid-template-columns:1fr 1fr}}@media(max-width:450px){.aretech-details-facts{grid-template-columns:1fr}.aretech-details-content{padding:20px}}

/* v1.0.1 — exact responsive card grid */
@media (min-width:1101px){
  .aretech-course-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media (min-width:761px) and (max-width:1100px){
  .aretech-course-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:760px){
  .aretech-course-grid{grid-template-columns:1fr !important}
}

/* v1.0.2 fixes */
.aretech-directory .aretech-results{min-height:220px;transition:opacity .2s}
.aretech-directory.is-loading .aretech-results{opacity:.55}
.aretech-check-row{min-height:38px}
.aretech-check-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v1.0.3 — course metadata visibility */
.aretech-card-code{display:block;margin:0 0 10px;color:#5d7289;font-size:11px;font-weight:750}
.aretech-card-code span{color:#8797a8;font-weight:800;margin-right:3px}

/* v1.0.4 — metadata fallback visibility */
.aretech-card-facts strong{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.0.5 — LIGHT COLORFUL UI
   ========================================================= */
.aretech-directory{
  position:relative;
  max-width:1320px;
  padding:46px 22px 80px;
  color:#10284a;
  background:
    radial-gradient(circle at 4% 8%,rgba(93,174,255,.13),transparent 24%),
    radial-gradient(circle at 98% 6%,rgba(255,154,102,.12),transparent 22%),
    radial-gradient(circle at 96% 92%,rgba(95,211,188,.10),transparent 22%),
    linear-gradient(135deg,#f8fbff 0%,#ffffff 48%,#fffafe 100%);
  border-radius:28px;
  overflow:hidden;
}
.aretech-directory:before,
.aretech-directory:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.aretech-directory:before{width:230px;height:230px;left:-150px;top:250px;background:radial-gradient(circle,#dceeff 0%,rgba(220,238,255,0) 70%)}
.aretech-directory:after{width:250px;height:250px;right:-150px;bottom:-90px;background:radial-gradient(circle,#ffe9dc 0%,rgba(255,233,220,0) 70%)}
.aretech-directory > *{position:relative;z-index:1}

.aretech-directory-heading{margin-bottom:31px}
.aretech-directory-heading>span{
  display:inline-block;
  color:#0b57a4;
  font-size:11px;
  letter-spacing:2.5px;
  font-weight:900;
  margin-bottom:7px;
}
.aretech-directory-heading h2{
  margin:0;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.7px;
  color:#102b52;
  font-weight:850;
}
.aretech-heading-accent{
  background:linear-gradient(90deg,#ff7a18,#f0448e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.aretech-directory-heading p{
  margin:10px 0 0;
  color:#667b96;
  font-size:14px;
  line-height:1.65;
}

.aretech-directory-layout{gap:24px}
.aretech-category-sidebar{
  background:rgba(255,255,255,.92);
  border:1px solid #e0e9f3;
  border-radius:18px;
  box-shadow:0 12px 35px rgba(26,61,101,.07);
  padding:14px;
}
.aretech-sidebar-heading{
  font-size:14px;
  padding:7px 9px 13px;
  color:#102b52;
}
.aretech-sidebar-heading:after{
  content:"";
  display:inline-block;
  width:30px;
  height:3px;
  border-radius:10px;
  margin-left:7px;
  vertical-align:middle;
  background:linear-gradient(90deg,#0b72df,#ff7a18);
}
.aretech-check-row{border-radius:10px;padding:10px 9px}
.aretech-check-row:hover{background:#f5f9ff}
.aretech-check-row:has(input:checked){
  background:linear-gradient(90deg,#edf6ff,#f8fbff);
  color:#0b57a4;
  box-shadow:inset 3px 0 0 #1672d4;
}
.aretech-sidebar-help{
  background:linear-gradient(135deg,#eef7ff,#fff8f3);
  border:1px solid #e4edf6;
  border-radius:13px;
}

.aretech-directory-toolbar{
  grid-template-columns:minmax(0,1fr) 150px 145px 78px;
  gap:10px;
  margin-bottom:16px;
}
.aretech-directory-search input,
.aretech-sort,
.aretech-fee-filter{
  background:rgba(255,255,255,.96);
  border-color:#dce6f1;
  box-shadow:0 7px 22px rgba(25,65,105,.05);
}
.aretech-directory-search input{height:45px}
.aretech-sort,
.aretech-fee-filter{height:45px}
.aretech-fee-filter{
  color:#102b52;
  font-size:13px;
  font-weight:600;
  border-radius:10px;
  padding:0 12px;
  cursor:pointer;
}
.aretech-total{height:45px;background:#fff;border-color:#dce6f1}
.aretech-total strong{color:#0b63c7}
.aretech-selected-label{
  font-size:14px;
  margin:2px 0 13px;
  color:#102b52;
}

.aretech-course-grid{gap:18px}
.aretech-card{
  border:1px solid #e1e9f2;
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 30px rgba(22,57,95,.065);
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.aretech-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(22,57,95,.12);
}
.aretech-card-image{
  height:155px;
  background:linear-gradient(135deg,#eef5fb,#f8fbff);
}
.aretech-card-image img{transition:transform .35s ease}
.aretech-card:hover .aretech-card-image img{transform:scale(1.025)}
.aretech-placeholder{
  color:#0b57a4;
  background:linear-gradient(135deg,#eef6ff,#f9fbff);
}
.aretech-card-category{
  top:12px;
  left:12px;
  border:1px solid rgba(255,255,255,.75);
  color:#0b57a4;
  background:rgba(255,255,255,.94);
}

.aretech-card-body{padding:15px 16px 16px}
.aretech-card-body h3{
  font-size:16px;
  line-height:1.32;
  min-height:42px;
  margin:0 0 7px;
}
.aretech-card-body h3 a{color:#102b52}
.aretech-card-excerpt{
  margin:0 0 10px;
  min-height:36px;
  color:#71849b;
  font-size:10.5px;
  line-height:1.55;
}
.aretech-card-code{
  color:#6b7e95;
  font-size:10px;
  margin-bottom:8px;
}
.aretech-card-code span{color:#91a0b0}
.aretech-card-facts{gap:7px}
.aretech-card-facts>div{
  padding:9px 10px;
  background:#f7faff;
  border:1px solid #edf2f7;
}
.aretech-card-facts small{font-size:8px}
.aretech-card-facts strong{font-size:10.5px}
.aretech-card-link{
  margin-top:11px;
  padding:10px 13px;
  border:1px solid #e4ebf3;
  border-radius:9px;
  background:#fff;
  color:#0b57a4;
  transition:.2s;
}
.aretech-card-link:hover{color:#fff}
.aretech-card-link span{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  background:#edf5ff;
  color:#0b57a4;
}

/* Subtle color accents — no overly colorful cards. */
.aretech-card.accent-blue .aretech-card-link:hover{background:linear-gradient(90deg,#0868d8,#3aa2ff);border-color:transparent}
.aretech-card.accent-orange .aretech-card-link:hover{background:linear-gradient(90deg,#ff7418,#ff9b54);border-color:transparent}
.aretech-card.accent-purple .aretech-card-link:hover{background:linear-gradient(90deg,#7b35dc,#b86cff);border-color:transparent}
.aretech-card.accent-green .aretech-card-link:hover{background:linear-gradient(90deg,#159b68,#37c994);border-color:transparent}

.aretech-card.accent-orange .aretech-card-category{color:#e96b17}
.aretech-card.accent-purple .aretech-card-category{color:#7a39c8}
.aretech-card.accent-green .aretech-card-category{color:#168b63}

.aretech-empty{
  background:rgba(255,255,255,.75);
  border:1px solid #e3ebf3;
  border-radius:17px;
}

@media(max-width:1100px){
  .aretech-directory{padding-left:18px;padding-right:18px}
}
@media(max-width:980px){
  .aretech-directory-toolbar{
    grid-template-columns:minmax(0,1fr) 140px 140px;
  }
  .aretech-total{
    grid-column:1 / -1;
    justify-self:start;
  }
}
@media(max-width:620px){
  .aretech-directory-toolbar{
    grid-template-columns:1fr;
  }
  .aretech-total{
    grid-column:auto;
    justify-self:stretch;
  }
  .aretech-fee-filter,
  .aretech-sort,
  .aretech-total{
    width:100%;
  }
}

@media(max-width:760px){
  .aretech-directory{padding:32px 12px 55px;border-radius:18px}
  .aretech-directory-heading h2{font-size:32px}
  .aretech-directory-heading p{font-size:13px}
  .aretech-heading-break{display:none}
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.0.6 — FULL PAGE BACKGROUND
   The subtle gradient now covers the entire page, while the
   directory remains a clean, slightly translucent surface.
   ========================================================= */
body.aretech-course-directory-page{
  background:
    radial-gradient(circle at 7% 5%, rgba(88,170,255,.14), transparent 25%),
    radial-gradient(circle at 96% 7%, rgba(255,151,99,.13), transparent 23%),
    radial-gradient(circle at 10% 92%, rgba(128,111,255,.07), transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(76,201,169,.08), transparent 24%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 42%,#fffafc 72%,#f8fbff 100%);
  background-attachment:fixed;
  min-height:100vh;
}
body.aretech-course-directory-page .aretech-directory{
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
body.aretech-course-directory-page .aretech-directory:before,
body.aretech-course-directory-page .aretech-directory:after{
  opacity:.45;
}
@media(max-width:980px){
  .aretech-directory-toolbar{
    grid-template-columns:minmax(0,1fr) 140px 140px;
  }
  .aretech-total{
    grid-column:1 / -1;
    justify-self:start;
  }
}
@media(max-width:620px){
  .aretech-directory-toolbar{
    grid-template-columns:1fr;
  }
  .aretech-total{
    grid-column:auto;
    justify-self:stretch;
  }
  .aretech-fee-filter,
  .aretech-sort,
  .aretech-total{
    width:100%;
  }
}

@media(max-width:760px){
  body.aretech-course-directory-page{
    background:
      radial-gradient(circle at 0 0,rgba(88,170,255,.12),transparent 30%),
      radial-gradient(circle at 100% 5%,rgba(255,151,99,.10),transparent 28%),
      linear-gradient(135deg,#f8fbff,#fff,#fffafd);
    background-attachment:scroll;
  }
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.0.7 — SUBTLE COLOR ACCENTS
   Inspired by the supplied reference: light colored text,
   badges, facts and buttons — never heavy/overly colorful.
   ========================================================= */

/* Category badge gets a soft tint instead of plain white. */
.aretech-card-category{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 5px 14px rgba(28,64,102,.08);
}
.aretech-card.accent-blue .aretech-card-category{
  color:#096bd1;
  background:#edf6ff;
  border-color:#d9ebff;
}
.aretech-card.accent-orange .aretech-card-category{
  color:#ee741e;
  background:#fff3e9;
  border-color:#ffe1c9;
}
.aretech-card.accent-purple .aretech-card-category{
  color:#7c35dc;
  background:#f5edff;
  border-color:#eadbff;
}
.aretech-card.accent-green .aretech-card-category{
  color:#12936b;
  background:#eafaf4;
  border-color:#d2f2e5;
}

/* Course title gets a tiny accent, while remaining dark and readable. */
.aretech-card.accent-blue .aretech-card-body h3 a:hover{color:#0875dc}
.aretech-card.accent-orange .aretech-card-body h3 a:hover{color:#ee741e}
.aretech-card.accent-purple .aretech-card-body h3 a:hover{color:#7c35dc}
.aretech-card.accent-green .aretech-card-body h3 a:hover{color:#12936b}

/* Metadata boxes: subtle color wash like the reference. */
.aretech-color-facts{gap:8px}
.aretech-color-facts>div{
  border:1px solid transparent;
  border-radius:10px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.aretech-color-facts>div:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(27,61,99,.06);
}
.aretech-color-facts small{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:700;
}
.aretech-fact-icon{
  font-size:12px;
  line-height:1;
}
.aretech-card.accent-blue .aretech-color-facts>div:first-child{
  background:#eef7ff;border-color:#d9edff;color:#1682df;
}
.aretech-card.accent-blue .aretech-color-facts>div:last-child{
  background:#f1efff;border-color:#e4ddff;color:#7145d8;
}
.aretech-card.accent-orange .aretech-color-facts>div:first-child{
  background:#fff4e9;border-color:#ffe2c8;color:#ed7118;
}
.aretech-card.accent-orange .aretech-color-facts>div:last-child{
  background:#fff0f7;border-color:#ffdbea;color:#e43d8b;
}
.aretech-card.accent-purple .aretech-color-facts>div:first-child{
  background:#f3efff;border-color:#e5dcff;color:#7139db;
}
.aretech-card.accent-purple .aretech-color-facts>div:last-child{
  background:#fff0fb;border-color:#f5d9ed;color:#d235b2;
}
.aretech-card.accent-green .aretech-color-facts>div:first-child{
  background:#ebfaf5;border-color:#d2f1e5;color:#11936c;
}
.aretech-card.accent-green .aretech-color-facts>div:last-child{
  background:#eef8ff;border-color:#d9edff;color:#1486cf;
}

.aretech-color-facts strong{color:#17365f!important}

/* CTA: light colored button, not a loud full gradient. */
.aretech-card-link{
  border:1px solid transparent;
  color:#12345e!important;
  font-weight:800;
  background:#f2f7ff;
}
.aretech-card-link span{
  transition:.18s ease;
}
.aretech-card.accent-blue .aretech-card-link{
  background:#eaf4ff;
  border-color:#d5eaff;
  color:#096bd1!important;
}
.aretech-card.accent-orange .aretech-card-link{
  background:#fff1e7;
  border-color:#ffe0c8;
  color:#e96e18!important;
}
.aretech-card.accent-purple .aretech-card-link{
  background:#f3edff;
  border-color:#e4d9ff;
  color:#7435d8!important;
}
.aretech-card.accent-green .aretech-card-link{
  background:#e9faf4;
  border-color:#d1f0e3;
  color:#128e68!important;
}
.aretech-card.accent-blue .aretech-card-link span{
  background:#d7ebff;color:#0875dc;
}
.aretech-card.accent-orange .aretech-card-link span{
  background:#ffe0c5;color:#e86c17;
}
.aretech-card.accent-purple .aretech-card-link span{
  background:#e4d7ff;color:#7134d6;
}
.aretech-card.accent-green .aretech-card-link span{
  background:#d1f1e4;color:#108a65;
}
.aretech-card-link:hover{
  filter:brightness(.985);
  transform:translateY(-1px);
  box-shadow:0 6px 15px rgba(27,61,99,.07);
}
.aretech-card-link:hover span{
  transform:translateX(2px);
}

/* Course-code line is also lightly tinted. */
.aretech-card.accent-blue .aretech-card-code{color:#2f74b9}
.aretech-card.accent-orange .aretech-card-code{color:#bd6b2b}
.aretech-card.accent-purple .aretech-card-code{color:#7851b7}
.aretech-card.accent-green .aretech-card-code{color:#31886e}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.0.8 — WIDER FULL-WIDTH LAYOUT
   Reduce excessive left/right empty space on large screens.
   ========================================================= */

/* Break out of the old 1320px visual width and use the
   available desktop viewport much more effectively. */
body.aretech-course-directory-page .aretech-directory{
  width:calc(100% - 48px);
  max-width:1700px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}

/* Give the sidebar a little more room while letting the
   course area consume the majority of the screen. */
body.aretech-course-directory-page .aretech-directory-layout{
  grid-template-columns:260px minmax(0,1fr);
  gap:22px;
}

/* Keep four cards on desktop but allow each card to grow wider
   with the available viewport. */
body.aretech-course-directory-page .aretech-course-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

@media (min-width:1500px){
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 56px);
    max-width:1720px;
  }
  body.aretech-course-directory-page .aretech-directory-layout{
    grid-template-columns:270px minmax(0,1fr);
    gap:24px;
  }
}

@media (min-width:1900px){
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 80px);
    max-width:1840px;
  }
}

@media (max-width:1100px){
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 30px);
  }
}

@media (max-width:760px){
  body.aretech-course-directory-page .aretech-directory{
    width:100%;
    padding-left:12px;
    padding-right:12px;
  }
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.0.9
   FIX: desktop content was still constrained by an upstream
   max-width/container rule. Target the actual plugin wrapper
   directly and let the course grid fill the available width.
   ========================================================= */

/* The directory itself should occupy almost the entire viewport. */
.aretech-directory{
  width:calc(100% - 40px) !important;
  max-width:1800px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

/* Main two-column layout: sidebar + flexible course area. */
.aretech-directory-layout{
  width:100% !important;
  max-width:none !important;
  grid-template-columns:250px minmax(0,1fr) !important;
  gap:22px !important;
  box-sizing:border-box;
}

/* Course area must be allowed to grow. */
.aretech-directory-main{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

/* Four equal cards across the available desktop width. */
.aretech-course-grid{
  width:100% !important;
  max-width:none !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}

/* Prevent cards from inheriting a narrow fixed width. */
.aretech-course-card,
.aretech-card{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box;
}

/* Search/filter row should also use the full course-area width. */
.aretech-directory-toolbar{
  width:100% !important;
  max-width:none !important;
}

/* Large screens: use even more of the viewport. */
@media (min-width:1400px){
  .aretech-directory{
    width:calc(100% - 56px) !important;
    max-width:1840px !important;
  }
  .aretech-directory-layout{
    grid-template-columns:270px minmax(0,1fr) !important;
    gap:24px !important;
  }
}

@media (min-width:1800px){
  .aretech-directory{
    width:calc(100% - 72px) !important;
    max-width:none !important;
  }
  .aretech-directory-layout{
    grid-template-columns:280px minmax(0,1fr) !important;
    gap:26px !important;
  }
}

/* Tablet: two cards. */
@media (max-width:1100px){
  .aretech-directory{
    width:calc(100% - 30px) !important;
  }
  .aretech-course-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Mobile: one card. */
@media (max-width:760px){
  .aretech-directory{
    width:100% !important;
    padding-left:12px;
    padding-right:12px;
  }
  .aretech-directory-layout{
    grid-template-columns:1fr !important;
  }
  .aretech-course-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.1.0
   LAYOUT REFINEMENT:
   Desktop = 3 cards
   Tablet  = 2 cards
   Mobile  = 1 card
   Sidebar = narrower
   ========================================================= */

/* Narrower category sidebar so the course cards have more
   horizontal room without making the whole layout oversized. */
.aretech-directory-layout{
  grid-template-columns:220px minmax(0,1fr) !important;
  gap:22px !important;
}

.aretech-category-sidebar{
  width:100% !important;
  box-sizing:border-box;
}

/* Desktop: three larger course cards. */
.aretech-course-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
}

/* Keep cards comfortably sized and allow their content to breathe. */
.aretech-card,
.aretech-course-card{
  min-width:0 !important;
}

/* Larger desktop screens: keep sidebar compact while using
   the available course area for three generous cards. */
@media (min-width:1400px){
  .aretech-directory-layout{
    grid-template-columns:225px minmax(0,1fr) !important;
    gap:24px !important;
  }
  .aretech-course-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:22px !important;
  }
}

@media (min-width:1800px){
  .aretech-directory-layout{
    grid-template-columns:235px minmax(0,1fr) !important;
    gap:26px !important;
  }
  .aretech-course-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:24px !important;
  }
}

/* Tablet: exactly two cards. */
@media (max-width:1100px) and (min-width:761px){
  .aretech-directory-layout{
    grid-template-columns:210px minmax(0,1fr) !important;
    gap:18px !important;
  }
  .aretech-course-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
  }
}

/* Mobile: exactly one card. */
@media (max-width:760px){
  .aretech-directory-layout{
    grid-template-columns:1fr !important;
  }
  .aretech-course-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.1.1
   COMPACT COURSE DETAILS POPUP
   Only: Course Name, Course Code, Duration, Eligibility,
   Course Details. No category, fee, image or extra page UI.
   ========================================================= */

body.aretech-modal-open{overflow:hidden}

.aretech-card h3{
  margin-top:0;
}
.aretech-card-link{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.aretech-course-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
.aretech-course-modal.is-open{
  opacity:1;
  visibility:visible;
}
.aretech-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,25,50,.38);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.aretech-modal-dialog{
  position:relative;
  z-index:2;
  width:min(680px,calc(100vw - 32px));
  max-height:min(82vh,760px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.8);
  border-radius:22px;
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 58%,#fff8f4 100%);
  box-shadow:0 28px 80px rgba(17,48,86,.25);
  transform:translateY(12px) scale(.985);
  transition:transform .2s ease;
}
.aretech-course-modal.is-open .aretech-modal-dialog{
  transform:translateY(0) scale(1);
}
.aretech-modal-inner{
  position:relative;
  padding:30px 32px 32px;
}
.aretech-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:1px solid #dce8f5;
  border-radius:50%;
  background:#fff;
  color:#24466f;
  font-size:23px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(21,57,96,.08);
}
.aretech-modal-close:hover{
  background:#eef6ff;
  color:#086bd2;
}
.aretech-modal-title{
  padding-right:48px;
  margin:0 0 22px;
  color:#0c2c55;
  font-size:28px;
  line-height:1.2;
  font-weight:800;
}
.aretech-modal-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:24px;
}
.aretech-modal-meta>div{
  min-width:0;
  padding:13px 14px;
  border:1px solid #dce9f7;
  border-radius:12px;
  background:#f4f8fd;
}
.aretech-modal-meta>div:nth-child(2){
  background:#fff5ed;
  border-color:#ffe2ce;
}
.aretech-modal-meta>div:nth-child(3){
  background:#f5f0ff;
  border-color:#e6dcff;
}
.aretech-modal-meta small{
  display:block;
  margin-bottom:5px;
  color:#7286a0;
  font-size:10px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.aretech-modal-meta strong{
  display:block;
  color:#12365f;
  font-size:14px;
  line-height:1.3;
}
.aretech-modal-details-label{
  margin-bottom:10px;
  color:#0d315b;
  font-size:17px;
  font-weight:800;
}
.aretech-modal-content{
  color:#49627e;
  font-size:15px;
  line-height:1.7;
}
.aretech-modal-content p:first-child{margin-top:0}
.aretech-modal-content p:last-child{margin-bottom:0}
.aretech-modal-content ul,
.aretech-modal-content ol{
  margin:8px 0 0 20px;
  padding:0;
}
.aretech-modal-content li{
  margin:4px 0;
}
.aretech-course-modal-template{display:none!important}

@media (max-width:600px){
  .aretech-course-modal{padding:12px}
  .aretech-modal-dialog{
    width:100%;
    max-height:88vh;
    border-radius:18px;
  }
  .aretech-modal-inner{padding:24px 20px 24px}
  .aretech-modal-title{font-size:23px;margin-bottom:18px}
  .aretech-modal-meta{
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:20px;
  }
}

/* v1.1.2 — remove the Back to Courses navigation from course details. */
.aretech-course-back,
.aretech-back-courses,
.aretech-single-back,
a[href*="aretech-courses"][class*="back"]{
  display:none !important;
}

/* v1.1.3 — View Details hover: text must visibly change to white. */
.aretech-card.accent-blue .aretech-card-link:hover,
.aretech-card.accent-orange .aretech-card-link:hover,
.aretech-card.accent-purple .aretech-card-link:hover,
.aretech-card.accent-green .aretech-card-link:hover{
  color:#fff !important;
}
.aretech-card.accent-blue .aretech-card-link:hover span,
.aretech-card.accent-orange .aretech-card-link:hover span,
.aretech-card.accent-purple .aretech-card-link:hover span,
.aretech-card.accent-green .aretech-card-link:hover span{
  color:inherit !important;
}

/* v1.1.5 — ensure the Details CTA is clickable above card content. */
.aretech-card{
  position:relative;
}
.aretech-card-link.aretech-open-course{
  position:relative;
  z-index:20 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
.aretech-course-modal{
  pointer-events:auto !important;
}
.aretech-modal-backdrop{
  pointer-events:auto !important;
}
.aretech-modal-dialog{
  pointer-events:auto !important;
}

/* v1.1.7 — popup cleanup */
.aretech-course-modal .aretech-modal-dialog h3{
  margin-top:24px;
  margin-bottom:12px;
}
.aretech-course-modal .aretech-modal-dialog .aretech-modal-syllabus{
  margin-top:0;
}
/* Prevent duplicated metadata from appearing in the syllabus area. */
.aretech-course-modal .aretech-modal-dialog p.aretech-course-code,
.aretech-course-modal .aretech-modal-dialog p.aretech-duration,
.aretech-course-modal .aretech-modal-dialog p.aretech-eligibility{
  display:none !important;
}

/* v1.1.7 popup final layout: metadata is shown only in the top summary boxes.
   The lower section is Syllabus and contains only the course description. */
.aretech-course-modal .aretech-modal-details-label{
  margin-top:24px;
  margin-bottom:10px;
}

/* v1.1.8: modal shows summary metadata only in the three top boxes.
   Any legacy metadata accidentally present in course content is hidden. */
.aretech-course-modal .aretech-modal-content p.aretech-course-code,
.aretech-course-modal .aretech-modal-content p.aretech-duration,
.aretech-course-modal .aretech-modal-content p.aretech-eligibility{
  display:none !important;
}


/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.2 FINAL
   ========================================================= */
.aretech-course-modal .aretech-modal-title{
  padding-right:52px;
}
.aretech-course-modal .aretech-modal-meta{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 24px !important;
}
.aretech-course-modal .aretech-modal-meta > div{
  min-width:0;
  padding:13px 14px;
  border:1px solid #dce9f7;
  border-radius:12px;
  background:#f4f8fd;
}
.aretech-course-modal .aretech-modal-meta > div:nth-child(2){
  background:#fff5ed;
  border-color:#ffe2ce;
}
.aretech-course-modal .aretech-modal-meta > div:nth-child(3){
  background:#f5f0ff;
  border-color:#e6dcff;
}
.aretech-course-modal .aretech-modal-details-label{
  margin:0 0 10px !important;
  font-size:18px;
  font-weight:800;
  color:#0d315b;
}
.aretech-course-modal .aretech-modal-content{
  color:#49627e;
  font-size:15px;
  line-height:1.7;
}
.aretech-course-modal .aretech-modal-content p:first-child{margin-top:0}
.aretech-course-modal .aretech-modal-content ul,
.aretech-course-modal .aretech-modal-content ol{
  margin-top:8px;
  padding-left:22px;
}
@media (max-width:600px){
  .aretech-course-modal .aretech-modal-meta{
    grid-template-columns:1fr !important;
  }
}
.aretech-course-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media (max-width:1100px) and (min-width:761px){
  .aretech-course-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:760px){
  .aretech-course-grid{
    grid-template-columns:1fr !important;
  }
}


/* v1.3.0 — course fee system */
.aretech-fee-paid-fields{margin:12px 0;padding:14px;border:1px solid #e5edf7;border-radius:12px;background:#f8fbff}
.aretech-fee-paid-fields .aretech-field{margin-bottom:12px}
.aretech-modal-body-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.8fr);
  gap:22px;
  align-items:start;
}
.aretech-fee-panel{
  border:1px solid #dce8f5;
  border-radius:16px;
  padding:20px;
  background:linear-gradient(145deg,#f4f9ff,#fff8f3);
  box-shadow:0 10px 28px rgba(15,55,95,.08);
}
.aretech-fee-panel-title{font-size:18px;font-weight:800;color:#0d315b;margin-bottom:18px}
.aretech-fee-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #e5edf5;color:#526b86}
.aretech-fee-row strong{color:#12385f}
.aretech-fee-row.discount strong{color:#e45b68}
.aretech-fee-total{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding:14px;border-radius:12px;background:#eaf4ff;color:#0b4f91;font-weight:800}
.aretech-free-badge{display:inline-block;padding:9px 14px;border-radius:999px;background:#e8fff4;color:#07835b;font-weight:800}
.aretech-free-text{color:#526b86}
@media(max-width:980px){
  .aretech-directory-toolbar{
    grid-template-columns:minmax(0,1fr) 140px 140px;
  }
  .aretech-total{
    grid-column:1 / -1;
    justify-self:start;
  }
}
@media(max-width:620px){
  .aretech-directory-toolbar{
    grid-template-columns:1fr;
  }
  .aretech-total{
    grid-column:auto;
    justify-self:stretch;
  }
  .aretech-fee-filter,
  .aretech-sort,
  .aretech-total{
    width:100%;
  }
}

@media(max-width:760px){
 .aretech-modal-body-grid{grid-template-columns:1fr}
}


/* v1.3.2 — cleaner course cards and top-right category badge */
.aretech-card-category{
  left:auto !important;
  right:12px !important;
  top:12px !important;
}
.aretech-card-body h3{margin-bottom:14px !important}
.aretech-card-excerpt,.aretech-card-code{display:none !important}
.aretech-card-facts{margin-top:0 !important}
.aretech-course-modal .aretech-modal-dialog{width:min(920px,calc(100vw - 32px))}
.aretech-course-modal .aretech-modal-body-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}
.aretech-fee-panel{min-height:100%;box-sizing:border-box}
@media(max-width:980px){
  .aretech-directory-toolbar{
    grid-template-columns:minmax(0,1fr) 140px 140px;
  }
  .aretech-total{
    grid-column:1 / -1;
    justify-self:start;
  }
}
@media(max-width:620px){
  .aretech-directory-toolbar{
    grid-template-columns:1fr;
  }
  .aretech-total{
    grid-column:auto;
    justify-self:stretch;
  }
  .aretech-fee-filter,
  .aretech-sort,
  .aretech-total{
    width:100%;
  }
}

@media(max-width:760px){
  .aretech-course-modal .aretech-modal-body-grid{grid-template-columns:1fr}
}

/* v1.3.7 — fee offer only; no total/payable */
.aretech-fee-offer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff1f3;
  border:1px solid #ffd8de;
  color:#a52a3b;
  font-weight:700;
}
.aretech-fee-offer strong{color:#d13d52}
.aretech-fee-total{display:none !important}

/* Course card: category left, fee offer right */
.aretech-card .aretech-card-top,
.aretech-course-card .aretech-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.aretech-card .aretech-category,
.aretech-course-card .aretech-category{
  order:1;
}
.aretech-card .aretech-card-fee,
.aretech-course-card .aretech-card-fee{
  order:2;
  margin-left:auto;
  text-align:right;
}
.aretech-card .aretech-card-fee .aretech-fee-offer,
.aretech-course-card .aretech-card-fee .aretech-fee-offer{
  margin-top:0;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
}

/* v1.3.8 - course image picker */
.aretech-course-image-picker{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.aretech-course-image-preview{width:min(520px,100%);height:240px;border:1px dashed #bfd0e2;border-radius:14px;background:#f7faff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.aretech-selected-course-image{width:100%;height:100%;object-fit:cover;display:block}
.aretech-image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;color:#64788f;padding:20px}
.aretech-image-placeholder .dashicons{font-size:40px;width:40px;height:40px;color:#0b57a4}
.aretech-image-placeholder strong{font-size:14px;color:#294765}.aretech-image-placeholder small{font-size:11px}
.aretech-image-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:2px}

/* v1.3.8 - requested course card top structure */
.aretech-card-image{height:205px;position:relative;overflow:hidden;background:#edf4fb}
.aretech-card-image-link{position:absolute;inset:0;display:block;z-index:1}
.aretech-card-image-link img{width:100%;height:100%;object-fit:cover;display:block}
.aretech-card-topbar{position:absolute;z-index:3;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.aretech-card-category,.aretech-card-fee{position:static !important;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;line-height:1;box-shadow:0 5px 16px rgba(15,42,75,.12);backdrop-filter:blur(7px)}
.aretech-card-category{background:rgba(255,255,255,.94);color:#0b57a4}
.aretech-card-fee{margin-left:auto;background:rgba(255,255,255,.95);color:#173b61;flex-direction:column;align-items:flex-end;gap:3px}
.aretech-card-fee strong{font-size:10px}.aretech-card-fee small{font-size:9px;color:#0b57a4;font-weight:900}

/* Exactly 3 cards on desktop, 2 tablet, 1 mobile. */
.aretech-course-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media(max-width:1100px){.aretech-course-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:760px){.aretech-course-grid{grid-template-columns:1fr !important}.aretech-course-image-preview{height:200px}}

/* v1.3.11: Course image is a modal trigger, never a single-course link. */
.aretech-card-image-link{margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer;width:100%;}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.13 — 1600px CONTENT / FULL-PAGE AMBIENT BACKGROUND
   The directory itself stays clean and content-focused. The visual background
   belongs to the page viewport, not to the content panel.
   ========================================================= */
body.aretech-course-directory-page{
  background:
    radial-gradient(circle at 4% 8%, rgba(82,165,255,.14), transparent 22%),
    radial-gradient(circle at 96% 10%, rgba(255,128,75,.12), transparent 21%),
    radial-gradient(circle at 8% 88%, rgba(126,108,255,.08), transparent 23%),
    radial-gradient(circle at 94% 84%, rgba(55,196,157,.07), transparent 22%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 43%,#fffafc 72%,#f8fbff 100%);
  background-attachment: fixed;
  min-height:100vh;
}
body.aretech-course-directory-page .aretech-directory{
  width: min(1600px, calc(100% - 40px));
  max-width:1600px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0;
  overflow:visible;
}
/* Keep Elementor's shortcode host transparent so its white section does not
   become a second background panel around the directory. */
body.aretech-course-directory-page .aretech-directory-host{
  background:transparent !important;
  background-image:none !important;
}
@media(max-width:1640px){
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 32px);
  }
}
@media(max-width:760px){
  body.aretech-course-directory-page{
    background:
      radial-gradient(circle at 0 0,rgba(82,165,255,.12),transparent 30%),
      radial-gradient(circle at 100% 5%,rgba(255,128,75,.10),transparent 28%),
      linear-gradient(135deg,#f8fbff,#fff,#fffafd);
    background-attachment:scroll;
  }
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 24px);
  }
}


/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.14 — 1600px CONTENT FRAME
   Full-width page background, centered responsive content.
   The background is independent from the content frame.
   ========================================================= */
.aretech-directory{
  width:100%;
  max-width:1600px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  position:relative;
  isolation:isolate;
  padding-left:22px;
  padding-right:22px;
}
.aretech-directory::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  min-height:100%;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(circle at 5% 8%,rgba(93,174,255,.14),transparent 24%),
    radial-gradient(circle at 97% 7%,rgba(255,154,102,.13),transparent 23%),
    radial-gradient(circle at 95% 90%,rgba(95,211,188,.10),transparent 24%),
    radial-gradient(circle at 8% 90%,rgba(128,111,255,.07),transparent 23%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 46%,#fffafd 74%,#f8fbff 100%);
}
.aretech-directory::after{display:none !important}
.aretech-directory > *{position:relative;z-index:1}

/* Keep the directory frame comfortably inside a 1600px desktop canvas. */
.aretech-directory-layout{width:100%;max-width:none;margin:0 auto}

/* Three cards on desktop, two on tablet, one on mobile. */
@media (min-width:1101px){
  .aretech-course-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (min-width:761px) and (max-width:1100px){
  .aretech-course-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:760px){
  .aretech-directory{padding-left:12px;padding-right:12px}
  .aretech-course-grid{grid-template-columns:1fr !important}
}

/* Toolbar remains one clean row on large screens. */
@media (min-width:981px){
  .aretech-directory-toolbar{
    grid-template-columns:minmax(0,1fr) 150px 145px 78px;
  }
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.15 — FINAL 1600PX FRAME FIX
   The previous versions contained later legacy overrides using
   max-width:1800px !important. This final rule intentionally
   wins over those rules so the shortcode content is always kept
   inside a centered 1600px frame while the page background remains
   full viewport width.
   ========================================================= */
.aretech-directory,
body.aretech-course-directory-page .aretech-directory{
  width:calc(100% - 32px) !important;
  max-width:1600px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}

.aretech-directory-layout{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media (max-width:760px){
  .aretech-directory,
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 24px) !important;
    max-width:1600px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.16 — COMPACT CONTENT FRAME
   Keep the page background full-width while making the
   directory content slightly narrower and centered.
   ========================================================= */
body.aretech-course-directory-page .aretech-directory{
  width:calc(100% - 40px) !important;
  max-width:1450px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

body.aretech-course-directory-page .aretech-directory-layout{
  grid-template-columns:225px minmax(0,1fr) !important;
  gap:22px !important;
}

body.aretech-course-directory-page .aretech-course-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}

@media (max-width:1100px){
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 32px) !important;
    max-width:none !important;
  }
  body.aretech-course-directory-page .aretech-course-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px){
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 24px) !important;
    max-width:none !important;
  }
  body.aretech-course-directory-page .aretech-directory-layout{
    grid-template-columns:1fr !important;
  }
  body.aretech-course-directory-page .aretech-course-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.17 — 1200PX DESKTOP FRAME
   ========================================================= */
body.aretech-course-directory-page .aretech-directory,
.aretech-directory{
  width:calc(100% - 40px) !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

@media (min-width:1101px){
  body.aretech-course-directory-page .aretech-directory,
  .aretech-directory{
    width:calc(100% - 40px) !important;
    max-width:1200px !important;
  }
}

@media (max-width:1100px){
  body.aretech-course-directory-page .aretech-directory,
  .aretech-directory{
    width:calc(100% - 32px) !important;
    max-width:none !important;
  }
}

@media (max-width:760px){
  body.aretech-course-directory-page .aretech-directory,
  .aretech-directory{
    width:calc(100% - 24px) !important;
    max-width:none !important;
  }
}


/* =========================================================
   ARETECH COURSE DIRECTORY v1.3.18 — HARD 1200PX DESKTOP FRAME
   Prevent theme/Elementor width rules from expanding the shortcode.
   The page background stays full viewport; only directory content is capped.
   ========================================================= */
.aretech-directory,
body.aretech-course-directory-page .aretech-directory{
  width:1200px !important;
  max-width:1200px !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
  flex:0 0 1200px !important;
}

.aretech-directory-layout,
body.aretech-course-directory-page .aretech-directory-layout{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:1240px){
  .aretech-directory,
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    flex:0 1 auto !important;
  }
}

@media (max-width:760px){
  .aretech-directory,
  body.aretech-course-directory-page .aretech-directory{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    flex:0 1 auto !important;
  }
}

/* v1.3.19 — show total fees payable in View Details modal */
.aretech-modal-body-grid .aretech-fee-total{
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:14px 15px;
  border:1px solid #cfe3f8;
  border-radius:12px;
  background:linear-gradient(135deg,#eaf5ff,#f7fbff);
  color:#12385f;
  font-weight:800;
}
.aretech-modal-body-grid .aretech-fee-total span{color:#244b72}
.aretech-modal-body-grid .aretech-fee-total strong{color:#0b57a4;font-size:17px}