/* ===================================================================
 * Modernized EventPrime Live Seating Styles (DARK MODE)
 * =================================================================== */

/* --- 1. CSS Variables for Dark Theme --- */
:root {
  --ep-primary-bg: #2d2d44; /* Dark background for seat plan area */
  --ep-secondary-bg: #1e1e32; /* Slightly darker background for legend */
  --ep-border-color: #4a4a6b;
  --ep-text-color: #f0f0f5;
  --ep-text-muted: #a0a0b8;
  --ep-accent-color: #bf7fff; /* A purple accent to match your theme */

  /* Seat colors - you can adjust these to fit your theme better */
  --ep-seat-available-color: #28a745;
  --ep-seat-selected-color: #0099ff;
  --ep-seat-booked-color: #dc3545;
  --ep-seat-reserved-color: #8e949b;
  --ep-seat-popover-bg: #260d2d;
  --ep-seat-popover-text: #ffffff;

  --ep-transition-speed: 0.3s;
}

/* Prevents text selection while the user is panning the seat map */
/* body.ep-is-panning {
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
} */

/* rm padding for live seating modal  */
.bat-custom-modal .ticket-modal-content {
  padding: 0;
}
.ticket-modal-content {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

/* --- 2. Main Layout & Structure --- */
/* Forcing the layout to attempt a row display */
#ep_ls_event_ticket_checkout_modal .ep-box-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  /* gap: 1.5rem; */
  width: 100%; /* Ensure it uses full available width */
  margin-bottom: 1.5rem;
}

/* The right sidebar with details */
/* #ep_event_ticket_modal_right {
  flex: 1 1 300px; 
  min-width: 280px;
  border-left: 1px solid var(--ep-border-color);
  padding-left: 1.5rem;
} */
/* Remove border when it stacks vertically */
/* @media (max-width: 900px) {
  #ep_event_ticket_modal_right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #583d5e;
    padding-top: 4px;
  }
} */

/* --- 3. Seat Plan & Controls --- */
.ep-seat-plan-wrap {
  flex-grow: 1; /* Make it take up available vertical space */
  /* max-height: 600px; */
  overflow: auto;
  /* border: 1px solid var(--ep-border-color); */
  border-radius: 8px;
  background-color: transparent;
  cursor: grab;
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
  position: relative;
  text-align: center;
  /* For Firefox */
  scrollbar-width: none;

  /* For Internet Explorer and older Edge */
  -ms-overflow-style: none;
}

/* For Chrome, Safari, and other WebKit browsers */
.ep-seat-plan-wrap::-webkit-scrollbar {
  display: none;
}

.ep_ls_front_seat_plan {
  display: inline-block; /* THIS IS THE FIX: Forces the container to expand to its content's width */
  min-width: 100%; /* Ensures it fills the space even if content is narrow */
  transform-origin: top left;
  transition: transform 0.3s ease-in-out;
  cursor: grab;
  padding-left: 2.1em;
  padding-right: 1.25em;
}

/* .ep_ls_front_seat_plan {
  transition: transform var(--ep-transition-speed) ease-in-out;
  transform-origin: center center;
  padding: 2rem;
} */

/* Fix for control elements on dark background */
#ep_ls_ticket_modal_load_seats_colors {
  color: var(--ep-text-color);
}
.ep_ls_front_ticket_choose_area {
  padding: 0.5em;
  background-color: #270e2f;
  color: var(--ep-text-color);
  border: 1px solid var(--ep-border-color);
}
.ep-btn-outline-dark {
  cursor: pointer;
  /* The zoom buttons */
  background-color: #270e2f;

  color: var(--ep-text-muted);
  border: 1px solid var(--ep-border-color);
  transition: all 100ms ease-in-out;
}
.ep-btn-outline-dark:hover,
.ep-btn-outline-dark:focus {
  color: white;
}

/* --- 4. Individual Seats Styling (Largely Unchanged) --- */
.ep-seat-col {
  position: relative;
  padding: 4px;
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}
.ep_ls_event_ticket_seat {
  cursor: pointer;
  transition: transform var(--ep-transition-speed) ease,
    filter var(--ep-transition-speed) ease;
}
.ep_ls_event_ticket_seat svg {
  width: 28px;
  height: 28px;
  transition: fill var(--ep-transition-speed) ease;
}

