/*
Theme Name: Opticool Clinic
Theme URI: https://example.com/opticool-clinic
Author: EVYX
Description: A premium Arabic-first ophthalmology WordPress theme built for Opticool. Clean, modern, responsive and appointment-focused.
Version: 1.3.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: opticool
*/

:root {
  --oc-navy: #0b2d5b;
  --oc-navy-2: #071d3d;
  --oc-blue: #2563eb;
  --oc-cyan: #06b6d4;
  --oc-teal: #14b8a6;
  --oc-sky: #e6f4ff;
  --oc-soft: #f6fbff;
  --oc-white: #ffffff;
  --oc-text: #10233f;
  --oc-muted: #6a7c93;
  --oc-border: #dcebf6;
  --oc-shadow: 0 24px 70px rgba(11, 45, 91, .12);
  --oc-radius: 28px;
  --oc-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--oc-text);
  background: var(--oc-white);
  font-family: "Cairo", "Tahoma", "Arial", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

.oc-container { width: min(calc(100% - 40px), var(--oc-container)); margin-inline: auto; }
.oc-section { padding: 96px 0; position: relative; }
.oc-section--soft { background: linear-gradient(180deg, #fbfdff 0%, #f4faff 100%); }
.oc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; color: var(--oc-blue); font-weight: 800;
  font-size: 13px; letter-spacing: .04em; margin-bottom: 12px;
}
.oc-eyebrow::before { content:""; width: 26px; height: 2px; background: linear-gradient(90deg,var(--oc-blue),var(--oc-cyan)); border-radius: 999px; }
.oc-title { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.2; letter-spacing: -.025em; color: var(--oc-navy-2); }
.oc-lead { margin: 18px 0 0; max-width: 670px; color: var(--oc-muted); font-size: 18px; }
.oc-gradient-text { background: linear-gradient(90deg, var(--oc-blue), var(--oc-cyan), var(--oc-teal)); -webkit-background-clip: text; color: transparent; }

/* Header */
.oc-header {
  position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(220,235,246,.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.oc-header__inner { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.oc-brand img { width: 205px; display: block; }
.oc-nav { display: flex; align-items: center; gap: 26px; }
.oc-nav ul { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; }
.oc-nav a { font-size: 14px; font-weight: 700; color: #2a4566; transition: .25s ease; }
.oc-nav a:hover { color: var(--oc-blue); }
.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 16px; cursor: pointer; font-weight: 800; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.oc-btn:hover { transform: translateY(-2px); }
.oc-btn--primary { color: white; background: linear-gradient(135deg, var(--oc-blue), var(--oc-cyan)); box-shadow: 0 14px 28px rgba(6,182,212,.22); }
.oc-btn--ghost { color: var(--oc-navy); background: #fff; border: 1px solid var(--oc-border); }
.oc-menu-toggle { display:none; width:44px; height:44px; border:1px solid var(--oc-border); border-radius:14px; background:#fff; }

/* Hero */
.oc-hero { min-height: 720px; overflow: hidden; display: flex; align-items: center; background:
  radial-gradient(circle at 82% 20%, rgba(6,182,212,.14), transparent 25%),
  radial-gradient(circle at 12% 70%, rgba(37,99,235,.08), transparent 26%), #fff; }
.oc-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image: radial-gradient(rgba(11,45,91,.14) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to left,black,transparent 70%); }
.oc-hero__grid { display:grid; grid-template-columns: 1.04fr .96fr; align-items:center; gap: 60px; position:relative; z-index:2; }
.oc-hero__badge { display:inline-flex; gap:9px; align-items:center; padding:9px 14px; border-radius:999px; background:var(--oc-sky); color:var(--oc-navy); font-weight:800; font-size:13px; }
.oc-pulse { width:9px; height:9px; border-radius:50%; background:var(--oc-teal); box-shadow:0 0 0 6px rgba(20,184,166,.13); }
.oc-hero h1 { margin:18px 0 18px; font-size:clamp(46px, 6vw, 78px); line-height:1.08; letter-spacing:-.045em; color:var(--oc-navy-2); }
.oc-hero p { max-width:610px; font-size:19px; color:var(--oc-muted); margin:0; }
.oc-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.oc-trust-row { display:flex; flex-wrap:wrap; gap:24px; margin-top:34px; color:#365472; font-size:13px; font-weight:700; }
.oc-trust-row span { display:flex; align-items:center; gap:8px; }
.oc-check { width:22px; height:22px; border-radius:50%; background:#e8fbf7; color:var(--oc-teal); display:inline-grid; place-items:center; font-size:12px; }

.oc-visual { position:relative; min-height:580px; display:grid; place-items:center; }
.oc-orbit { position:absolute; border:1px solid rgba(37,99,235,.17); border-radius:50%; }
.oc-orbit--1 { width:510px; height:510px; }
.oc-orbit--2 { width:410px; height:410px; border-color:rgba(6,182,212,.22); }
.oc-orbit--3 { width:305px; height:305px; border-style:dashed; animation:ocSpin 24s linear infinite; }
@keyframes ocSpin { to { transform:rotate(360deg); } }
.oc-eye-shell {
  width:420px; height:420px; display:grid; place-items:center; border-radius:50%; position:relative;
  background:radial-gradient(circle at 40% 35%, #fff 0 18%, #edf9ff 45%, #d9f1ff 72%, #c6e9fa 100%);
  box-shadow: 0 40px 100px rgba(11,45,91,.18), inset 0 0 0 1px rgba(255,255,255,.65);
}
.oc-eye-shell::after { content:""; position:absolute; width:120px; height:120px; right:-40px; bottom:50px; border-radius:32px; background:linear-gradient(135deg,var(--oc-blue),var(--oc-cyan)); opacity:.12; transform:rotate(18deg); }
.oc-eye-shell img { width:330px; position:relative; z-index:2; filter:drop-shadow(0 22px 34px rgba(11,45,91,.18)); }
.oc-float-card { position:absolute; z-index:5; min-width:205px; padding:17px 18px; border-radius:20px; background:rgba(255,255,255,.9); border:1px solid rgba(220,235,246,.95); box-shadow:var(--oc-shadow); backdrop-filter:blur(14px); }
.oc-float-card strong { display:block; color:var(--oc-navy); font-size:15px; }
.oc-float-card small { color:var(--oc-muted); }
.oc-float-card--a { top:75px; left:0; }
.oc-float-card--b { bottom:74px; right:-5px; }

/* Stats */
.oc-stats { margin-top:-42px; position:relative; z-index:5; }
.oc-stats__box { display:grid; grid-template-columns:repeat(4,1fr); border-radius:24px; background:#fff; border:1px solid var(--oc-border); box-shadow:var(--oc-shadow); overflow:hidden; }
.oc-stat { padding:26px 30px; text-align:center; }
.oc-stat + .oc-stat { border-inline-start:1px solid var(--oc-border); }
.oc-stat strong { display:block; font-size:30px; line-height:1.2; color:var(--oc-navy); }
.oc-stat span { color:var(--oc-muted); font-size:13px; }

/* Services */
.oc-heading-row { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:42px; }
.oc-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.oc-service { position:relative; padding:30px; min-height:270px; border:1px solid var(--oc-border); border-radius:var(--oc-radius); background:#fff; overflow:hidden; transition:.3s ease; }
.oc-service:hover { transform:translateY(-6px); box-shadow:var(--oc-shadow); border-color:#c6e5f4; }
.oc-service::after { content:""; position:absolute; width:120px; height:120px; inset-inline-end:-38px; top:-38px; border-radius:50%; background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(6,182,212,.12)); }
.oc-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:var(--oc-blue); background:linear-gradient(145deg,#edf7ff,#e9fffc); margin-bottom:24px; }
.oc-icon svg { width:27px; height:27px; }
.oc-service h3 { margin:0 0 10px; color:var(--oc-navy); font-size:21px; }
.oc-service p { margin:0; color:var(--oc-muted); font-size:14px; }
.oc-service a { display:inline-flex; margin-top:22px; gap:7px; align-items:center; color:var(--oc-blue); font-size:13px; font-weight:800; }

/* About */
.oc-about { display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center; }
.oc-doctor-card { min-height:560px; border-radius:38px; position:relative; overflow:hidden; background:
  radial-gradient(circle at 50% 25%, rgba(255,255,255,.85), rgba(255,255,255,0) 40%),
  linear-gradient(150deg,#dff6ff 0%,#edf7ff 48%,#dffbf7 100%); border:1px solid var(--oc-border); }
.oc-doctor-card::before { content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(37,99,235,.2); border-radius:50%; left:50%; top:48%; transform:translate(-50%,-50%); box-shadow:0 0 0 65px rgba(255,255,255,.32),0 0 0 130px rgba(255,255,255,.2); }
.oc-doctor-mark { position:absolute; inset:0; display:grid; place-items:center; }
.oc-doctor-mark img { width:280px; opacity:.96; filter:drop-shadow(0 24px 45px rgba(11,45,91,.17)); }
.oc-doctor-label { position:absolute; bottom:24px; inset-inline:24px; padding:18px 20px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.7); border-radius:20px; backdrop-filter:blur(12px); }
.oc-doctor-label strong { display:block; font-size:18px; color:var(--oc-navy); }
.oc-doctor-label span { color:var(--oc-muted); font-size:13px; }
.oc-feature-list { display:grid; gap:14px; margin:28px 0; }
.oc-feature { display:flex; gap:13px; align-items:flex-start; }
.oc-feature i { flex:0 0 30px; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:#eafbf7; color:var(--oc-teal); font-style:normal; font-weight:900; }
.oc-feature strong { display:block; color:var(--oc-navy); }
.oc-feature span { display:block; color:var(--oc-muted); font-size:14px; }

/* Journey */
.oc-journey { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.oc-step { padding:28px 24px; border-radius:24px; background:#fff; border:1px solid var(--oc-border); counter-increment:step; position:relative; }
.oc-step::before { content:"0" counter(step); display:inline-grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#fff; background:linear-gradient(135deg,var(--oc-blue),var(--oc-cyan)); font-weight:900; margin-bottom:22px; }
.oc-step h3 { margin:0 0 8px; color:var(--oc-navy); font-size:18px; }
.oc-step p { margin:0; color:var(--oc-muted); font-size:13px; }

/* Testimonials */
.oc-testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.oc-quote { padding:30px; border-radius:26px; border:1px solid var(--oc-border); background:#fff; }
.oc-stars { color:#f4b740; letter-spacing:3px; font-size:15px; }
.oc-quote p { color:#3b546f; font-size:15px; margin:15px 0 22px; }
.oc-quote strong { color:var(--oc-navy); display:block; }
.oc-quote span { color:var(--oc-muted); font-size:12px; }

/* FAQ */
.oc-faq-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
.oc-faq { border-bottom:1px solid var(--oc-border); }
.oc-faq summary { list-style:none; cursor:pointer; padding:21px 0; display:flex; justify-content:space-between; gap:20px; font-weight:800; color:var(--oc-navy); }
.oc-faq summary::-webkit-details-marker { display:none; }
.oc-faq summary::after { content:"+"; color:var(--oc-blue); font-size:22px; }
.oc-faq[open] summary::after { content:"−"; }
.oc-faq p { margin:0 0 22px; color:var(--oc-muted); font-size:14px; }

/* Appointment */
.oc-booking-shell { display:grid; grid-template-columns:.86fr 1.14fr; border-radius:36px; overflow:hidden; background:var(--oc-navy-2); box-shadow:0 40px 100px rgba(7,29,61,.18); }
.oc-booking-copy { padding:58px; color:#fff; position:relative; overflow:hidden; }
.oc-booking-copy::after { content:""; position:absolute; width:380px; height:380px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-170px; bottom:-150px; box-shadow:0 0 0 70px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.025); }
.oc-booking-copy .oc-eyebrow { color:#8feef0; }
.oc-booking-copy .oc-eyebrow::before { background:#8feef0; }
.oc-booking-copy h2 { margin:0; font-size:42px; line-height:1.22; }
.oc-booking-copy p { color:#c4d4e6; max-width:440px; }
.oc-contact-mini { display:grid; gap:12px; margin-top:30px; position:relative; z-index:2; }
.oc-contact-mini a, .oc-contact-mini span { display:flex; gap:10px; align-items:center; font-size:14px; color:#eaf4ff; }
.oc-form { padding:44px; background:#fff; }
.oc-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.oc-field { display:grid; gap:8px; }
.oc-field--full { grid-column:1/-1; }
.oc-field label { font-size:12px; font-weight:800; color:#35506d; }
.oc-field input, .oc-field select, .oc-field textarea { width:100%; border:1px solid var(--oc-border); border-radius:15px; padding:13px 14px; background:#fbfdff; outline:none; transition:.2s; }
.oc-field input:focus, .oc-field select:focus, .oc-field textarea:focus { border-color:var(--oc-cyan); box-shadow:0 0 0 4px rgba(6,182,212,.09); }
.oc-field textarea { min-height:120px; resize:vertical; }
.oc-notice { padding:12px 14px; border-radius:14px; background:#e8fbf7; color:#176d62; margin-bottom:15px; font-size:13px; font-weight:700; }

/* Blog / inner pages */
.oc-page-hero { padding:110px 0 66px; background:linear-gradient(180deg,#f5fbff,#fff); border-bottom:1px solid var(--oc-border); }
.oc-content { max-width:860px; margin:0 auto; padding:70px 0; }
.oc-content h1,.oc-content h2,.oc-content h3 { color:var(--oc-navy); line-height:1.25; }
.oc-post-card { padding:28px; border:1px solid var(--oc-border); border-radius:22px; margin-bottom:18px; }

/* Footer */
.oc-footer { background:#071d3d; color:#dbe8f5; padding:64px 0 24px; }
.oc-footer__grid { display:grid; grid-template-columns:1.35fr .75fr .75fr 1fr; gap:40px; }
.oc-footer__logo { width:205px; filter:brightness(0) invert(1); opacity:.96; }
.oc-footer p { color:#9fb3c9; font-size:13px; max-width:370px; }
.oc-footer h4 { color:#fff; margin:0 0 15px; }
.oc-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; color:#aec2d6; font-size:13px; }
.oc-footer__bottom { margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; font-size:12px; color:#8fa7bf; }

@media (max-width: 980px) {
  .oc-nav ul, .oc-header .oc-btn { display:none; }
  .oc-menu-toggle { display:inline-grid; place-items:center; }
  .oc-nav.is-open { position:absolute; top:88px; left:0; right:0; background:#fff; border-bottom:1px solid var(--oc-border); padding:20px; display:block; }
  .oc-nav.is-open ul { display:grid; gap:0; }
  .oc-nav.is-open ul li a { display:block; padding:12px; }
  .oc-hero { min-height:auto; padding:65px 0 90px; }
  .oc-hero__grid, .oc-about, .oc-faq-wrap, .oc-booking-shell { grid-template-columns:1fr; }
  .oc-visual { min-height:470px; order:-1; }
  .oc-eye-shell { width:330px; height:330px; }
  .oc-eye-shell img { width:260px; }
  .oc-orbit--1 { width:410px; height:410px; }
  .oc-orbit--2 { width:335px; height:335px; }
  .oc-orbit--3 { width:260px; height:260px; }
  .oc-float-card--a { left:4%; }
  .oc-float-card--b { right:4%; }
  .oc-grid-3, .oc-testimonials { grid-template-columns:repeat(2,1fr); }
  .oc-journey { grid-template-columns:repeat(2,1fr); }
  .oc-footer__grid { grid-template-columns:1.2fr 1fr 1fr; }
  .oc-footer__grid > div:last-child { grid-column:1/-1; }
}

@media (max-width: 680px) {
  .oc-container { width:min(calc(100% - 28px), var(--oc-container)); }
  .oc-header__inner { height:76px; }
  .oc-brand img { width:175px; }
  .oc-nav.is-open { top:76px; }
  .oc-section { padding:72px 0; }
  .oc-hero { padding-top:38px; }
  .oc-hero__grid { gap:20px; }
  .oc-hero h1 { font-size:44px; }
  .oc-hero p { font-size:16px; }
  .oc-visual { min-height:390px; }
  .oc-eye-shell { width:270px; height:270px; }
  .oc-eye-shell img { width:210px; }
  .oc-orbit--1 { width:330px; height:330px; }
  .oc-orbit--2 { width:280px; height:280px; }
  .oc-orbit--3 { width:215px; height:215px; }
  .oc-float-card { min-width:165px; padding:13px; }
  .oc-float-card--a { top:35px; left:0; }
  .oc-float-card--b { bottom:35px; right:0; }
  .oc-stats { margin-top:-30px; }
  .oc-stats__box { grid-template-columns:1fr 1fr; }
  .oc-stat + .oc-stat { border-inline-start:0; }
  .oc-stat:nth-child(even) { border-inline-start:1px solid var(--oc-border); }
  .oc-stat:nth-child(n+3) { border-top:1px solid var(--oc-border); }
  .oc-heading-row { align-items:start; flex-direction:column; }
  .oc-grid-3, .oc-testimonials, .oc-journey { grid-template-columns:1fr; }
  .oc-doctor-card { min-height:430px; }
  .oc-booking-copy, .oc-form { padding:34px 24px; }
  .oc-booking-copy h2 { font-size:34px; }
  .oc-form-grid { grid-template-columns:1fr; }
  .oc-field--full { grid-column:auto; }
  .oc-footer__grid { grid-template-columns:1fr 1fr; }
  .oc-footer__grid > div:first-child, .oc-footer__grid > div:last-child { grid-column:1/-1; }
  .oc-footer__bottom { flex-direction:column; }
}

/* =========================================================
   Multipage + SEO Blog System — v1.1
   ========================================================= */
.oc-text-link { display:inline-flex; margin-top:18px; color:var(--oc-blue); font-weight:800; font-size:14px; }
.oc-btn--light { background:#fff; color:var(--oc-navy); }
.oc-page-hero--lens { position:relative; overflow:hidden; }
.oc-page-hero--lens::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(37,99,235,.11); border-radius:50%; inset-inline-end:-140px; top:-235px; box-shadow:0 0 0 70px rgba(6,182,212,.035),0 0 0 140px rgba(37,99,235,.025); pointer-events:none; }
.oc-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:#7890a8; font-size:12px; margin-bottom:26px; }
.oc-breadcrumbs a { color:var(--oc-blue); font-weight:700; }
.oc-breadcrumbs span:last-child { max-width:560px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-services-page .oc-service h2 { margin:0 0 10px; color:var(--oc-navy); font-size:21px; }
.oc-value-card { padding:32px; background:#fff; border:1px solid var(--oc-border); border-radius:var(--oc-radius); }
.oc-value-card b { display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--oc-blue),var(--oc-cyan)); margin-bottom:24px; }
.oc-value-card h3 { margin:0 0 8px; color:var(--oc-navy); font-size:22px; }
.oc-value-card p { margin:0; color:var(--oc-muted); font-size:14px; }
.oc-cta-strip { padding:60px 0; color:#fff; background:radial-gradient(circle at 80% 10%,rgba(6,182,212,.22),transparent 30%),linear-gradient(135deg,var(--oc-navy-2),var(--oc-navy)); }
.oc-cta-strip__inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.oc-cta-strip span { color:#87e8ee; font-size:13px; font-weight:800; }
.oc-cta-strip h2 { margin:4px 0 4px; font-size:clamp(28px,4vw,42px); line-height:1.2; }
.oc-cta-strip p { margin:0; color:#b9cce0; }
.oc-blog-empty-preview { min-height:180px; display:flex; align-items:center; justify-content:center; gap:22px; padding:32px; border:1px dashed #bcdceb; border-radius:28px; background:linear-gradient(135deg,#fbfdff,#f4fbff); }
.oc-blog-empty-preview img { width:95px; opacity:.45; }
.oc-blog-empty-preview strong { display:block; color:var(--oc-navy); font-size:20px; }
.oc-blog-empty-preview p { margin:4px 0 0; color:var(--oc-muted); }

/* Blog archive */
.oc-blog-hero { position:relative; overflow:hidden; padding:100px 0 74px; color:#fff; background:radial-gradient(circle at 80% 30%,rgba(6,182,212,.25),transparent 27%),linear-gradient(135deg,#061a37 0%,#0b2d5b 58%,#0c5a7d 130%); }
.oc-blog-hero::before { content:""; position:absolute; inset:0; opacity:.18; background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px); background-size:26px 26px; mask-image:linear-gradient(to left,#000,transparent 70%); }
.oc-blog-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:50px; }
.oc-blog-hero .oc-eyebrow { color:#82eef1; }
.oc-blog-hero .oc-eyebrow::before { background:#82eef1; }
.oc-blog-hero h1 { margin:2px 0 10px; font-size:clamp(44px,7vw,78px); line-height:1.1; }
.oc-blog-hero p { max-width:670px; margin:0; color:#c6d8e8; font-size:18px; }
.oc-blog-hero__visual { position:relative; min-height:260px; display:grid; place-items:center; }
.oc-blog-hero__visual img { width:255px; position:relative; z-index:2; filter:drop-shadow(0 26px 40px rgba(0,0,0,.2)); }
.oc-lens-ring { position:absolute; width:310px; height:310px; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.045),0 0 0 90px rgba(255,255,255,.025); }
.oc-blog-tools { display:flex; align-items:end; justify-content:space-between; gap:34px; margin-bottom:42px; }
.oc-search { width:min(100%,430px); padding:7px; display:flex; gap:8px; background:#fff; border:1px solid var(--oc-border); border-radius:18px; box-shadow:0 10px 35px rgba(11,45,91,.06); }
.oc-search input { min-width:0; flex:1; border:0; background:transparent; outline:0; padding:8px 12px; color:var(--oc-text); }
.oc-search button { border:0; border-radius:12px; padding:0 20px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--oc-blue),var(--oc-cyan)); cursor:pointer; }
.oc-blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.oc-blog-grid--3 { grid-template-columns:repeat(3,1fr); }
.oc-blog-card { overflow:hidden; background:#fff; border:1px solid var(--oc-border); border-radius:28px; transition:.3s ease; }
.oc-blog-card:hover { transform:translateY(-6px); box-shadow:var(--oc-shadow); border-color:#c2e4f5; }
.oc-blog-card__media { display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(145deg,#e8f7ff,#ebfffb); }
.oc-blog-card__media > img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.oc-blog-card:hover .oc-blog-card__media > img { transform:scale(1.035); }
.oc-blog-card__placeholder { width:100%; height:100%; display:grid; place-items:center; position:relative; overflow:hidden; }
.oc-blog-card__placeholder::before { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(37,99,235,.15); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.4); }
.oc-blog-card__placeholder img { width:130px; position:relative; z-index:2; opacity:.78; }
.oc-blog-card__body { padding:25px; }
.oc-post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; color:#8394a7; font-size:11px; font-weight:700; }
.oc-chip { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; color:var(--oc-blue); background:#edf7ff; font-weight:800; }
.oc-blog-card h2 { margin:14px 0 10px; color:var(--oc-navy); font-size:22px; line-height:1.45; }
.oc-blog-card h2 a:hover { color:var(--oc-blue); }
.oc-blog-card p { margin:0; color:var(--oc-muted); font-size:14px; }
.oc-read-more { display:inline-flex; align-items:center; gap:7px; margin-top:20px; color:var(--oc-blue); font-size:13px; font-weight:900; }
.oc-pagination { margin-top:44px; }
.oc-pagination .nav-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.oc-pagination .page-numbers { min-width:42px; height:42px; padding:0 12px; display:inline-grid; place-items:center; border:1px solid var(--oc-border); border-radius:12px; background:#fff; color:var(--oc-navy); font-weight:800; }
.oc-pagination .page-numbers.current { border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--oc-blue),var(--oc-cyan)); }
.oc-empty { padding:70px 25px; text-align:center; border:1px dashed #c5dfed; border-radius:28px; background:#f9fdff; }
.oc-empty h2 { margin:0 0 5px; color:var(--oc-navy); }
.oc-empty p { margin:0; color:var(--oc-muted); }

/* Single article */
.oc-article-hero { padding:78px 0 58px; text-align:center; background:radial-gradient(circle at 50% 0%,rgba(6,182,212,.10),transparent 36%),linear-gradient(180deg,#f7fcff,#fff); }
.oc-article-hero__inner { max-width:940px; }
.oc-article-hero .oc-breadcrumbs { justify-content:center; }
.oc-post-meta--center { justify-content:center; }
.oc-article-hero h1 { max-width:900px; margin:17px auto 16px; color:var(--oc-navy-2); font-size:clamp(38px,5.6vw,64px); line-height:1.25; letter-spacing:-.025em; }
.oc-article-deck { max-width:760px; margin:0 auto; color:var(--oc-muted); font-size:18px; }
.oc-author-line { display:flex; align-items:center; justify-content:center; gap:11px; margin-top:24px; text-align:start; }
.oc-author-avatar img { display:block; width:48px; height:48px; border-radius:50%; }
.oc-author-line strong,.oc-author-line small { display:block; }
.oc-author-line strong { color:var(--oc-navy); font-size:13px; }
.oc-author-line small { color:#8a9caf; font-size:11px; }
.oc-article-cover { max-width:1180px; margin-top:4px; }
.oc-article-cover img { display:block; width:100%; max-height:660px; object-fit:cover; border-radius:34px; box-shadow:0 28px 70px rgba(11,45,91,.13); }
.oc-article-section { padding:68px 0 95px; }
.oc-article-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start; }
.oc-article-content { min-width:0; color:#2d4660; font-size:18px; line-height:2.05; }
.oc-article-content > *:first-child { margin-top:0; }
.oc-article-content h2 { margin:48px 0 16px; color:var(--oc-navy); font-size:32px; line-height:1.4; scroll-margin-top:110px; }
.oc-article-content h3 { margin:34px 0 12px; color:var(--oc-navy); font-size:24px; line-height:1.45; }
.oc-article-content h4 { color:var(--oc-navy); }
.oc-article-content p { margin:0 0 22px; }
.oc-article-content a { color:var(--oc-blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.oc-article-content ul,.oc-article-content ol { padding-inline-start:25px; margin:0 0 24px; }
.oc-article-content li { margin-bottom:7px; }
.oc-article-content blockquote { margin:32px 0; padding:22px 25px; border-inline-start:4px solid var(--oc-cyan); border-radius:0 18px 18px 0; background:#f2fbff; color:#31516f; }
.oc-article-content img { border-radius:22px; }
.oc-article-content table { width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; }
.oc-article-content th,.oc-article-content td { padding:13px 14px; border:1px solid var(--oc-border); text-align:start; }
.oc-article-content th { background:#f2f9ff; color:var(--oc-navy); }
.oc-tags { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:42px; padding-top:25px; border-top:1px solid var(--oc-border); font-size:13px; }
.oc-tags a { padding:6px 10px; border-radius:9px; text-decoration:none; background:#edf7ff; }
.oc-medical-note { margin-top:30px; padding:20px 22px; border:1px solid #cceaf4; border-radius:18px; background:linear-gradient(135deg,#f5fcff,#f1fffb); }
.oc-medical-note strong { color:var(--oc-navy); }
.oc-medical-note p { margin:4px 0 0; color:#59748c; font-size:13px; line-height:1.8; }
.oc-article-sidebar { display:grid; gap:18px; position:sticky; top:112px; }
.oc-sidebar-card { padding:24px; border:1px solid var(--oc-border); border-radius:24px; background:#fff; }
.oc-sidebar-card h3 { margin:0 0 16px; color:var(--oc-navy); font-size:18px; }
.oc-sidebar-cta { overflow:hidden; position:relative; background:linear-gradient(145deg,#f4fbff,#ecfffb); }
.oc-sidebar-cta > img { width:100px; opacity:.22; position:absolute; inset-inline-end:-18px; top:-14px; }
.oc-sidebar-cta .oc-eyebrow { position:relative; z-index:2; }
.oc-sidebar-cta h3,.oc-sidebar-cta p,.oc-sidebar-cta .oc-btn { position:relative; z-index:2; }
.oc-sidebar-cta p { color:var(--oc-muted); font-size:13px; }
.oc-sidebar-cta .oc-btn { width:100%; margin-top:10px; }
.oc-mini-posts { display:grid; }
.oc-mini-posts a { padding:13px 0; border-top:1px solid var(--oc-border); }
.oc-mini-posts a:first-child { border-top:0; padding-top:0; }
.oc-mini-posts span { display:block; color:#2a4663; font-size:13px; font-weight:800; line-height:1.55; }
.oc-mini-posts small { color:#91a0af; }
.oc-category-list ul { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.oc-category-list li { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #edf4f8; color:#597089; font-size:13px; }
.oc-category-list a { color:var(--oc-navy); font-weight:700; }
.oc-notice--error { background:#fff0f0; color:#a13d3d; }

@media (max-width:980px) {
  .oc-blog-hero__grid { grid-template-columns:1fr; }
  .oc-blog-hero__visual { display:none; }
  .oc-blog-tools { align-items:start; flex-direction:column; }
  .oc-search { width:100%; }
  .oc-blog-grid--3 { grid-template-columns:repeat(2,1fr); }
  .oc-article-layout { grid-template-columns:1fr; }
  .oc-article-sidebar { position:static; grid-template-columns:repeat(2,1fr); }
  .oc-sidebar-cta { grid-column:1/-1; }
}
@media (max-width:680px) {
  .oc-cta-strip__inner { align-items:flex-start; flex-direction:column; }
  .oc-blog-grid,.oc-blog-grid--3 { grid-template-columns:1fr; }
  .oc-blog-hero { padding:70px 0 56px; }
  .oc-blog-hero h1 { font-size:48px; }
  .oc-blog-tools { margin-bottom:28px; }
  .oc-article-hero { padding:55px 0 40px; }
  .oc-article-hero h1 { font-size:36px; }
  .oc-article-deck { font-size:15px; }
  .oc-article-cover img { border-radius:22px; }
  .oc-article-section { padding-top:45px; }
  .oc-article-content { font-size:16px; line-height:2; }
  .oc-article-content h2 { font-size:27px; }
  .oc-article-sidebar { grid-template-columns:1fr; }
  .oc-sidebar-cta { grid-column:auto; }
  .oc-blog-empty-preview { align-items:flex-start; flex-direction:column; }
}


/* Elite visual refresh v1.3 */
.oc-trust-row span i{font-size:14px; color:var(--oc-blue);}
.oc-icon i{font-size:24px;}
.oc-service__image{display:block; margin:-30px -30px 20px; overflow:hidden; border-radius:26px 26px 22px 22px; aspect-ratio: 16/10;}
.oc-service__image img{width:100%; height:100%; object-fit:cover; display:block;}
.oc-visual{position:relative; min-height:560px; border-radius:38px; overflow:hidden; border:1px solid var(--oc-border); box-shadow:var(--oc-shadow); background:#dbeaf7;}
.oc-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(270deg,rgba(255,255,255,.18),rgba(11,45,91,.08)); pointer-events:none;}
.oc-visual__photo{width:100%; height:100%; object-fit:cover; display:block;}
.oc-doctor-card--photo{background:#edf7ff;}
.oc-doctor-card--photo::before{display:none;}
.oc-doctor-photo{width:100%; height:100%; object-fit:cover; display:block;}
.oc-media-grid{display:grid; grid-template-columns:1.1fr 1.1fr .9fr; gap:20px;}
.oc-media-card{position:relative; overflow:hidden; min-height:320px; border-radius:30px; box-shadow:var(--oc-shadow);}
.oc-media-card img{width:100%; height:100%; object-fit:cover; display:block;}
.oc-media-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,29,61,0) 35%, rgba(7,29,61,.7) 100%);}
.oc-media-card__content{position:absolute; inset-inline:24px; bottom:24px; z-index:2; color:#fff;}
.oc-media-card__content span{display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8feef0; margin-bottom:7px;}
.oc-media-card__content h3{margin:0; color:#fff; font-size:24px; line-height:1.35;}
.oc-split-showcase{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;}
.oc-showcase-photo{border-radius:32px; overflow:hidden; box-shadow:var(--oc-shadow); min-height:420px;}
.oc-showcase-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.oc-showcase-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px;}
.oc-showcase-list li{display:flex; align-items:center; gap:12px; color:#35506d; font-weight:700;}
.oc-showcase-list i{color:var(--oc-teal);}
.oc-booking-copy{display:flex; flex-direction:column; justify-content:space-between;}
.oc-booking-copy__thumb{width:100%; max-width:320px; height:180px; object-fit:cover; border-radius:24px; margin-top:24px; border:1px solid rgba(255,255,255,.16); position:relative; z-index:2;}
.oc-contact-mini i{width:18px; text-align:center; color:#8feef0;}
.oc-blog-card__placeholder{display:block; width:100%; height:100%;}
.oc-blog-card__placeholder img{width:100%; height:100%; object-fit:cover; display:block;}
.oc-footer__socials{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.oc-footer__socials a{width:42px; height:42px; display:inline-grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:16px; transition:.25s ease;}
.oc-footer__socials a:hover{transform:translateY(-3px); background:linear-gradient(135deg,var(--oc-blue),var(--oc-cyan));}
.oc-footer__contact-list li{display:flex; align-items:flex-start; gap:10px;}
.oc-footer__contact-list li i{color:#8feef0; width:16px; margin-top:2px;}
.oc-footer .menu, .oc-footer .sub-menu{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.oc-footer a{color:#dbe8f5;}
.oc-footer a:hover{color:#fff;}
.oc-sidebar-cta img{width:100%; height:180px; object-fit:cover; border-radius:18px; margin-bottom:18px;}
.oc-article-cover img{width:100%; height:auto; display:block; border-radius:26px;}
.oc-blog-empty-preview img{width:160px; height:120px; object-fit:cover; border-radius:20px;}

@media (max-width: 980px){
  .oc-media-grid, .oc-split-showcase{grid-template-columns:1fr;}
  .oc-media-card{min-height:260px;}
}

@media (max-width: 680px){
  .oc-visual{min-height:380px;}
  .oc-service__image{margin:-30px -30px 18px;}
  .oc-footer__socials a{width:38px; height:38px;}
}


/* Single post sidebar overlap fix v1.3.1 */
@media (min-width: 981px) {
  .oc-article-layout {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    width: 100%;
  }

  .oc-article-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 376px);
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  .oc-article-content > * {
    max-width: 100%;
  }

  .oc-article-sidebar {
    flex: 0 0 320px;
    width: 320px;
    min-width: 320px;
    position: sticky;
    top: 112px;
    z-index: 2;
  }
}

.oc-article-content p,
.oc-article-content li,
.oc-article-content h2,
.oc-article-content h3,
.oc-article-content h4,
.oc-article-content blockquote,
.oc-article-content td,
.oc-article-content th {
  overflow-wrap: anywhere;
  word-break: normal;
}

.oc-article-content iframe,
.oc-article-content video,
.oc-article-content embed,
.oc-article-content object {
  max-width: 100%;
}

@media (max-width: 980px) {
  .oc-article-content {
    max-width: 100%;
  }
}


/* Single post Arabic wrapping + spacing refinement v1.3.2 */
@media (min-width: 981px) {
  .oc-article-layout {
    max-width: 1100px;
    margin-inline: auto;
    gap: 70px;
  }

  .oc-article-content {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .oc-article-sidebar {
    flex: 0 0 320px;
    width: 320px;
    min-width: 320px;
  }
}

.oc-article-content p,
.oc-article-content li,
.oc-article-content h2,
.oc-article-content h3,
.oc-article-content h4,
.oc-article-content blockquote,
.oc-article-content td,
.oc-article-content th {
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: normal;
}

/* Allow long URLs only to wrap when they really need to */
.oc-article-content a {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 980px) {
  .oc-article-layout {
    max-width: 100%;
    gap: 28px;
  }
}


/* Single post definitive layout + Word paste fix v1.3.3 */
@media (min-width: 981px) {
  .oc-article-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 700px) 300px !important;
    justify-content: center;
    align-items: start;
    column-gap: 80px !important;
    width: 100%;
    max-width: 1120px !important;
    margin-inline: auto;
  }

  .oc-article-content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 700px !important;
    overflow: hidden;
  }

  .oc-article-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    position: sticky;
    top: 112px;
    z-index: 2;
  }
}

/* Word / Docs can paste fixed widths or nowrap spans. Keep the article inside its own column. */
.oc-article-content p,
.oc-article-content h2,
.oc-article-content h3,
.oc-article-content h4,
.oc-article-content h5,
.oc-article-content h6,
.oc-article-content blockquote,
.oc-article-content ul,
.oc-article-content ol,
.oc-article-content figure,
.oc-article-content div {
  max-width: 100% !important;
  box-sizing: border-box;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.oc-article-content p,
.oc-article-content h2,
.oc-article-content h3,
.oc-article-content h4,
.oc-article-content h5,
.oc-article-content h6,
.oc-article-content blockquote {
  width: auto !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.oc-article-content span,
.oc-article-content strong,
.oc-article-content em,
.oc-article-content b,
.oc-article-content i {
  white-space: normal !important;
  word-break: normal !important;
}

.oc-article-content pre,
.oc-article-content table {
  max-width: 100% !important;
  overflow-x: auto;
}

@media (max-width: 980px) {
  .oc-article-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 760px !important;
    margin-inline: auto;
  }
  .oc-article-content,
  .oc-article-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
\n\n/* Blog card excerpt compact v1.3.4 */\n.oc-blog-card p{\n  line-height:1.9;\n  min-height:auto;\n  overflow:visible;\n  word-break:normal;\n  overflow-wrap:normal;\n}\n