/* ARIDES PREMIUM GLOSS V1 */

/*
  Очень лёгкий premium-эффект:
  - мягкая глубина
  - внутренний верхний блик
  - немного более дорогие кнопки
  - без тяжёлого glassmorphism
*/


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(250,252,253,.96) 100%
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 28px rgba(23,35,59,.055);
}


/* =========================================================
   MAIN CARDS
   ========================================================= */

.service-card,
.why-card,
.prices-card,
.review-card,
.arides-useful-link {
  position: relative;

  border-color:
    rgba(214,223,231,.82) !important;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,1) 0%,
      rgba(252,253,254,.98) 58%,
      rgba(246,250,248,.97) 100%
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 -1px 0 rgba(18,39,55,.025) inset,
    0 8px 22px rgba(30,45,65,.055),
    0 2px 5px rgba(30,45,65,.025);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.service-card::before,
.why-card::before,
.prices-card::before,
.review-card::before,
.arides-useful-link::before {
  content: "";

  position: absolute;

  left: 10px;
  right: 10px;
  top: 1px;

  height: 34%;

  border-radius: inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,0)
    );

  pointer-events: none;

  opacity: .62;
}


.service-card:hover,
.review-card:hover,
.arides-useful-link:hover {
  transform: translateY(-2px);

  border-color:
    rgba(37,190,111,.22) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 -1px 0 rgba(18,39,55,.025) inset,
    0 14px 30px rgba(30,45,65,.09),
    0 4px 10px rgba(30,45,65,.035);
}


/* =========================================================
   MAP + LARGE PANELS
   ========================================================= */

.map-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 12px 28px rgba(25,45,67,.075),
    0 3px 8px rgba(25,45,67,.035);
}


/* =========================================================
   ORDER FORM
   ========================================================= */

.order-form {
  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 12px 34px rgba(24,39,58,.09),
    0 3px 10px rgba(24,39,58,.035);

  border-color:
    rgba(215,224,232,.86);
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.field,
.mini-control,
.easy-schedule {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfd 100%
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 3px rgba(25,45,67,.03);
}


/* =========================================================
   GREEN BUTTONS
   ========================================================= */

.btn-order,
button[type="submit"],
.header-actions .btn,
.service-arrow {
  position: relative;

  background:
    linear-gradient(
      180deg,
      #27ce78 0%,
      #18b968 55%,
      #11a85d 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 -1px 0 rgba(0,80,42,.18) inset,
    0 7px 16px rgba(16,169,91,.20);

  border-color:
    rgba(12,154,82,.35) !important;

  text-shadow:
    0 1px 0 rgba(0,80,40,.12);

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}


.btn-order:hover,
button[type="submit"]:hover,
.header-actions .btn:hover,
.service-arrow:hover {
  transform: translateY(-1px);

  filter:
    brightness(1.025);

  box-shadow:
    0 1px 0 rgba(255,255,255,.44) inset,
    0 -1px 0 rgba(0,80,42,.16) inset,
    0 10px 20px rgba(16,169,91,.24);
}


.btn-order:active,
button[type="submit"]:active,
.header-actions .btn:active,
.service-arrow:active {
  transform: translateY(1px);

  box-shadow:
    0 1px 2px rgba(0,80,42,.14) inset,
    0 4px 10px rgba(16,169,91,.16);
}


/* =========================================================
   HERO IMAGE / LARGE VISUAL
   ========================================================= */

.hero-center {
  filter:
    drop-shadow(
      0 16px 20px rgba(33,55,75,.07)
    );
}


/* =========================================================
   DESKTOP: SLIGHTLY STRONGER DEPTH
   ========================================================= */

@media (min-width: 1101px) {

  .service-card,
  .why-card,
  .prices-card,
  .review-card {
    box-shadow:
      0 1px 0 rgba(255,255,255,.98) inset,
      0 -1px 0 rgba(18,39,55,.025) inset,
      0 10px 25px rgba(30,45,65,.065),
      0 2px 6px rgba(30,45,65,.025);
  }

}


/* =========================================================
   MOBILE: KEEP IT LIGHT
   ========================================================= */

@media (max-width: 760px) {

  .site-header {
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 5px 16px rgba(23,35,59,.04);
  }

  .service-card,
  .why-card,
  .prices-card,
  .review-card,
  .order-form {
    box-shadow:
      0 1px 0 rgba(255,255,255,.96) inset,
      0 6px 16px rgba(30,45,65,.045);
  }

}