/* --- 5. Seat Interactivity & States --- */
.ep_ls_event_ticket_seat:not(.ep-seat-not-allowed):hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}
.ep_ls_event_ticket_seat.selected {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px var(--ep-accent-color));
}
.ep_ls_event_ticket_seat.selected svg {
  stroke: var(--ep-accent-color);
  stroke-width: 2px;
}
.ep-seat-not-allowed {
  cursor: not-allowed !important;
  /* filter: grayscale(80%); */
  /* opacity: 0.5; */
}
.ep-ls-hide-seat {
  visibility: hidden;
}

/* --- 6. Modern Popover (Dark Mode) --- */
.ep-seat-info-popover {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background-color: var(--ep-seat-popover-bg);
  color: var(--ep-seat-popover-text);
  padding: 0.75rem;
  border-radius: 6px;
  width: 180px;
  font-size: 13px;
  line-height: 1.6;
  z-index: 10;
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
  border: 1px solid var(--ep-border-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ep-transition-speed) ease,
    transform var(--ep-transition-speed) ease,
    visibility var(--ep-transition-speed);
}
.ep-seat-info-popover .ep-seat-info-popover-arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--ep-seat-popover-bg);
}
.ep-seat-col:hover .ep-seat-info-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
.ep-seat-info-popover-row {
  display: flex;
  justify-content: space-between;
}
.ep-seat-info-popover-row strong {
  font-weight: 600;
}
/* --- START: Popover Zoom & Position Fix V2 --- */

/* * WHEN ZOOMING IN:
 * We combine the original centering transform (translateX) with the new inverse scale.
*/
.ep-seat-info-popover {
  /* ...your other existing styles for the popover... */
  transition: transform 0.3s ease-in-out;

  /* ADD THIS LINE 👇 */
  transform-origin: bottom center;
}

.ep_ls_front_seat_plan.ep-seat-zooming-in .ep-seat-info-popover {
  transform: translateX(-50%) scale(0.667);
}

/* * WHEN ZOOMING OUT:
 * We do the same, combining the centering with the new inverse scale.
*/
.ep_ls_front_seat_plan.ep-seat-zooming-out .ep-seat-info-popover {
  transform: translateX(-50%) scale(1.2);
}

/* --- END: Popover Zoom & Position Fix --- */

/* --- 7. Row & Column Labels --- */
.ep_ls_single_area_row_title,
.ep_seat_col_number {
  color: var(--ep-text-muted);
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}
.ep_ls_single_area_row_title {
  padding-right: 1rem;
}
.ep_seat_col_number {
  position: absolute;
  top: -20px;
}

/* --- 8. Zoom Functionality (Unchanged) --- */
.ep_ls_front_seat_plan.zooming-in {
  transform: scale(1.25);
}
.ep_ls_front_seat_plan.zooming-out {
  transform: scale(0.8);
}
.ep_ls_front_seat_plan.zooming-normal {
  transform: scale(1);
}

