/* ================================================================
   Roughan Mobile Search – rms-style.css  v1.0
   Same design DNA as Roughan Custom Search.
   Panel slides down from top — no fixed-position calc needed.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root {
  --rms-accent:     #d0283c;
  --rms-accent-h:   #b8202f;
  --rms-white:      #ffffff;
  --rms-text:       #1a1a1a;
  --rms-muted:      #6b6b6b;
  --rms-border:     #e8e8e8;
  --rms-dur:        0.32s;
  --rms-ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Kill tap highlight everywhere ── */
#rms-trigger,
#rms-close,
#rms-overlay,
.rms-panel *,
.rms-card {
  -webkit-tap-highlight-color: transparent;
}

/* ════════════════════════════════════════════
   1. TRIGGER BUTTON
════════════════════════════════════════════ */
.rms-wrap {
  display:        inline-flex;
  align-items:    center;
  vertical-align: middle;
}

#rms-trigger {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            52px;
  height:           52px;
  border-radius:    50%;
  background:       var(--rms-accent);
  color:            var(--rms-white);
  border:           none;
  cursor:           pointer;
  padding:          0;
  touch-action:     manipulation;
  user-select:      none;
  -webkit-user-select: none;
  outline:          none;
  box-shadow:       none;
  flex-shrink:      0;
  transition:       background 0.18s ease;
  font-family:      'Lato', sans-serif;
}
#rms-trigger:hover,
#rms-trigger:active { background: var(--rms-accent-h); }
#rms-trigger svg    { pointer-events: none; display: block; }

/* ════════════════════════════════════════════
   2. BODY LOCK (prevent scroll when open)
════════════════════════════════════════════ */
body.rms-body-lock {
  overflow: hidden;
  /* iOS Safari needs this too */
  position: fixed;
  width: 100%;
}

/* ════════════════════════════════════════════
   3. FULL-SCREEN OVERLAY (dim backdrop)
════════════════════════════════════════════ */
#rms-overlay {
  position:   fixed;
  inset:      0;
  z-index:    99998;
  background: rgba(0,0,0,0.45);
  opacity:    0;
  visibility: hidden;
  cursor:     pointer;
  /* transition is set dynamically by JS */
}

/* ════════════════════════════════════════════
   4. SLIDE-DOWN PANEL
   Sits at top:0 and translates up by 100% when hidden.
   No getBoundingClientRect() needed — zero positioning bugs.
════════════════════════════════════════════ */
#rms-panel {
  position:    fixed;
  top:         0;
  left:        0;
  width:       100%;
  max-height:  90vh;
  z-index:     99999;
  overflow-y:  auto;
  -webkit-overflow-scrolling: touch;

  /* Hidden: slid above viewport */
  transform:   translateY(-100%);
  opacity:     0;
  visibility:  hidden;
  transition:
    transform   var(--rms-dur) var(--rms-ease),
    opacity     var(--rms-dur) var(--rms-ease),
    visibility  0s linear var(--rms-dur);

  font-family: 'Lato', sans-serif;
  box-shadow:  0 8px 32px rgba(0,0,0,0.22);
}

#rms-panel * {
  font-family: 'Lato', sans-serif !important;
}

/* Open state */
#rms-panel.rms-panel--open {
  transform:  translateY(0);
  opacity:    1;
  visibility: visible;
  transition:
    transform   var(--rms-dur) var(--rms-ease),
    opacity     var(--rms-dur) var(--rms-ease),
    visibility  0s linear 0s;
}

/* ════════════════════════════════════════════
   5. RED BANNER SECTION
════════════════════════════════════════════ */
.rms-banner {
  background: var(--rms-accent);
  padding:    48px 20px 52px;
  text-align: center;
  position:   relative;
}

.rms-banner__inner {
  max-width: 600px;
  margin:    0 auto;
}

/* Close button */
#rms-close {
  position:         absolute;
  top:              14px;
  right:            16px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  background:       rgba(255,255,255,0.15);
  border:           none;
  border-radius:    50%;
  color:            var(--rms-white);
  cursor:           pointer;
  padding:          0;
  touch-action:     manipulation;
  outline:          none;
  transition:       background 0.18s ease, transform 0.22s ease;
}
#rms-close:hover,
#rms-close:active {
  background: rgba(255,255,255,0.28);
  transform:  rotate(90deg);
}
#rms-close svg { pointer-events: none; display: block; }

/* Eyebrow */
.rms-eyebrow {
  font-size:      0.82rem;
  font-weight:    300;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.82);
  margin:         0 0 12px;
  line-height:    1;
}

/* Heading */
.rms-heading {
  font-size:      2.2rem !important;
  font-weight:    400 !important;
  color:          var(--rms-white) !important;
  margin:         0 0 28px !important;
  line-height:    1.2 !important;
  letter-spacing: 0 !important;
  font-family:    'Lato', sans-serif !important;
}

/* Search form */
.rms-form { width: 100%; }

.rms-input-wrap {
  display:        flex;
  align-items:    center;
  max-width:      560px;
  margin:         0 auto;
  background:     var(--rms-white);
  border-radius:  4px;
  position:       relative;
  overflow:       visible;
}

