html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* New brand font: PingARLT (single family, weight-discriminated) */
@font-face {
  font-family: 'PingARLT';
  src: url('../fonts/PingARLT-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PingARLT';
  src: url('../fonts/PingARLT-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PingARLT';
  src: url('../fonts/PingARLT-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PingARLT';
  src: url('../fonts/PingARLT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PingARLT';
  src: url('../fonts/PingARLT-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

html {
  height: 100%;
}

fieldset {
  margin: 0;
  padding: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
  border: 0;
}

legend {
  margin: 0;
  padding: 0;
  display: block;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
}

/*===============================
=            Choices            =
===============================*/
.choices {
  position: relative;
  margin-bottom: 24px;
  font-size: 16px;
}

.choices:focus {
  outline: none;
}

.choices:last-child {
  margin-bottom: 0;
}

.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
  background-color: #EAEAEA;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.choices.is-disabled .choices__item {
  cursor: not-allowed;
}

.choices[data-type*="select-one"] {
  cursor: pointer;
}

.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 7.5px;
}

.choices[data-type*="select-one"] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #DDDDDD;
  background-color: #FFFFFF;
  margin: 0;
}

.choices[data-type*="select-one"] .choices__button {
  background-image: url("../../icons/cross-inverse.svg");
  padding: 0;
  background-size: 8px;
  height: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: .5;
}

.choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
  opacity: 1;
}

.choices[data-type*="select-one"] .choices__button:focus {
  box-shadow: 0px 0px 0px 2px #00BCD4;
}

.choices[data-type*="select-one"]:after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}

.choices[data-type*="select-one"].is-open:after {
  border-color: transparent transparent #333333 transparent;
  margin-top: -7.5px;
}

.choices[data-type*="select-one"][dir="rtl"]:after {
  left: 11.5px;
  right: auto;
}

.choices[data-type*="select-one"][dir="rtl"] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0;
}

.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
  cursor: text;
}

.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-right: -4px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid #008fa1;
  background-image: url("../../icons/cross.svg");
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: .75;
}

.choices[data-type*="select-multiple"] .choices__button:hover, .choices[data-type*="select-multiple"] .choices__button:focus, .choices[data-type*="text"] .choices__button:hover, .choices[data-type*="text"] .choices__button:focus {
  opacity: 1;
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #f9f9f9;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #DDDDDD;
  border-radius: 2.5px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}

.is-focused .choices__inner, .is-open .choices__inner {
  border-color: #b7b7b7;
}

.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0;
}

.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px;
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%;
}

[dir="rtl"] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px;
}

.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}

.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #00BCD4;
  border: 1px solid #00a5bb;
  color: #FFFFFF;
  word-break: break-all;
}

.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}

[dir="rtl"] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #00a5bb;
  border: 1px solid #008fa1;
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaaaaa;
  border: 1px solid #919191;
}

.choices__list--dropdown {
  display: none;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
}

.choices__list--dropdown.is-active {
  display: block;
}

.is-open .choices__list--dropdown {
  border-color: #b7b7b7;
}

.is-flipped .choices__list--dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: .25rem .25rem 0 0;
}

.choices__list--dropdown .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.choices__list--dropdown .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px;
}

[dir="rtl"] .choices__list--dropdown .choices__item {
  text-align: right;
}

@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable {
    padding-right: 100px;
  }
  .choices__list--dropdown .choices__item--selectable:after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  [dir="rtl"] .choices__list--dropdown .choices__item--selectable {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px;
  }
  [dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
    right: auto;
    left: 10px;
  }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f2f2f2;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
  opacity: .5;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: .5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
  color: gray;
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px;
}

.choices__input:focus {
  outline: 0;
}

[dir="rtl"] .choices__input {
  padding-right: 2px;
  padding-left: 0;
}

.choices__placeholder {
  opacity: .5;
}

/*=====  End of Choices  ======*/
input,
button {
  font-family: 'Poppins', sans-serif;
}

* {
  box-sizing: border-box;
}

/* =========================================================================
   Arbapps — landing/search redesign (rebrand 2026-04)
   Brand tokens, glassmorphism background, modern responsive form
   ========================================================================= */
