/*
 * app-intro.css — [bushraa_app_intro] shortcode styles.
 *
 * Static marketing block that replaces the legacy Elementor library
 * template 3107. Loaded only when the shortcode renders.
 */

.bushraa-app-intro {
  display: flex;
  flex-direction: column;
  gap: var(--bushraa-gap-4);
  margin-block: var(--bushraa-gap-6);
  padding: 24px 20px;
  border: 1px solid var(--bushraa-border-elevated);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(2, 48, 71, 0.04),
    rgba(2, 48, 71, 0.01)
  );
  text-align: center;
}

/* Article typography/link rules target generic h2/h3/p/a inside the
 * article body. Reset them here so the shortcode keeps its own compact
 * spacing and button colors. */
.bushraa-article__body .bushraa-app-intro h2,
.bushraa-article__body .bushraa-app-intro h3,
.bushraa-article__body .bushraa-app-intro p {
  margin-block: 0;
}

.bushraa-article__body .bushraa-app-intro a {
  border-block-end: 0;
  text-decoration: none;
}
@media (min-width: 640px) {
  .bushraa-app-intro {
    padding: 32px 28px;
    border-radius: 28px;
    gap: var(--bushraa-gap-5);
  }
}

.bushraa-app-intro__heading {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--bushraa-brand-primary);
}
@media (min-width: 640px) {
  .bushraa-app-intro__heading {
    font-size: 1.625rem;
  }
}

.bushraa-app-intro__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--bushraa-text-default);
  max-width: 52rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .bushraa-app-intro__body {
    font-size: 1rem;
    line-height: 2;
  }
}

.bushraa-app-intro__body strong {
  font-weight: 500;
  color: var(--bushraa-text-default);
}

.bushraa-app-intro__cta-heading {
  margin: var(--bushraa-gap-3) 0 0;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--bushraa-brand-primary);
}
@media (min-width: 640px) {
  .bushraa-app-intro__cta-heading {
    font-size: 1.25rem;
    margin-top: var(--bushraa-gap-4);
  }
}

.bushraa-app-intro__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bushraa-gap-2);
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
@media (min-width: 480px) {
  .bushraa-app-intro__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bushraa-app-intro__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bushraa-brand-primary), var(--bushraa-brand-primary-dark));
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border-block-end: 0;
  box-shadow: 0 10px 22px rgba(2, 48, 71, 0.14);
  transition: background-color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}
/* Article-body scopes every <a> to brand-primary (see article.css). The
 * button's own `color: #fff` rule has a tied specificity against that,
 * leaving nested spans and the SVG to inherit dark-navy text on a
 * dark-navy gradient — invisible off-hover. Bump specificity via
 * `a.bushraa-app-intro__button` and explicitly color every nested
 * element so inheritance can't regress this. */
.bushraa-article__body a.bushraa-app-intro__button,
.bushraa-article__body a.bushraa-app-intro__button .bushraa-app-intro__icon,
.bushraa-article__body a.bushraa-app-intro__button .bushraa-app-intro__button-text,
.bushraa-article__body a.bushraa-app-intro__button .bushraa-app-intro__button-prefix,
.bushraa-article__body a.bushraa-app-intro__button .bushraa-app-intro__button-store {
  color: #ffffff;
  fill: currentColor;
}
.bushraa-app-intro__button:hover,
.bushraa-app-intro__button:focus-visible {
  background: var(--bushraa-brand-primary-dark);
  color: #ffffff;
  border-block-end-color: transparent;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2, 48, 71, 0.18);
}
.bushraa-article__body .bushraa-app-intro__button:hover,
.bushraa-article__body .bushraa-app-intro__button:focus-visible,
.bushraa-article__body .bushraa-app-intro__button:hover .bushraa-app-intro__button-text,
.bushraa-article__body .bushraa-app-intro__button:focus-visible .bushraa-app-intro__button-text,
.bushraa-article__body .bushraa-app-intro__button:hover .bushraa-app-intro__button-prefix,
.bushraa-article__body .bushraa-app-intro__button:focus-visible .bushraa-app-intro__button-prefix,
.bushraa-article__body .bushraa-app-intro__button:hover .bushraa-app-intro__button-store,
.bushraa-article__body .bushraa-app-intro__button:focus-visible .bushraa-app-intro__button-store,
.bushraa-article__body .bushraa-app-intro__button:hover .bushraa-app-intro__icon,
.bushraa-article__body .bushraa-app-intro__button:focus-visible .bushraa-app-intro__icon {
  color: #ffffff;
  fill: currentColor;
  opacity: 1;
}
@media (min-width: 640px) {
  .bushraa-app-intro__button {
    min-height: 52px;
    padding: 9px 16px;
    font-size: 0.875rem;
    gap: 9px;
  }
}

.bushraa-app-intro__icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.bushraa-app-intro__button-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  text-align: start;
}

.bushraa-app-intro__button-prefix {
  font-size: 0.5625rem;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.2;
}

.bushraa-app-intro__button-store {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}