/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.scrollbar-hide {
  -ms-overflow-style: none; /* IE / Edge */
  scrollbar-width: none;    /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* ── Marketing: phone mockup frame ─────────────────────── */
.phone-frame {
  position: relative;
  width: 264px;
  height: 556px;
  background: #1e293b;
  border-radius: 50px;
  padding: 4px;
  box-shadow:
    0 0 0 2px #475569,
    0 40px 100px -20px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Dynamic island */
.phone-frame::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  background: #1e293b;
  border-radius: 20px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: white;
  position: relative;
}