/* ============================================================
   Masir brand skin v2 — clean dark theme via CSS variables.
   Themes Total + Tutor + WooCommerce front-end to the homepage
   design language (dark #0d0d0d, pink #ff006b / rose #f63d68, Dana).
   Front-end only. Admin untouched. Webflow static pages untouched.
   ============================================================ */

/* ---------- Dana font ---------- */
@font-face{font-family:'Dana';src:url('/fonts/dana-thin.ttf') format('truetype');font-weight:100;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-extralight.ttf') format('truetype');font-weight:200;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-light.ttf') format('truetype');font-weight:300;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-demibold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-extrabold.ttf') format('truetype');font-weight:800;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-black.ttf') format('truetype');font-weight:900;font-display:swap;}

/* ---------- Theme tokens (override Total + Tutor vars: clean, cascades naturally) ---------- */
:root{
  /* Masir palette */
  --masir-bg:#0d0d0d; --masir-surface:#151a23; --masir-surface-2:#1d232e; --masir-surface-3:#262d39;
  --masir-pink:#ff006b; --masir-rose:#f63d68; --masir-text:#f2f4f7; --masir-muted:#9aa4b2; --masir-border:#2a313d;

  /* Total (wpex) */
  --wpex-surface-1:#0d0d0d; --wpex-surface-2:#151a23; --wpex-surface-3:#1d232e; --wpex-surface-4:#262d39;
  --wpex-text-1:#f2f4f7; --wpex-text-2:#cbd2da; --wpex-text-3:#9aa4b2; --wpex-text-4:#9aa4b2;
  --wpex-border-main:rgba(255,255,255,.08);
  --wpex-accent:#ff006b; --wpex-accent-hover:#f63d68; --wpex-accent-alt:#f63d68;
  --wpex-link-color:#ff7aae; --wpex-link-color-hover:#ff006b;

  /* Tutor */
  --tutor-color-primary:#ff006b; --tutor-color-primary-rgb:255,0,107;
  --tutor-color-primary-hover:#f63d68; --tutor-color-primary-hover-rgb:246,61,104;
  --tutor-body-color:#e8eaed; --tutor-body-color-rgb:232,234,237;
  --tutor-border-color:#2a313d; --tutor-border-color-rgb:42,49,61;
}

/* ---------- Dana on text (NOT on .tutor-icon-* — they use the icon font) ---------- */
body,button,input,select,textarea,optgroup,
h1,h2,h3,h4,h5,h6,p,a,li,td,th,label,blockquote,
.tutor-fs-1,.tutor-fs-2,.tutor-fs-3,.tutor-fs-4,.tutor-fs-5,.tutor-fs-6,.tutor-fs-7{
  font-family:'Dana','Tahoma',sans-serif;
}

