/* OffshoreDedi V4.6
   - Homepage now shows every active WHMCS product group as a visible service block.
   - Announcement list/detail readability and theme consistency fixed in dark + light modes.
*/

/* ========================================================================== 
   HOMEPAGE — ALL AVAILABLE SERVICE CATEGORIES
   ========================================================================== */
.od-v46-services{
  margin:0 0 62px;
}
.od-v46-services-intro{
  max-width:760px;
}
.od-v46-services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.od-v46-service-card{
  min-height:245px;
  padding:25px;
  border:1px solid #33445b;
  border-radius:20px;
  background:linear-gradient(150deg,#172231 0%,#101923 100%);
  color:#f6f8fb!important;
  text-decoration:none!important;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow:0 14px 35px rgba(0,0,0,.12);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.od-v46-service-card:before{
  content:"";
  position:absolute;
  right:-80px;
  top:-100px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(93,119,255,.13),transparent 68%);
  pointer-events:none;
}
.od-v46-service-card:hover{
  transform:translateY(-4px);
  border-color:#627aa0;
  box-shadow:0 20px 45px rgba(0,0,0,.22);
}
.od-v46-service-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}
.od-v46-service-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid #405878;
  background:#172436;
  color:#8fb6ee;
  font-size:18px;
}
.od-v46-service-arrow{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid transparent;
  color:#6f9ddd;
  opacity:.72;
  transition:.2s ease;
}
.od-v46-service-card:hover .od-v46-service-arrow{
  border-color:#415a7e;
  background:#19273a;
  opacity:1;
  transform:translateX(2px);
}
.od-v46-service-card h3{
  color:#f5f7fb!important;
  font-size:21px!important;
  line-height:1.25!important;
  margin:0 0 10px!important;
}
.od-v46-service-card p{
  color:#aeb8c7!important;
  font-size:13px!important;
  line-height:1.65!important;
  margin:0 0 18px!important;
}
.od-v46-service-link{
  margin-top:auto;
  color:#8fb8f0!important;
  font-size:12px;
  font-weight:700;
}
.od-v46-service-link i{margin-left:4px}

