/* White corners: simple L only — no arrows.
   Buttons: L + long horizontal lines. */

:root {
  --book-green: #3f8f5b;
  --book-ink: #0b0c0a;
}

/* ===== Buttons: L corners + long horizontal lines ===== */
.btn-frame,
.room-row__btn,
.room-detail__btn,
.pack-card__btn,
.room-btn,
.rooms-dock__btn,
.rooms-chrome__account {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  isolation: isolate;
  overflow: visible !important;
}

.btn-frame::before,
.room-row__btn::before,
.room-detail__btn::before,
.pack-card__btn::before,
.room-btn::before,
.rooms-dock__btn::before,
.rooms-chrome__account::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff) !important;
  background-size:
    100% 1.5px,
    100% 1.5px,
    1.5px 12px,
    1.5px 12px,
    1.5px 12px,
    1.5px 12px !important;
  background-position:
    top left,
    bottom left,
    top left,
    top right,
    bottom left,
    bottom right !important;
}

.btn-frame::after,
.room-row__btn::after,
.room-detail__btn::after,
.pack-card__btn::after,
.room-btn::after,
.rooms-dock__btn::after,
.rooms-chrome__account::after {
  content: none !important;
  display: none !important;
}

/* ===== Cards: L only (long arms, no diagonal arrow) ===== */
.corner-frame {
  position: relative;
  border: 0 !important;
  box-shadow: none;
  overflow: visible;
}

.corner-frame::before,
.corner-frame::after,
.corner-frame > .corner-frame__bl,
.corner-frame > .corner-frame__br {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  z-index: 6;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 72px 72px;
}

/* TL: └ shape as ┌ */
.corner-frame::before {
  top: 0;
  left: 0;
  background-position: top left;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M3 48V3h45' stroke='%23fff' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* TR: ┐ */
.corner-frame::after {
  top: 0;
  right: 0;
  background-position: top right;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M24 3h45v45' stroke='%23fff' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* BL: └ */
.corner-frame > .corner-frame__bl {
  left: 0;
  bottom: 0;
  background-position: bottom left;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M3 24v45h45' stroke='%23fff' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* BR: ┘ */
.corner-frame > .corner-frame__br {
  right: 0;
  bottom: 0;
  background-position: bottom right;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M24 69h45V24' stroke='%23fff' stroke-width='3.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.stay-picker {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: rgba(8, 9, 12, 0.42);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size:
    100% 1.5px,
    100% 1.5px,
    1.5px 12px,
    1.5px 12px,
    1.5px 12px,
    1.5px 12px;
  background-position:
    top left,
    bottom left,
    top left,
    top right,
    bottom left,
    bottom right;
}

.rooms-dock .stay-picker {
  background-color: rgba(255, 255, 255, 0.03);
}

.btn-frame:not(.btn-book):hover,
.btn-frame:not(.btn-book):focus-visible {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--paper);
  outline: none;
}

.btn-book {
  transition: background-color 0.28s ease, color 0.28s ease;
}

.btn-book:hover,
.btn-book:focus-visible {
  background-color: var(--book-green) !important;
  color: var(--book-ink) !important;
  outline: none;
}

.btn-book:hover::before,
.btn-book:focus-visible::before {
  background-image:
    linear-gradient(#0b0c0a, #0b0c0a),
    linear-gradient(#0b0c0a, #0b0c0a),
    linear-gradient(#0b0c0a, #0b0c0a),
    linear-gradient(#0b0c0a, #0b0c0a),
    linear-gradient(#0b0c0a, #0b0c0a),
    linear-gradient(#0b0c0a, #0b0c0a) !important;
}

.room-row__btn--main:hover,
.pack-card__btn--main:hover,
.room-detail__btn:hover,
.room-btn:hover {
  background-image: none;
  border-color: transparent !important;
}