.rms-input {
  flex:               1 1 auto;
  height:             52px;
  border:             none !important;
  outline:            none !important;
  box-shadow:         none !important;
  padding:            0 16px;
  font-size:          1rem;
  font-weight:        300;
  color:              var(--rms-text);
  background:         transparent;
  border-radius:      4px 0 0 4px;
  -webkit-appearance: none;
  font-family:        'Lato', sans-serif !important;
}
.rms-input::placeholder { color: #aaa; font-weight: 300; }
.rms-input::-webkit-search-cancel-button,
.rms-input::-webkit-search-decoration { -webkit-appearance: none; }

.rms-submit {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            50px;
  height:           52px;
  background:       transparent;
  border:           none !important;
  outline:          none !important;
  cursor:           pointer;
  color:            #888;
  padding:          0;
  border-radius:    0 4px 4px 0;
  touch-action:     manipulation;
  transition:       color 0.15s ease;
}
.rms-submit:hover,
.rms-submit:active { color: var(--rms-accent); }
.rms-submit svg    { pointer-events: none; display: block; }

/* ════════════════════════════════════════════
   6. LIVE SUGGESTIONS
════════════════════════════════════════════ */
.rms-suggestions {
  position:      absolute;
  top:           calc(100% + 2px);
  left:          0;
  right:         0;
  background:    var(--rms-white);
  border-radius: 0 0 4px 4px;
  box-shadow:    0 8px 28px rgba(0,0,0,0.14);
  overflow:      hidden auto;
  z-index:       10;
  max-height:    0;
  opacity:       0;
  transition:    max-height 0.22s var(--rms-ease), opacity 0.18s ease;
  text-align:    left;
}
.rms-sugg--open { max-height: 360px; opacity: 1; }

.rms-sugg__item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         10px 14px;
  text-decoration: none;
  color:           var(--rms-text);
  border-bottom:   1px solid var(--rms-border);
  transition:      background 0.12s ease;
}
.rms-sugg__item:last-of-type { border-bottom: none; }
.rms-sugg__item:active       { background: #fff4f4; }

.rms-sugg__thumb {
  width: 38px; height: 38px; border-radius: 3px;
  object-fit: cover; flex-shrink: 0; background: var(--rms-border); display: block;
}
.rms-sugg__thumb--placeholder {
  background: #f0f0f0; display: flex; align-items: center; justify-content: center;
}
.rms-sugg__body  { flex: 1; min-width: 0; }
.rms-sugg__type  {
  display: block; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rms-accent);
}
.rms-sugg__title {
  font-size: 0.88rem; font-weight: 600; color: var(--rms-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rms-sugg__footer {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; font-size: 0.82rem; font-weight: 600;
  color: var(--rms-accent); text-decoration: none;
  background: #fff8f8; border-top: 1px solid var(--rms-border);
}
.rms-sugg__loading,
.rms-sugg__empty {
  padding: 14px; font-size: 0.88rem; color: var(--rms-muted); text-align: center;
}

/* ════════════════════════════════════════════
   7. CARDS SECTION
════════════════════════════════════════════ */
.rms-cards {
  background: #ebebeb;
  padding:    20px 16px 24px;
}

.rms-cards__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
  max-width:             600px;
  margin:                0 auto;
}

.rms-card {
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           var(--rms-text);
  background:      var(--rms-white);
  border:          none;
  border-bottom:   3px solid var(--rms-border);
  border-radius:   0;
  overflow:        hidden;
  transition:      border-bottom-color 0.18s ease;
}
.rms-card:active { border-bottom-color: var(--rms-accent); }

.rms-card__img {
  width:       100%;
  height:      120px;
  overflow:    hidden;
  background:  #e0e0e0;
  flex-shrink: 0;
  display:     block;
}
.rms-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rms-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #e4e4e4;
}

.rms-card__body {
  display:         flex;
  flex-direction:  column;
  padding:         12px 12px 14px;
  gap:             10px;
  flex:            1;
}

.rms-card__title {
  font-size:   0.9rem;
  font-weight: 400;
  color:       var(--rms-text);
  line-height: 1.35;
  margin:      0;
}

.rms-card__arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--rms-accent);
  color:           var(--rms-white);
  flex-shrink:     0;
  align-self:      flex-start;
  transition:      background 0.18s ease;
}
.rms-card:active .rms-card__arrow { background: var(--rms-accent-h); }
.rms-card__arrow svg { pointer-events: none; display: block; }

/* ════════════════════════════════════════════
   8. RESPONSIVE TWEAKS
════════════════════════════════════════════ */
@media (max-width: 380px) {
  .rms-heading          { font-size: 1.7rem !important; }
  .rms-cards__grid      { gap: 8px; }
  .rms-card__img        { height: 100px; }
  .rms-banner           { padding: 40px 14px 44px; }
}

@media (min-width: 600px) {
  /* On wider screens keep the same compact look */
  .rms-cards__grid { grid-template-columns: repeat(3, 1fr); }
  .rms-card__img   { height: 150px; }
}