.meqyasi-tool{--mq-primary:#123B68;--mq-primary-2:#1d4f82;--mq-green:#19a974;--mq-bg:#edf6fd;--mq-surface:#fff;--mq-text:#17324d;--mq-muted:#718096;--mq-border:#dce9f3;--mq-max-width:1400px;--mq-radius:24px;--mq-mobile-gutter:6px;direction:rtl;font-family:"Cairo",Arial,sans-serif;color:var(--mq-text);width:100%;max-width:var(--mq-max-width);margin:0 auto;padding:0 16px}.meqyasi-tool *{box-sizing:border-box}.mq-card{background:var(--mq-surface);border:0;border-radius:var(--mq-radius);padding:32px;box-shadow:none}.mq-title{font-size:30px;line-height:1.35;font-weight:800;color:var(--mq-primary);margin:0 0 8px}.mq-subtitle{font-size:15px;line-height:1.8;color:var(--mq-muted);margin:0 0 26px}.mq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mq-field label{display:block;font-size:14px;font-weight:700;margin-bottom:9px;color:var(--mq-primary)}.mq-field input,.mq-field select{width:100%;min-width:0;height:52px;border:1px solid var(--mq-border);border-radius:13px;padding:0 14px;background:var(--mq-surface);font:inherit;color:var(--mq-text);outline:none;transition:.2s}.mq-field input:focus,.mq-field select:focus{border-color:var(--mq-primary);box-shadow:0 0 0 3px rgba(18,59,104,.08)}.mq-button{width:100%;min-height:52px;border:0;border-radius:13px;background:var(--mq-primary);color:#fff;font:700 15px "Cairo",Arial,sans-serif;cursor:pointer;transition:.2s}.mq-button:hover{filter:brightness(1.07);transform:translateY(-1px)}.mq-result{margin-top:22px;background:var(--mq-bg);border-radius:20px;padding:26px}.mq-result-value{font-size:34px;line-height:1.25;font-weight:800;color:var(--mq-green)}.mq-note{font-size:13px;line-height:1.8;color:var(--mq-muted);margin-top:8px}.mq-hidden{display:none!important}.mq-actions{margin-top:18px}.mq-tabs{display:flex;gap:8px;padding:5px;background:#f5f9fc;border-radius:14px;margin-bottom:20px}.mq-tab{flex:1;border:0;background:transparent;color:var(--mq-muted);padding:10px 12px;border-radius:10px;font:700 14px "Cairo",Arial,sans-serif;cursor:pointer}.mq-tab.is-active{background:var(--mq-surface);color:var(--mq-primary);box-shadow:0 3px 12px rgba(18,59,104,.08)}
@media(max-width:900px){.meqyasi-tool{max-width:100%;padding:0 12px}.mq-card{padding:24px;border-radius:min(var(--mq-radius),20px)}}
@media(max-width:650px){.meqyasi-tool{padding:0 var(--mq-mobile-gutter)}.mq-card{padding:18px;border-radius:min(var(--mq-radius),18px)}.mq-grid{grid-template-columns:1fr;gap:14px}.mq-title{font-size:24px}.mq-subtitle{font-size:14px;margin-bottom:20px}.mq-result{padding:20px}.mq-result-value{font-size:28px}.mq-tabs{gap:5px}.mq-tab{font-size:13px;padding:9px 6px}}
@media(max-width:380px){.mq-card{padding:15px}.mq-title{font-size:22px}.mq-result-value{font-size:25px}}
/* V1.0 shared professional components */
.mq-pro-header{text-align:center;max-width:760px;margin:0 auto 24px}.mq-pro-eyebrow{display:inline-block;color:var(--mq-green);font-size:12px;font-weight:800;margin-bottom:7px}.mq-pro-actions{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:18px}.mq-secondary{min-height:52px;border:1px solid var(--mq-border);border-radius:13px;background:var(--mq-surface);color:var(--mq-primary);font:700 14px "Cairo",Arial,sans-serif;cursor:pointer}.mq-form-error{margin-top:12px;padding:11px 14px;border-radius:12px;background:#fff2f2;color:#b42318;font-size:13px}.mq-sharebox{margin-top:18px;padding:16px;background:#fff;border:1px solid var(--mq-border);border-radius:15px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.mq-sharebox>div>span{display:block;color:var(--mq-muted);font-size:12px}.mq-share-actions{display:flex;gap:7px}.mq-share-actions button{border:1px solid var(--mq-border);background:#fff;border-radius:10px;padding:8px 11px;cursor:pointer;font-family:inherit}.mq-share-actions .is-primary{background:var(--mq-primary);color:#fff;border-color:var(--mq-primary)}.mq-sharebox input{grid-column:1/-1;width:100%;height:40px;border:1px solid var(--mq-border);border-radius:10px;padding:0 10px;direction:ltr}.mq-sharebox small{grid-column:1/-1;color:var(--mq-green)}.mq-inline-note{font-size:12px;color:var(--mq-muted);line-height:1.7}
@media(max-width:650px){.mq-pro-actions{grid-template-columns:1fr}.mq-sharebox{grid-template-columns:1fr}}

/* ==========================================================
   Meqyasi interaction-state hardening — v1.1.1
   Keeps theme/Elementor button hover rules from leaking in.
   ========================================================== */
.meqyasi-tool button,
.meqyasi-tool input,
.meqyasi-tool select,
.meqyasi-tool summary{
  -webkit-tap-highlight-color:transparent;
}

/* Primary actions: always readable on hover/focus. */
.meqyasi-tool .mq-button,
.meqyasi-tool .mq-button:visited{
  background:var(--mq-primary)!important;
  color:#fff!important;
  border-color:var(--mq-primary)!important;
  text-decoration:none!important;
}
.meqyasi-tool .mq-button:hover,
.meqyasi-tool .mq-button:focus,
.meqyasi-tool .mq-button:focus-visible{
  background:var(--mq-primary-2)!important;
  color:#fff!important;
  border-color:var(--mq-primary-2)!important;
  filter:none!important;
}
.meqyasi-tool .mq-button:active{
  background:var(--mq-primary)!important;
  color:#fff!important;
  transform:translateY(0)!important;
}

/* Secondary/reset actions stay light, never navy-on-navy. */
.meqyasi-tool .mq-secondary,
.meqyasi-tool .mq-age-reset,
.meqyasi-tool .mq-convert-reset{
  background:var(--mq-surface)!important;
  color:var(--mq-primary)!important;
  border-color:var(--mq-border)!important;
}
.meqyasi-tool .mq-secondary:hover,
.meqyasi-tool .mq-secondary:focus,
.meqyasi-tool .mq-secondary:focus-visible,
.meqyasi-tool .mq-age-reset:hover,
.meqyasi-tool .mq-age-reset:focus,
.meqyasi-tool .mq-age-reset:focus-visible,
.meqyasi-tool .mq-convert-reset:hover,
.meqyasi-tool .mq-convert-reset:focus,
.meqyasi-tool .mq-convert-reset:focus-visible{
  background:#f1f7fc!important;
  color:var(--mq-primary)!important;
  border-color:var(--mq-primary)!important;
  filter:none!important;
}

/* Tabs: hover = navy + white; selected = navy + white. */
.meqyasi-tool .mq-tab{
  background:transparent!important;
  color:var(--mq-muted)!important;
  border-color:transparent!important;
}
.meqyasi-tool .mq-tab:hover,
.meqyasi-tool .mq-tab:focus,
.meqyasi-tool .mq-tab:focus-visible{
  background:var(--mq-primary)!important;
  color:#fff!important;
  border-color:var(--mq-primary)!important;
  filter:none!important;
}
.meqyasi-tool .mq-tab.is-active,
.meqyasi-tool .mq-tab.is-active:hover,
.meqyasi-tool .mq-tab.is-active:focus,
.meqyasi-tool .mq-tab[aria-selected="true"]{
  background:var(--mq-primary)!important;
  color:#fff!important;
  border-color:var(--mq-primary)!important;
}

/* Inputs/selects: theme hover rules must not invert them. */
.meqyasi-tool .mq-field input,
.meqyasi-tool .mq-field select,
.meqyasi-tool input[type="date"],
.meqyasi-tool input[type="datetime-local"],
.meqyasi-tool input[type="number"],
.meqyasi-tool input[type="text"],
.meqyasi-tool select{
  background:var(--mq-surface)!important;
  color:var(--mq-text)!important;
}
.meqyasi-tool .mq-field input:hover,
.meqyasi-tool .mq-field select:hover,
.meqyasi-tool input[type="date"]:hover,
.meqyasi-tool input[type="datetime-local"]:hover,
.meqyasi-tool input[type="number"]:hover,
.meqyasi-tool input[type="text"]:hover,
.meqyasi-tool select:hover{
  background:var(--mq-surface)!important;
  color:var(--mq-text)!important;
  border-color:#b9cfdf!important;
}
.meqyasi-tool .mq-field input:focus,
.meqyasi-tool .mq-field select:focus,
.meqyasi-tool input:focus,
.meqyasi-tool select:focus{
  background:var(--mq-surface)!important;
  color:var(--mq-text)!important;
  border-color:var(--mq-primary)!important;
}

/* Shared result/share buttons. */
.meqyasi-tool .mq-share-actions button,
.meqyasi-tool .mq-convert-share button,
.meqyasi-tool .mq-age-share-copy-btn,
.meqyasi-tool .mq-age-share-native{
  background:var(--mq-surface)!important;
  color:var(--mq-primary)!important;
  border-color:var(--mq-border)!important;
}
.meqyasi-tool .mq-share-actions button:hover,
.meqyasi-tool .mq-share-actions button:focus,
.meqyasi-tool .mq-convert-share button:hover,
.meqyasi-tool .mq-convert-share button:focus,
.meqyasi-tool .mq-age-share-copy-btn:hover,
.meqyasi-tool .mq-age-share-copy-btn:focus,
.meqyasi-tool .mq-age-share-native:hover,
.meqyasi-tool .mq-age-share-native:focus{
  background:#f1f7fc!important;
  color:var(--mq-primary)!important;
  border-color:var(--mq-primary)!important;
}
.meqyasi-tool .mq-share-actions button.is-primary,
.meqyasi-tool .mq-convert-share button.is-primary,
.meqyasi-tool .mq-share-actions button.is-primary:hover,
.meqyasi-tool .mq-convert-share button.is-primary:hover{
  background:var(--mq-primary)!important;
  color:#fff!important;
  border-color:var(--mq-primary)!important;
}

/* Keyboard focus is visible without changing text readability. */
.meqyasi-tool button:focus-visible,
.meqyasi-tool input:focus-visible,
.meqyasi-tool select:focus-visible,
.meqyasi-tool summary:focus-visible{
  outline:3px solid rgba(18,59,104,.14)!important;
  outline-offset:2px!important;
}


/* V1.2.1 — integrate tool shells with the site canvas */
.meqyasi-tool > .mq-card,
.meqyasi-tool .mq-tool-shell.mq-card{
  border:0!important;
  box-shadow:none!important;
}


/* V1.2.2 — canonical Cairo typography, isolated to Meqyasi UI */
.meqyasi-tool,
.meqyasi-tool :where(h1,h2,h3,h4,h5,h6,p,span,strong,small,label,button,input,select,textarea,option,summary,a,div,section,article,time,code){
  font-family:"Cairo",Tahoma,Arial,sans-serif!important;
}
.meqyasi-tool input::placeholder,
.meqyasi-tool textarea::placeholder{
  font-family:"Cairo",Tahoma,Arial,sans-serif!important;
}


/* Keep only the textual heading comfortably narrow */
.meqyasi-tool .meqyasi-tool__header,
.meqyasi-tool .meqyasi-header,
.meqyasi-tool .meqyasi-tool-header {
  width: 100% !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}

/* Tool sections/cards should align to the website grid */
.meqyasi-tool .meqyasi-section,
.meqyasi-tool .meqyasi-panel,
.meqyasi-tool .meqyasi-card-wrap,
.meqyasi-tool .meqyasi-form-section,
.meqyasi-tool .meqyasi-results {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 1440px) {
  .meqyasi-tool {
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .meqyasi-tool {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Meqyasi v1.3.3 — exact 1400px desktop alignment */
@media (min-width: 901px) {
  .meqyasi-tool {
    width: 100% !important;
    max-width: var(--mq-max-width, 1400px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .meqyasi-tool > .mq-card,
  .meqyasi-tool .mq-card.meqyasi-tool__inner,
  .meqyasi-tool .mq-card.meqyasi-inner {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Full-width visual sections/results across all modules */
  .meqyasi-age .mq-age-shell,
  .meqyasi-age .mq-age-results,
  .meqyasi-hijri .mq-convert-shell,
  .meqyasi-hijri .mq-convert-results,
  .meqyasi-date-difference .mq-dd-panel,
  .meqyasi-countdown .mq-countdown-shell,
  .meqyasi-countdown .mq-count-results,
  .meqyasi-zakat .mq-zakat-shell,
  .meqyasi-zakat .mq-zakat-step,
  .meqyasi-zakat .mq-z-results,
  .meqyasi-zakat .mq-z-disclaimer {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Keep safe gutters on tablet/mobile */
@media (max-width: 900px) {
  .meqyasi-tool {
    padding-inline: 12px !important;
  }
}
@media (max-width: 650px) {
  .meqyasi-tool {
    padding-inline: var(--mq-mobile-gutter, 6px) !important;
  }
}


/* Meqyasi v1.3.4 — mobile edge alignment */
@media (max-width: 900px) {
  .meqyasi-tool {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: auto !important;
  }

  .meqyasi-tool > .mq-card,
  .meqyasi-tool .mq-card.meqyasi-tool__inner,
  .meqyasi-tool .mq-card.meqyasi-inner {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 650px) {
  .meqyasi-tool {
    padding-inline: 0 !important;
  }

  /* Keep breathing room inside the visual sections, not outside the tool */
  .meqyasi-tool .mq-section,
  .meqyasi-tool .mq-panel,
  .meqyasi-tool .mq-zakat-step,
  .meqyasi-tool .mq-age-shell,
  .meqyasi-tool .mq-convert-shell,
  .meqyasi-tool .mq-dd-panel,
  .meqyasi-tool .mq-countdown-shell {
    box-sizing: border-box !important;
  }
}