/* ---------- Canvas (topographic header bg, faded into the dark site bg) ---------- */
body{
  background-color:var(--masir-bg);color:var(--masir-text);overflow-x:hidden;
  background-image:
    linear-gradient(to bottom, rgba(13,13,13,.22) 0, rgba(13,13,13,.72) 340px, #0d0d0d 560px),
    url('/images/banner_with_topography_contour_design_1504-1-5.png');
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100%, 100% auto;
  background-attachment:scroll;
}
/* long bilingual titles must wrap, never clip */
.tutor-course-details-title,.page-header-title,.entry-title,
.tutor-course-name,.tutor-course-card .tutor-course-name a{
  word-break:break-word;overflow-wrap:anywhere;
}

/* ---------- Total header / footer ---------- */
#site-header,.header-one,#site-header-sticky-wrapper{background-color:#000813 !important;}
#site-header a,.navbar-style-one a,#site-navigation a,.site-header-menu a{color:#f2f4f7;}
#site-header a:hover,#site-navigation a:hover{color:var(--masir-pink);}
.page-header{background:transparent !important;border:none !important;box-shadow:none !important;}
.page-header-title{color:var(--masir-text) !important;}
#footer,#footer-bottom,.footer-callout{background-color:#000813 !important;color:#cbd2da;}
#footer a{color:#cbd2da;} #footer a:hover{color:var(--masir-pink);}

/* ---------- Tutor: hardcoded utilities that break on dark ---------- */
.tutor-bg-white{background-color:var(--masir-surface) !important;}
.tutor-bg-gray-10,.tutor-bg-gray-20{background-color:var(--masir-surface-2) !important;}
.tutor-color-secondary{color:#c2c9d3 !important;}
.tutor-color-muted,.tutor-color-hints,.tutor-color-subdued{color:var(--masir-muted) !important;}

/* cards & surfaces */
.tutor-card,.tutor-sidebar-card{
  background-color:var(--masir-surface) !important;
  border:1px solid var(--masir-border) !important;
  border-radius:12px !important;
}
/* curriculum accordion */
.tutor-accordion-item{
  background-color:var(--masir-surface) !important;
  border:1px solid var(--masir-border) !important;
  border-radius:12px !important;overflow:hidden;margin-bottom:10px;
}
.tutor-accordion-item-header,.tutor-accordion-item-body,.tutor-accordion-item-body-content{
  background-color:var(--masir-surface) !important;color:var(--masir-text) !important;
}
.tutor-accordion-item-header.is-active{background-color:var(--masir-surface-2) !important;}
.tutor-course-content-list{background-color:transparent !important;}
.tutor-course-content-list-item{
  background-color:transparent !important;
  border-block-end:1px solid var(--masir-border) !important;
}
.tutor-course-content-list-item-title{color:var(--masir-text) !important;}
.tutor-course-content-list-item-icon{color:var(--masir-pink) !important;}
.tutor-course-content-list-item-status,.tutor-course-content-list-item-duration{color:var(--masir-muted) !important;}

/* sidebar enroll/pricing card inner surfaces (Tutor hardcodes light grays here) */
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body,
.tutor-single-course-sidebar .tutor-course-single-info-card,
.tutor-single-course-sidebar-more>div,
.tutor-card-list-item,.tutor-card-list-item:nth-child(2n){
  background-color:var(--masir-surface) !important;
  border-color:var(--masir-border) !important;
}

/* "About Course" toggle-more white fade -> dark (Tutor uses :before with a white gradient) */
.tutor-toggle-more-collapsed:before,
.tutor-toggle-more-collapsed::before{
  background:linear-gradient(rgba(13,13,13,0) 1.31%,rgba(13,13,13,.72) 15.41%,var(--masir-bg) 100%) !important;
}

/* tabs / nav */
.tutor-nav-link{color:#cbd2da !important;}
.tutor-nav-link.is-active{color:var(--masir-pink) !important;border-color:var(--masir-pink) !important;}

/* pricing accent */
.tutor-course-single-pricing,.tutor-course-price{color:var(--masir-pink) !important;}
.tutor-ratings-stars i{color:var(--masir-yellow,#ffb800) !important;}

/* buttons inherit --tutor-color-primary (pink) automatically; ensure radius + contrast */
.tutor-btn-primary,.tutor-enroll-course-button{border-radius:8px !important;color:#fff !important;}
.theme-button,.footer-callout-button-link{background-color:var(--masir-rose) !important;color:#fff !important;border-radius:8px !important;}

/* ---------- Inputs ---------- */
input,select,textarea,.tutor-form-control{
  background-color:var(--masir-surface-2) !important;color:var(--masir-text) !important;
  border:1px solid var(--masir-border) !important;border-radius:8px !important;
}
::placeholder{color:var(--masir-muted) !important;}

/* ---------- Tutor login / signup modal ---------- */
.tutor-modal-overlay{background-color:rgba(6,8,15,.82) !important;}
.tutor-modal-content,.tutor-modal-content-white{
  background-color:var(--masir-surface) !important;color:var(--masir-text) !important;
  border:1px solid var(--masir-border) !important;border-radius:14px !important;
}
#tutor-login-modal-title,.tutor-modal-title,
.tutor-modal-body h1,.tutor-modal-body h2,.tutor-modal-body h3,.tutor-modal-body h4{color:var(--masir-text) !important;}
.tutor-modal-body label,.tutor-modal-body .tutor-form-label{color:var(--masir-text) !important;}
.tutor-modal-close-o,.tutor-modal .tutor-iconic-btn,.tutor-modal-close{color:var(--masir-muted) !important;}
.tutor-modal-close-o:hover,.tutor-modal .tutor-iconic-btn:hover{color:var(--masir-text) !important;}

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product,.woocommerce .cart-collaterals .cart_totals,
.woocommerce-MyAccount-content,.woocommerce table.shop_table,.woocommerce-checkout #payment{
  background-color:var(--masir-surface) !important;color:var(--masir-text) !important;
  border:1px solid var(--masir-border) !important;border-radius:12px !important;
}
.woocommerce .price,.woocommerce-Price-amount{color:var(--masir-pink) !important;}
.woocommerce a.button,.woocommerce button.button,.woocommerce button.button.alt,
.woocommerce #respond input#submit{
  background-color:var(--masir-rose) !important;color:#fff !important;border-radius:8px !important;border:none !important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover{background-color:var(--masir-pink) !important;}

/* ---------- Hide Total's native header + placeholder top bar (replaced by unified .masir-nav) ---------- */
#site-header,#site-header-sticky-wrapper,#top-bar-wrap{display:none !important;}

/* ---------- Internal pages: drop wishlist / share / category (unnecessary) ---------- */
.tutor-course-wishlist-btn,.tutor-course-share-btn,.tutor-social-share-wrap,
.tutor-course-bookmark,.save-bookmark-btn,.tutor-course-details-actions,
.tutor-course-categories,.tutor-meta-categories,.tutor-course-listing-category,
.list-item-category,.tutor-course-card-categories{display:none !important;}

/* Remove the big featured/thumbnail image on the single course page */
.tutor-course-thumbnail,.tutor-single-course-thumbnail{display:none !important;}

/* ============ Rich course description blocks (.masir-cdesc) ============ */
.masir-cdesc{color:#e8eaed;line-height:1.95;font-size:16px;}
.masir-cdesc h3{color:#fff;font-size:23px;font-weight:800;margin:40px 0 16px;position:relative;padding-right:16px;}
.masir-cdesc h3:first-child{margin-top:6px;}
.masir-cdesc h3::before{content:"";position:absolute;right:0;top:5px;bottom:5px;width:5px;border-radius:3px;background:linear-gradient(#ff006b,#f63d68);}
.masir-cdesc p{color:#cbd2da;margin:0 0 14px;}
.masir-cdesc strong{color:#fff;}
.masir-cdesc .m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:18px 0;}
.masir-cdesc .m-card{background:#151a23;border:1px solid #2a313d;border-radius:14px;padding:20px;}
.masir-cdesc .m-card h4{color:#fff;margin:0 0 8px;font-size:17px;font-weight:700;}
.masir-cdesc .m-card p{margin:0;color:#9aa4b2;font-size:14px;line-height:1.8;}
.masir-cdesc .m-chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.masir-cdesc .m-chip{background:rgba(255,0,107,.12);border:1px solid rgba(255,0,107,.35);color:#ff7aae;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;}
.masir-cdesc .m-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:11px;}
.masir-cdesc .m-list li{position:relative;padding-right:26px;color:#cbd2da;}
.masir-cdesc .m-list li::before{content:"";position:absolute;right:2px;top:11px;width:8px;height:8px;border-radius:50%;background:#ff006b;}
.masir-cdesc .m-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0;}
.masir-cdesc .m-info > div{background:#151a23;border:1px solid #2a313d;border-radius:12px;padding:14px 16px;}
.masir-cdesc .m-info b{display:block;color:#fff;font-size:15px;margin-bottom:3px;}
.masir-cdesc .m-info span{color:#9aa4b2;font-size:13px;}
.masir-cdesc .m-price{background:linear-gradient(135deg,rgba(255,0,107,.14),rgba(41,112,255,.10));border:1px solid rgba(255,0,107,.3);border-radius:16px;padding:22px 24px;margin:18px 0;}
.masir-cdesc .m-price .big{font-size:25px;font-weight:800;color:#fff;}
.masir-cdesc .m-price .old{color:#9aa4b2;text-decoration:line-through;margin-inline-start:10px;font-size:16px;}
.masir-cdesc details{background:#151a23;border:1px solid #2a313d;border-radius:12px;margin:10px 0;overflow:hidden;}
.masir-cdesc details summary{padding:15px 20px;cursor:pointer;color:#fff;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.masir-cdesc details summary::-webkit-details-marker{display:none;}
.masir-cdesc details summary::after{content:"+";color:#ff006b;font-size:20px;font-weight:700;}
.masir-cdesc details[open] summary{color:#ff7aae;}
.masir-cdesc details[open] summary::after{content:"\2212";}
.masir-cdesc details .m-a{padding:0 20px 16px;color:#9aa4b2;line-height:1.85;}
.masir-cdesc .m-steps{counter-reset:s;list-style:none;padding:0;margin:14px 0;display:grid;gap:12px;}
.masir-cdesc .m-steps li{counter-increment:s;position:relative;padding:14px 58px 14px 16px;background:#151a23;border:1px solid #2a313d;border-radius:12px;color:#cbd2da;}
.masir-cdesc .m-steps li::before{content:counter(s);position:absolute;right:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#f63d68;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}

/* Show full course description (no Show-More truncation) since it's rich content */
.tutor-toggle-more-content{max-height:none !important;height:auto !important;}
.tutor-toggle-more-collapsed:before,.tutor-toggle-more-collapsed::before{display:none !important;}
.tutor-toggle-more-btn,.tutor-course-details-content + button,[class*="toggle-more-btn"]{display:none !important;}

/* Hide Total's native footer (replaced by .masir-footer mountain scene) */
#footer,#footer-bottom,.footer-callout-wrap{display:none !important;}