/* --- 9. Legend Styling (Dark Mode) --- */
.ep-options-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.65rem;
  background: transparent;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
}
.ep-options-legend > .ep-box-col-3 {
  flex-grow: 1;
  color: var(--ep-text-color);
}
.ep-options-legend .ep-align-middle {
  display: flex;
  align-items: center;
  font-size: 13px;
}
/* .ep-options-legend svg {
  border: 1px solid var(--ep-border-color);
  border-radius: 3px;
} */
.ep-options-legend .ep-align-middle svg {
  margin-right: 8px;
}
/* --- 10. Highlighting Area (Unchanged) --- */
.highlighted-area {
  animation: highlighted-area 1s ease-in-out;
  /* box-shadow: 0 0 0 3px var(--ep-accent-color); */
  border-radius: 8px;
}
@keyframes highlighted-area {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(191, 127, 255, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

/* --- 11. Right Sidebar text color fix --- */
#ep_event_ticket_modal_right,
#ep_event_ticket_modal_right div,
#ep_event_ticket_modal_right span {
  padding: 0 4px;
  color: var(--ep-text-color) !important; /* Force override if needed */
}
.bat-custom-modal .modal-actions {
  padding: 0 10px;
}

/* =================================================================== */
/* FINAL V3: Seating Plan UI Overhaul (BookMyShow Inspired)
/* Replaces all previous seating-related fixes.
/* =================================================================== */

.ep-seat-plan-wrap:active {
  cursor: grabbing;
}

/* --- 2. Stage / Screen Indicator (BookMyShow style) --- */
/* .ep-seat-plan-wrap::before {
  content: "All eyes this way";
  display: block;
  width: 80%;
  margin: 0 auto 2rem auto;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--ep-text-muted, #a0a0b8);
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid var(--ep-accent-color, #bf7fff);
  border-radius: 4px 4px 0 0;
} */

/* --- 2. Stage / Screen Indicator (BookMyShow style) --- */
/* .ep-stage-indicator {
  display: block;
  width: 80%;
  min-width: 250px;
  margin: 0 auto 2rem auto;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #a0a0b8;
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid #bf7fff;
  border-radius: 4px 4px 0 0;
} */

/* --- NEW: Dynamic Theater Stage Indicator --- */
.ep-stage-indicator {
  /* Sizing & Position */
  display: block;
  width: 90%;
  max-width: 500px; /* Prevents it from being too wide on large screens */
  margin: 0 auto 3rem auto; /* Increased bottom margin for more space */
  padding: 0.6rem;
  box-sizing: border-box;

  /* The Curve Effect */
  border-bottom: 2px solid var(--ep-accent-color, #bf7fff);
  border-bottom-left-radius: 50% 20px; /* Creates an elliptical curve on the corners */
  border-bottom-right-radius: 50% 20px;

  /* The 3D Perspective Effect */
  transform-origin: bottom center;
  transform: perspective(400px) rotateX(10deg);

  /* The Glow Effect */
  box-shadow: 0 10px 25px -8px rgba(191, 127, 255, 0.4);

  /* Text Styling */
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase; /* Makes the text look more intentional */
  color: #a0a0b8;
  background-color: rgba(0, 0, 0, 0.2);
}

/* --- 3. Seat Row Alignment Fix --- */
/* This is the container for a single row (e.g., 'A' + all its seats) */
.ep_ls_single_area_seats {
  display: flex;
  align-items: center; /* Vertically aligns the row label with the seats */
  margin-bottom: 8px; /* Space between rows */
  flex-wrap: nowrap; /* Ensures a single row doesn't wrap onto itself */
}

/* --- 4. Row & Seat Number Label Styling --- */
/* This is for the row label ('A', 'B') */
.ep_ls_single_area_row_title {
  width: 40px; /* Gives a consistent gutter for the labels */
  flex-shrink: 0; /* Prevents the label from shrinking */
  text-align: center;
  font-weight: 600;
  color: var(--ep-text-muted, #a0a0b8);
}

/* This is for the seat numbers ('1', '2') */
.ep_seat_col_number {
  font-size: 10px;
  color: var(--ep-text-muted, #a0a0b8);
  margin-bottom: 2px;
}
/* Hide column numbers on the first row as they are defined there */
.ep_ls_single_area_seats:not(:first-child) .ep_seat_col_number {
  display: none;
}

/* --- 5. Individual Seat Styles (The Fix You Found + Refinements) --- */
.ep-seat-col {
  display: inline-flex; /* Your key fix! */
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 2px 4px;
  max-width: 40px;
}

.ep_ls_event_ticket_seat {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.ep_ls_event_ticket_seat svg {
  width: 28px;
  height: 28px;
  transition: fill 0.2s ease;
}

/* Hover & Selected States */
.ep_ls_event_ticket_seat:not(.ep-seat-not-allowed):hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}

.ep_ls_event_ticket_seat.selected {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px var(--ep-accent-color, #bf7fff));
}
.ep_ls_event_ticket_seat.selected svg {
  stroke: var(--ep-accent-color, #bf7fff);
  stroke-width: 2px;
}

/* --- 6. Mobile First Enhancements --- */
@media (max-width: 768px) {
  /* Force the plan to be wide, creating a scrollable/pannable area */
  .ep_ls_front_seat_plan {
    min-width: 600px;
  }

  /* Make seats slightly larger for easier tapping */
  .ep_ls_event_ticket_seat svg {
    width: 34px;
    height: 34px;
  }

  .ep-seat-col {
    max-width: 45px;
    padding: 4px;
  }

  /* Improve visibility of labels on mobile */
  .ep_ls_single_area_row_title {
    font-size: 1.1em;
  }

  .ep_seat_col_number {
    font-size: 11px;
  }
}
/* --- Styling for the new, clean ticket summary list --- */

/* This replaces the old .ep-single-modal-ticket-row style */
#ep_event_booking_ticket .ep-single-modal-ticket-row {
  display: block !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#ep_event_booking_ticket .ticket-row-main {
  display: flex;
  justify-content: space-between;
  font-size: 1.1em;
  color: #fff;
}

#ep_event_booking_ticket .ticket-row-seats {
  font-size: 0.9em;
  color: #a0a0b8; /* Muted color */
  padding-top: 5px;
  word-break: break-all;
}
/* TODO: temp fix rm it later  */
@media (max-width: 380px) {
  /* The left side containing the seat map */
  #ep_ls_event_ticket_checkout_modal .ep-box-col-9 {
    padding-top: 15px;
  }
}
/*
 * Live Seating Plan Zoom Styles
 */

/* This is the main container for your seating plan. 
   We set its origin point for scaling and add a smooth transition. */
.ep_ls_front_seat_plan {
  transform-origin: top left; /* Zooms from the top-left corner */
  transition: transform 0.3s ease-in-out;
  cursor: grab; /* Changes the cursor to indicate the plan can be panned */
}

/* This is the state when the 'zoom in' button is clicked. 
   It scales the plan up to 150% of its original size. 
   You can change the 1.5 value to make it zoom more or less. */
.ep_ls_front_seat_plan.ep-seat-zooming-in {
  transform: scale(1.5);
}

/* This is the state when the 'zoom out' button is clicked.
   It scales the plan down to 70% of its original size.
   You can change the 0.7 value. */
.ep_ls_front_seat_plan.ep-seat-zooming-out {
  transform: scale(0.7);
}

/* --- FINAL: BookMyShow Inspired Seating Area Styles --- */

/* This is the new main wrapper for a whole section (Title + Seats) */
.ep-ls-seating-section {
  padding-bottom: 0.5rem;
  /* margin-bottom: 1.5rem; */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* The dividing line */
  /* border-radius: 8px;  */
  /* Start with a transparent shadow */
  box-shadow: 0 0 0px 0px rgba(191, 127, 255, 0);

  /* This controls the FADE-OUT speed (0.5s) */
  transition: border-color 0.5s ease-out, box-shadow 0.5s ease-out;
}

/* This is the "focused" state when the class is added */
.ep-ls-seating-section.ep-area-focused {
  border-color: var(--ep-accent-color, #bf7fff); /* The visible border */
  box-shadow: 0 0 20px 5px rgba(191, 127, 255, 0.4); /* The outer glow */

  /* This controls the FADE-IN speed (0.2s) */
  transition: border-color 0.2s ease-in, box-shadow 0.2s ease-in;
}

/* Remove the border from the very last seating section */
.ep_ls_front_seat_plan > .ep-ls-seating-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

/* 15-10-25:  11: 43 PM IST */
/* This is just the container for the seats now, no border needed */
.ep_ls_single_seat_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Title bar: Centered on desktop */
.ep-ls-seat-plan-area-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center on desktop */
  align-items: center;
  gap: 0.5rem; /* Space between title and price */
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Style for the Area/Ticket Name */
.ep-ls-area-name {
  color: #f0f0f5;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Styling for the Price text */
.ep-ls-area-price {
  /* font-weight: bold; */
  color: #f0f0f5;
  font-size: 0.85em;
}

/* On screens 768px or less, left-align the title */
@media (max-width: 768px) {
  .ep-ls-seat-plan-area-title {
    justify-content: flex-start; /* Left-align on mobile */
    /* padding-left: 1.25em; */
  }
}
/* --- NEW: Control Bar & Legend Styles --- */

.ep-ls-modal-header {
  margin-bottom: 1.5rem;
  padding: 0 1rem; /* Add some overall horizontal padding */
}

/* 1. The Control Bar (Dropdown + Buttons) */
.ep-ls-control-bar {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.ep-ls-area-selector {
  flex-grow: 1;
}

.ep-ls-area-selector select {
  /* 1. Remove default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* 2. Add our custom arrow SVG as a background image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.2em;

  /* 3. Adjust padding to make room for the new arrow */
  /* This keeps your vertical padding and adds space on the right */
  padding: 0.6rem 2.5rem 0.6rem 1rem;

  /* 4. Keep your original styling */
  width: 100%;
  max-width: 250px;
  border-radius: 8px;
}
.ep-ls-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Space between zoom group and info icon */
}

#ep_ls_info_icon {
  border-radius: 4px; /* Give the standalone icon rounded corners */
}

/* 2. The Legend Bar (Color Keys) */
.ep-ls-legend-bar {
  display: flex;
  align-items: center;
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
  gap: 0.5em; /* Row and Column gap */
  padding: 0.75rem;
  background-color: #270e2f;
  border-radius: 8px;
}

.ep-ls-legend-item {
  display: inline;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  flex-grow: 1;
  color: var(--ep-text-muted, #a0a0b8);
}

.ep-ls-legend-item svg rect {
  border-radius: 2px;
}

.ep-ls-action-buttons button {
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 1.15em;
}

/* 3. Mobile Responsiveness */
@media (max-width: 768px) {
  .ep-ls-control-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ep-ls-area-selector select {
    max-width: none; /* Allow dropdown to take full width */
  }

  .ep-ls-action-buttons {
    justify-content: center;
  }

  .ep-ls-legend-item {
    /* Create a 2x2 grid on mobile */
    flex-basis: calc(50% - 0.75rem); /* 50% minus half the column-gap */
    flex-grow: 0;
  }
}

/* =================================================================
   =============== START: STYLES FOR INFO MODAL ====================
   ================================================================= */

/* This is the main fix. It makes the modal a top-level overlay. */
#ep_ls_info_modal {
  position: fixed; /* Position relative to the viewport */
  top: 0;
  /* todo: change it later */
  margin-top: 4em;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Ensures it's on top of everything else */
  display: flex; /* Helps with vertical centering */
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Horizontally centers the content */
}

/* This styles the dark background overlay */
#ep_ls_info_modal .ep-modal-overlay {
  /* background-color: rgba(0, 0, 0, 0.6); */
  position: absolute;
  top: 0;
  left: 0;
  /* height: 100vh;
  width: 100vw; */
}

#ep_ls_info_modal.body {
  display: none;
}
/* This ensures the modal content appears above the overlay */
#ep_ls_info_modal .ep-modal-wrap {
  position: relative; /* Needed so z-index works */
  z-index: 10000;
  background-color: #fff;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Optional: Some extra styling for the content inside */
#ep_ls_info_modal .ep-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-radius-: 12px; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  background-color: black;
  border-bottom: 1px solid black;
  padding: 1rem;
}

#ep_ls_info_modal .ep-modal-body {
  padding: 1rem 1.5rem;
  color: #333; /* Darker text for readability */
}

#ep_ls_info_modal .ep-modal-body ul {
  list-style-type: disc;
  padding-left: 20px;
}

#ep_ls_info_modal .ep-modal-footer {
  border-top: 1px solid #eee;
  padding: 1rem;
}

#ep_ls_info_modal .ep-modal-close {
  cursor: pointer;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  /* opacity: 0.3; */
}

#ep_ls_info_modal .ep-modal-close:hover {
  /* opacity: 0.7; */
}

.ep-modal-title {
  color: white;
  text-align: center;
}

#got-it-btn {
  display: block;
  padding: 12px;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  width: 100%;
  background-color: black;
  color: white;
}

@media (min-width: 580px) {
  .show-on-mobile-only {
    display: none;
  }
}