:root {
  --primary-1: #0069ff;
  --primary-2: #008dff;
  --ink: #0a1930;
  --gray: #9aa3af;
  --bg: #f4f7fb;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --surface-border: rgba(255, 255, 255, 0.6);
  --field-border: #e5e9f2;
  --danger: #e53e5b;
  --shadow-card: 0 20px 60px -20px rgba(10, 25, 48, 0.25),
                 0 8px 24px -12px rgba(10, 25, 48, 0.15);
  --shadow-btn: 0 10px 24px -8px rgba(0, 105, 255, 0.55);
  --radius-card: 24px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'PingARLT', -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

button, input { font-family: inherit; }

/* -------------------------------------------------------------------------
   Page wrapper + decorative blurred aurora background
   ------------------------------------------------------------------------- */
.s130 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle radial highlight under the card */
.s130::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(0, 141, 255, 0.10), transparent 70%),
    radial-gradient(40% 40% at 50% 0%, rgba(0, 105, 255, 0.06), transparent 70%);
  z-index: -2;
  pointer-events: none;
}

/* Two large blurred gradient orbs */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.bg-blob--one {
  width: 520px; height: 520px;
  top: -160px; left: -140px;
  background: radial-gradient(circle at 30% 30%, var(--primary-2), var(--primary-1) 60%, transparent 70%);
  animation: blob-float-a 18s ease-in-out infinite alternate;
}
.bg-blob--two {
  width: 600px; height: 600px;
  bottom: -200px; right: -180px;
  background: radial-gradient(circle at 70% 70%, var(--primary-1), #4ea8ff 55%, transparent 70%);
  animation: blob-float-b 22s ease-in-out infinite alternate;
}
.bg-blob--three {
  width: 320px; height: 320px;
  top: 40%; left: 60%;
  background: radial-gradient(circle, rgba(0, 141, 255, 0.45), transparent 70%);
  opacity: 0.35;
  animation: blob-float-a 26s ease-in-out infinite alternate-reverse;
}

@keyframes blob-float-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes blob-float-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-50px, -20px) scale(1.05); }
}

/* -------------------------------------------------------------------------
   Frosted glass card containing the form
   ------------------------------------------------------------------------- */
.s130 form {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: clamp(28px, 5vw, 44px) clamp(24px, 4vw, 40px) clamp(24px, 4vw, 32px);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  animation: card-rise 520ms var(--ease) both;
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo treatment */
#logo {
  display: block;
  width: clamp(96px, 22vw, 128px) !important;
  height: auto;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(10, 25, 48, 0.06),
    0 12px 28px -12px rgba(0, 105, 255, 0.45);
}

/* Title/tagline (optional, inserted via PHP) */
.s130 .title-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.s130 .title-wrap h1 {
  margin: 0;
  font-size: clamp(20px, 3.6vw, 24px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.s130 .title-wrap p {
  margin: 0;
  font-size: 14px;
  color: var(--gray);
  font-weight: 400;
}

/* -------------------------------------------------------------------------
   Input + button group
   ------------------------------------------------------------------------- */
.s130 form .inner-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.s130 form .inner-form .input-field {
  height: 56px;
  display: flex;
  align-items: center;
}

/* Input wrapper (RTL-aware via the form's dir on parent — keep right-aligned) */
.s130 form .inner-form .input-field.first-wrap {
  flex-grow: 1;
  background: #fff;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  padding: 0 12px 0 18px;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
  flex-direction: row-reverse; /* icon on the right side for RTL */
}

.s130 form .inner-form .input-field.first-wrap:focus-within {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 4px rgba(0, 105, 255, 0.15);
}

.s130 form .inner-form .input-field.first-wrap input {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  direction: rtl;
  outline: none;
}

.s130 form .inner-form .input-field.first-wrap input::placeholder {
  color: var(--gray);
  font-weight: 400;
  opacity: 1;
}

/* Search icon */
.s130 form .inner-form .input-field.first-wrap .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 105, 255, 0.08);
  transition: background 180ms var(--ease);
  flex-shrink: 0;
}
.s130 form .inner-form .input-field.first-wrap:focus-within .svg-wrapper {
  background: rgba(0, 105, 255, 0.16);
}
.s130 form .inner-form .input-field.first-wrap svg {
  width: 18px;
  height: 18px;
  fill: var(--primary-1);
  transition: fill 180ms var(--ease);
}

/* Button */
.s130 form .inner-form .input-field.second-wrap {
  min-width: 0;
  width: 100%;
}