/* Light theme keeps the same block hierarchy while using the website palette. */
html[data-od-theme="light"] .od-v46-service-card{
  background:#fff!important;
  border-color:#d6e0eb!important;
  box-shadow:0 10px 28px rgba(24,35,53,.055)!important;
  color:#1d2939!important;
}
html[data-od-theme="light"] .od-v46-service-card:hover{
  border-color:#aebed3!important;
  box-shadow:0 16px 38px rgba(24,35,53,.10)!important;
}
html[data-od-theme="light"] .od-v46-service-icon{
  background:#f2f6fb!important;
  border-color:#cbd8e7!important;
  color:#527fb8!important;
}
html[data-od-theme="light"] .od-v46-service-card h3{color:#1d2939!important}
html[data-od-theme="light"] .od-v46-service-card p{color:#667085!important}
html[data-od-theme="light"] .od-v46-service-link{color:#477bb8!important}
html[data-od-theme="light"] .od-v46-service-card:hover .od-v46-service-arrow{
  background:#f2f6fb!important;
  border-color:#cbd8e7!important;
}

/* ========================================================================== 
   ANNOUNCEMENTS — LIST PAGE
   Fixes the white preview box / white text collision visible in V4.5.
   ========================================================================== */
.od-v46-announcements-card{
  overflow:hidden;
}
.od-v46-announcements-card>.card-body{
  padding:30px!important;
}
.od-v46-announcements-card>.card-body>.card-title{
  font-size:25px!important;
  margin-bottom:28px!important;
}
.od-v46-announcement-item{
  margin:0 0 42px!important;
  padding:0 0 40px;
  border-bottom:1px solid #29384d;
}
.od-v46-announcement-item:last-child{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0!important;
}
.od-v46-announcement-item h1{
  font-size:34px!important;
  line-height:1.18!important;
  letter-spacing:-.02em;
  margin-bottom:12px!important;
}
.od-v46-announcement-item h1>a{
  color:#70a9ff!important;
  text-decoration:none!important;
}
.od-v46-announcement-item h1>a:hover{color:#94bdff!important}
.od-v46-announcement-item .list-inline{
  margin-bottom:18px!important;
}
.od-v46-announcement-item .text-muted{
  color:#aab5c5!important;
}
.od-v46-announcement-preview{
  margin:0 0 18px!important;
  padding:20px 22px!important;
  border:1px solid #2b3a50!important;
  border-left:4px solid #6e9ee0!important;
  border-radius:0 12px 12px 0!important;
  background:#101923!important;
  color:#cbd4e0!important;
  line-height:1.72!important;
}
.od-v46-announcement-preview,
.od-v46-announcement-preview p,
.od-v46-announcement-preview div,
.od-v46-announcement-preview span,
.od-v46-announcement-preview li,
.od-v46-announcement-preview strong,
.od-v46-announcement-preview b{
  color:#cbd4e0!important;
  opacity:1!important;
}
.od-v46-announcement-preview a{color:#78adf6!important}
.od-v46-announcement-item>.btn{
  border:0!important;
  border-radius:10px!important;
  background:linear-gradient(105deg,#318cff,#7c3cff)!important;
  color:#fff!important;
  font-weight:700!important;
  padding:9px 15px!important;
}

/* Announcement detail page */
.od-v46-announcement-view>.card-body{padding:30px!important}
.od-v46-announcement-view h1{
  font-size:36px!important;
  line-height:1.18!important;
  margin-bottom:14px!important;
}
.od-v46-announcement-body{
  padding:24px!important;
  margin-top:18px;
  border:1px solid #2b3a50;
  border-radius:14px;
  background:#101923;
  color:#d0d8e3;
  line-height:1.75;
}
.od-v46-announcement-body,
.od-v46-announcement-body p,
.od-v46-announcement-body div,
.od-v46-announcement-body span,
.od-v46-announcement-body li,
.od-v46-announcement-body strong,
.od-v46-announcement-body b,
.od-v46-announcement-body h2,
.od-v46-announcement-body h3,
.od-v46-announcement-body h4{
  color:#d0d8e3!important;
  opacity:1!important;
}
.od-v46-announcement-body a{color:#78adf6!important}
.od-v46-announcement-body hr{border-color:#314159!important}

/* Light announcement appearance */
html[data-od-theme="light"] .od-v46-announcement-item{
  border-bottom-color:#d8e1ec!important;
}
html[data-od-theme="light"] .od-v46-announcement-item h1>a{
  color:#477bb8!important;
}
html[data-od-theme="light"] .od-v46-announcement-item h1>a:hover{
  color:#315f99!important;
}
html[data-od-theme="light"] .od-v46-announcement-item .text-muted{
  color:#667085!important;
}
html[data-od-theme="light"] .od-v46-announcement-preview,
html[data-od-theme="light"] .od-v46-announcement-body{
  background:#f8fafc!important;
  border-color:#d5dfeb!important;
  color:#344054!important;
}
html[data-od-theme="light"] .od-v46-announcement-preview,
html[data-od-theme="light"] .od-v46-announcement-preview p,
html[data-od-theme="light"] .od-v46-announcement-preview div,
html[data-od-theme="light"] .od-v46-announcement-preview span,
html[data-od-theme="light"] .od-v46-announcement-preview li,
html[data-od-theme="light"] .od-v46-announcement-preview strong,
html[data-od-theme="light"] .od-v46-announcement-preview b,
html[data-od-theme="light"] .od-v46-announcement-body,
html[data-od-theme="light"] .od-v46-announcement-body p,
html[data-od-theme="light"] .od-v46-announcement-body div,
html[data-od-theme="light"] .od-v46-announcement-body span,
html[data-od-theme="light"] .od-v46-announcement-body li,
html[data-od-theme="light"] .od-v46-announcement-body strong,
html[data-od-theme="light"] .od-v46-announcement-body b,
html[data-od-theme="light"] .od-v46-announcement-body h2,
html[data-od-theme="light"] .od-v46-announcement-body h3,
html[data-od-theme="light"] .od-v46-announcement-body h4{
  color:#344054!important;
  opacity:1!important;
}
html[data-od-theme="light"] .od-v46-announcement-preview a,
html[data-od-theme="light"] .od-v46-announcement-body a{
  color:#2869b2!important;
}

@media(max-width:991.98px){
  .od-v46-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .od-v46-services-grid{grid-template-columns:1fr}
  .od-v46-service-card{min-height:220px}
  .od-v46-announcements-card>.card-body,
  .od-v46-announcement-view>.card-body{padding:20px!important}
  .od-v46-announcement-item h1,
  .od-v46-announcement-view h1{font-size:27px!important}
}