/*
 * "Ferah" theme — light, airy redesign layered on top of mystyles.css.
 * Loaded after mystyles.css from base.html, so plain selectors win when
 * they are at least as specific as the originals.
 */
:root {
  --no-bg: #fbfcfd;
  --no-soft: #eef5ff;
  --no-blue: #0b5cd5;
  --no-blue-dark: #0848aa;
  --no-ink: #0e1726;
  --no-text: #344054;
  --no-muted: #667085;
  --no-line: #e4e7ec;
  --no-field: #d0d7e2;
  --no-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --no-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

html, body,
html.dashboard, html.dashboard body,
.button, .input, .textarea, .select select, .title, .subtitle {
  font-family: var(--no-font);
}
body { background: var(--no-bg); color: var(--no-text); }
code, pre, .mono { font-family: var(--no-mono); }

.title { color: var(--no-ink); font-weight: 700; letter-spacing: -0.02em; }
.subtitle { color: var(--no-muted); }
a { color: var(--no-blue); }
a:hover { color: var(--no-blue-dark); }
.myblue { color: var(--no-blue) !important; }
.mygray, .is-gray, .mygray .title { color: var(--no-ink) !important; }

/* Buttons & fields */
.button { border-radius: 10px; font-weight: 600; }
html.dashboard .button { border-radius: 8px !important; }
.button.is-red,
.button.is-primary,
.button.is-link,
.button.is-success.checkout-button {
  background: var(--no-blue);
  background-image: none;
  border-color: transparent;
  color: #fff;
}
.button.is-red:hover,
.button.is-primary:hover,
.button.is-link:hover,
.button.is-success.checkout-button:hover {
  background: var(--no-blue-dark);
  background-image: none;
  color: #fff;
}
.button.is-link.is-outlined { background: transparent; color: var(--no-blue); border-color: var(--no-blue); }
.button.is-link.is-outlined:hover { background: var(--no-blue); color: #fff; }
.button.is-black { background: #fff; color: var(--no-ink); border: 1px solid var(--no-field); }
.button.is-black:hover { background: var(--no-soft); color: var(--no-blue); }
.input, .textarea, .select select {
  border-radius: 10px;
  border-color: var(--no-field);
  box-shadow: none;
}
html.dashboard .input, html.dashboard .textarea { border-radius: 8px; }
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--no-blue);
  box-shadow: 0 0 0 3px rgba(11, 92, 213, 0.15);
}

/* Top bar & header */
.top-bg-gray { background: #f2f5f9; border-bottom: 1px solid var(--no-line); font-size: 13px; }
.top-bg-gray .is-white,
.top-bg-gray .is-white a,
.top-bg-gray .is-white p { color: var(--no-muted); font-weight: 500; }
.top-bg-gray .is-white a:hover { color: var(--no-blue); }
.top-bg-gray .dropdown-content a { color: var(--no-text); }
header .header { background: #fff; border-bottom: 1px solid var(--no-line); }
.header .navbar { background: transparent; }
.header .navbar-item { color: var(--no-text); font-weight: 500; font-size: 15px; }
.header a.navbar-item:hover { color: var(--no-blue); background: transparent; }
.header .navbar-item.button.is-red,
.header .navbar-item.button.is-success { color: #fff; }
.header .navbar-item.button.is-red:hover { color: #fff; background: var(--no-blue-dark); }
.header .navbar-end .button.is-primary { background: #fff; color: var(--no-ink); border: 1px solid var(--no-field); }
.header .navbar-end .button.is-primary:hover { background: var(--no-soft); color: var(--no-blue); }
.navbar-item.is-api { color: var(--no-blue) !important; }
.navbar-item .api-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--no-soft); color: var(--no-blue);
  padding: 2px 7px; border-radius: 999px; margin-left: 6px;
}
.dropdown-bg { background: var(--no-soft); }
.dropdown-bg p { color: var(--no-ink) !important; }
.messages_container { background: var(--no-blue); }

/* Hero / domain search */
.main-search,
.webp .main-search,
.no-webp .main-search {
  background: linear-gradient(180deg, var(--no-bg) 0%, var(--no-soft) 100%);
  color: var(--no-ink);
}
.main-search .title { color: var(--no-ink); }
.main-search-clouds,
.small-clouds .main-search-clouds,
.webp .main-search-clouds,
.no-webp .main-search-clouds { background-image: none !important; animation: none !important; }
.main-search .is-white,
.main-search .is-white p { color: var(--no-muted); font-weight: 500; }
.form-border {
  background: #fff;
  border: 1px solid var(--no-field);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 12px 32px -14px rgba(11, 92, 213, 0.35);
}
.form-border .input { border: 0; box-shadow: none; }
.form-border .field.has-addons .control .button { border-radius: 11px !important; }
.dashboard-top .form-border { border-radius: 10px; padding: 2px; box-shadow: none; }

.ferah-hero { padding: 64px 0 56px; text-align: center; }
.ferah-hero .pill {
  display: inline-block; font-size: 13px; font-weight: 600;
  background: #dfeaff; color: var(--no-blue);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
.ferah-hero h1 {
  font-size: clamp(34px, 5.2vw, 56px); line-height: 1.06; letter-spacing: -0.035em;
  color: var(--no-ink); font-weight: 700; max-width: 17ch; margin: 0 auto 16px;
  text-wrap: balance;
}
.ferah-hero .lead { color: var(--no-muted); font-size: 18px; max-width: 54ch; margin: 0 auto 28px; }
.ferah-hero .search-wrap { max-width: 680px; margin: 0 auto; text-align: left; }
.ferah-tlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ferah-tlds a {
  background: #fff; border: 1px solid var(--no-line); border-radius: 8px;
  padding: 5px 11px; font-size: 14px; color: var(--no-text); font-weight: 500;
}
.ferah-tlds a b { color: var(--no-blue); font-variant-numeric: tabular-nums; }
.ferah-tlds a:hover { border-color: var(--no-blue); }

/* Feature cards */
.freessl { background: var(--no-bg); padding: 48px 0 40px; }
.freessl h1.title { font-size: 2rem; }
.freessl h2.title { font-size: 1.25rem; font-weight: 500; color: var(--no-muted) !important; }
.freessl .columns > .column > svg { max-height: 96px; }

/* Sections */
.transfer-bg, .transfer-bg2 { background: var(--no-blue); background-image: none; }
.testimonials-bg { background: #f5f8fc; }
.need-help-bg { background: var(--no-soft); }
.need-help-bg .is-white,
.need-help-bg .is-white p,
.need-help-bg .is-white a,
.need-help-bg .title { color: var(--no-ink); }
.need-help-bg .is-white a.button { color: var(--no-ink); }
.card { border-radius: 14px; border: 1px solid var(--no-line); box-shadow: none; }

/* Developer / API band */
.ferah-dev { background: #fff; border-top: 1px solid var(--no-line); border-bottom: 1px solid var(--no-line); padding: 64px 0; }
.ferah-dev .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--no-blue);
}
.ferah-dev h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.03em; color: var(--no-ink); font-weight: 700; margin: 10px 0 14px; text-wrap: balance; }
.ferah-dev p.lead { color: var(--no-muted); font-size: 17px; max-width: 48ch; }
.ferah-dev ul.checks { margin: 20px 0 26px; }
.ferah-dev ul.checks li { padding: 5px 0 5px 28px; position: relative; color: var(--no-text); }
.ferah-dev ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 6px;
  background: var(--no-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230b5cd5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.term {
  background: #0e1726; color: #d5deea; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(14, 23, 38, 0.45);
  font-family: var(--no-mono); font-size: 13px; text-align: left;
}
.term .term-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #162135; color: #8193ad; font-size: 12px; }
.term .term-top i { width: 10px; height: 10px; border-radius: 50%; background: #2b3a52; display: inline-block; }
.term .term-top span { margin-left: 8px; }
.term pre { background: transparent; color: inherit; margin: 0; padding: 18px 20px; line-height: 1.75; white-space: pre; overflow-x: auto; font-size: 13px; }
.term .c { color: #6f819b; }
.term .g { color: #4ade80; }
.term .b { color: #7cb3ff; }
.term .y { color: #fcd34d; }
.term .r { color: #f87171; }

/* Developers page */
.dev-page { padding: 48px 0 64px; }
.dev-page h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.035em; line-height: 1.08; color: var(--no-ink); font-weight: 700; margin-bottom: 14px; text-wrap: balance; }
.dev-page h2 { font-size: 24px; letter-spacing: -0.02em; color: var(--no-ink); font-weight: 700; margin: 40px 0 12px; }
.dev-page h3 { font-size: 17px; color: var(--no-ink); font-weight: 600; margin: 24px 0 8px; }
.dev-page p, .dev-page li { color: var(--no-text); }
.dev-page .lead { color: var(--no-muted); font-size: 18px; max-width: 60ch; }
.dev-page code { background: var(--no-soft); color: var(--no-blue-dark); padding: 1px 6px; border-radius: 6px; font-size: 0.88em; }
.dev-page .term code { background: none; color: inherit; padding: 0; }
.dev-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; }
.dev-steps > div { background: #fff; border: 1px solid var(--no-line); border-radius: 14px; padding: 20px; }
.dev-steps .n { width: 30px; height: 30px; border-radius: 9px; background: var(--no-soft); color: var(--no-blue); display: grid; place-items: center; font-weight: 700; margin-bottom: 10px; }
.dev-steps h3 { margin: 0 0 4px; }
.dev-steps p { font-size: 14px; color: var(--no-muted); margin: 0; }
.endpoint-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--no-line); border-radius: 14px; overflow: hidden; }
.endpoint-table td { padding: 10px 14px; border-top: 1px solid var(--no-line); vertical-align: top; font-size: 14px; }
.endpoint-table tr:first-child td { border-top: 0; }
.endpoint-table td:first-child { width: 80px; }
.endpoint-table td:nth-child(2) { font-family: var(--no-mono); font-size: 13px; color: var(--no-ink); white-space: nowrap; }
.method { display: inline-block; font-family: var(--no-mono); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.method.get { background: #e7f6ec; color: #13703a; }
.method.post { background: #e4efff; color: var(--no-blue); }
.method.patch, .method.put { background: #fff4db; color: #8a5a00; }
.method.delete { background: #fde8e8; color: #b42318; }
.prompt-box { background: #fff; border: 1px solid var(--no-line); border-radius: 14px; padding: 18px 20px; font-size: 15px; color: var(--no-text); }

/* API key (dashboard) */
.api-key-box { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; max-width: 680px; }
.api-key-box input { font-family: var(--no-mono); font-size: 14px; flex: 1 1 320px; min-width: 0; }

/* Footer */
.myfooter { background-color: var(--no-ink) !important; background-image: none; }

/* Dashboard */
.dashboard-sidebar { background: #fff; border-right: 1px solid var(--no-line); }
.dashboard-sidebar .menu-label { color: var(--no-muted); }
.dashboard-sidebar .menu-label strong { color: var(--no-ink) !important; font-size: 18px; }
.dashboard-sidebar .menu-list a { color: var(--no-text); border-radius: 8px; margin: 1px 10px; padding: 0.5em 15px !important; }
.dashboard-sidebar .menu-list a:hover { background: #f2f5f9; color: var(--no-ink); }
.dashboard-sidebar .menu-list a.is-active { background: var(--no-soft); color: var(--no-blue); font-weight: 600; }
.dashboard-sidebar .dashboard-sidebar-close { color: var(--no-ink); }
.dashboard-top { border-bottom: 1px solid var(--no-line); }
.table { color: var(--no-text); }
.table thead th { color: var(--no-ink); }
.table.is-bordered td, .table.is-bordered th { border-color: var(--no-line); }

@media screen and (max-width: 768px) {
  .ferah-hero { padding: 40px 0 36px; }
  .ferah-hero .lead { font-size: 16px; }
  .ferah-dev { padding: 44px 0; }
  .endpoint-table td:nth-child(2) { white-space: normal; word-break: break-all; }
}
.prompt-box code { background: none; color: var(--no-ink); padding: 0; font-size: 14px; line-height: 1.6; white-space: normal; word-break: break-word; }