.s130 form .inner-form .input-field.second-wrap .btn-search {
  height: 56px;
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--primary-1) 0%, var(--primary-2) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-btn);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease);
  position: relative;
  z-index: 0;
}

.s130 form .inner-form .input-field.second-wrap .btn-search:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(0, 105, 255, 0.7);
  filter: brightness(1.04);
}
.s130 form .inner-form .input-field.second-wrap .btn-search:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
.s130 form .inner-form .input-field.second-wrap .btn-search:focus-visible {
  outline: 3px solid rgba(0, 105, 255, 0.45);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Error pill + footer
   ------------------------------------------------------------------------- */
.error-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(229, 62, 91, 0.08);
  border: 1px solid rgba(229, 62, 91, 0.18);
  color: var(--danger);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  animation: shake-in 380ms var(--ease) both;
}
.error-wrap::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}
@keyframes shake-in {
  0%   { opacity: 0; transform: translateX(0); }
  30%  { opacity: 1; transform: translateX(-6px); }
  60%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.suggestion-wrap {
  margin-top: 8px;
  padding: 0 4px;
  text-align: center;
  font-size: 12px;
  color: var(--gray);
  font-weight: 400;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Responsive — desktop horizontal row, mobile stacked
   ------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .s130 form .inner-form {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    /* RTL: the order is naturally right-to-left because the form has dir handling
       on its children (button is .second-wrap, listed first in markup) */
  }
  .s130 form .inner-form .input-field.second-wrap {
    width: auto;
    min-width: 132px;
    flex-shrink: 0;
  }
  .s130 form .inner-form .input-field.second-wrap .btn-search {
    padding: 0 28px;
  }
}

@media (max-width: 480px) {
  .s130 { padding: 16px; }
  .bg-blob--one { width: 360px; height: 360px; top: -120px; left: -120px; }
  .bg-blob--two { width: 420px; height: 420px; bottom: -160px; right: -140px; }
  .bg-blob--three { display: none; }
  .s130 form { padding: 26px 20px 22px; }
}

/* -------------------------------------------------------------------------
   Modern entrance + interaction animations
   ------------------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logo-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(10, 25, 48, 0.06),
                         0 12px 28px -12px rgba(0, 105, 255, 0.45); }
  50%      { box-shadow: 0 0 0 1px rgba(10, 25, 48, 0.06),
                         0 16px 36px -10px rgba(0, 141, 255, 0.65); }
}
@keyframes shimmer {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* Logo: pop in, then gentle ambient glow */
#logo {
  animation: logo-pop 620ms var(--ease) both,
             logo-glow 4.8s ease-in-out 700ms infinite;
  transition: transform 280ms var(--ease);
}
#logo:hover { transform: scale(1.04) rotate(-2deg); }

/* Stagger the children of the card (skip the form itself which has card-rise) */
.s130 .title-wrap   { animation: fade-up 520ms var(--ease) 120ms both; }
.s130 .error-wrap   { animation: shake-in 380ms var(--ease) 180ms both; }
.s130 .inner-form   { animation: fade-up 520ms var(--ease) 220ms both; }
.s130 .suggestion-wrap { animation: fade-up 520ms var(--ease) 320ms both; }

/* Button shimmer sweep on hover */
.s130 form .inner-form .input-field.second-wrap .btn-search {
  overflow: hidden;
}
.s130 form .inner-form .input-field.second-wrap .btn-search::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}
.s130 form .inner-form .input-field.second-wrap .btn-search:hover::before {
  animation: shimmer 900ms var(--ease);
}

/* Search icon: subtle scale on focus */
.s130 form .inner-form .input-field.first-wrap:focus-within svg {
  transform: scale(1.1);
}
.s130 form .inner-form .input-field.first-wrap svg {
  transition: fill 180ms var(--ease), transform 220ms var(--ease);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .s130 form,
  .s130 .title-wrap,
  .s130 .error-wrap,
  .s130 .inner-form,
  .s130 .suggestion-wrap,
  #logo,
  .bg-blob {
    animation: none !important;
  }
  .s130 form .inner-form .input-field.second-wrap .btn-search,
  .s130 form .inner-form .input-field.second-wrap .btn-search::before,
  .s130 form .inner-form .input-field.first-wrap,
  .s130 form .inner-form .input-field.first-wrap .svg-wrapper,
  .s130 form .inner-form .input-field.first-wrap svg,
  #logo {
    transition: none !important;
  }
  #logo:hover { transform: none; }
}