html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Page layout variables and shared container to keep left/right gutters consistent */
:root {
  --page-max-width: 1100px;
  --page-gutter: 1rem; /* left/right padding for page content */
}

/* Reusable page container used by place detail and other full-width sections */
.page-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  width: calc(100% - (var(--page-gutter) * 2));
}

body {
  margin-bottom: 0;
  /* Remove reserved padding for fixed footer; footer is not fixed and participates in document flow */
}

/* Footer styles aligned with PrayDigital.Shared footer */
.app-footer {
  background: linear-gradient(135deg, #2c5f2d, #4a7c59);
  color: white;
  padding: 2rem 1.5rem;
  margin-top: auto;
  border-radius: 0;
  width: 100%;
  height: auto;
  position: static;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-section {
  text-align: center;
}

.footer-text {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin: 0;
}

.footer-link:hover {
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.footer-separator {
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
}

@media (min-width: 768px) {
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-section {
    text-align: left;
  }

  .footer-links {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .app-footer {
    padding: 1.5rem 1rem;
  }
}

/* Nearest mosques: ensure no horizontal padding on desktop or mobile so grid uses full width */
.nearest-places-section { padding-left: 0; padding-right: 0; }
@media (max-width: 700px) {
    .nearest-places-section .places-grid { gap: .75rem; }
}

/* Placeholder link inside mosque card: show pointer and hover affordance */
.place-card-placeholder .placeholder-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.place-card-placeholder .placeholder-link:hover {
    background: rgba(0,0,0,0.02);
    transform: translateY(-2px);
}
.place-card-placeholder .placeholder-link:focus {
    outline: 2px solid rgba(74,124,89,0.25);
    outline-offset: 2px;
}

/* Place detail layout: schedule left, contact info right */
.two-column-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.schedule-card { min-width: 0; }
.contact-card { min-width: 0; }

/* Four-column schedule table used on place detail */
.schedule-table-four-column {
    width: 100%;
    border-collapse: collapse;
    background: white;
}
.schedule-table-four-column thead th {
    text-transform: uppercase;
    font-weight: 600;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.schedule-table-four-column td {
    padding: .85rem 1rem;
    border-bottom: 1px solid #f1f1f1;
}
.schedule-table-four-column .prayer-name { color:#666; font-weight:600; }
.schedule-table-four-column .prayer-time { color:#2c5f2d; font-weight:600; text-align:right; font-family:monospace; }

/* Make the full-size prayer times table match the compact mosque card schedule
   visual style: individual rows appear as cards with subtle radius/shadow and
   the same typography/colors used in place-card schedule. */
.schedule-card .schedule-table-four-column {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem; /* vertical gap between rows */
  background: transparent;
}
.schedule-card .schedule-table-four-column tbody tr {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  overflow: hidden;
}
.schedule-card .schedule-table-four-column td {
  padding: .65rem 1rem;
  border: none;
  vertical-align: middle;
}
.schedule-card .schedule-table-four-column thead { display: none; }
.schedule-card .schedule-table-four-column .prayer-name { color: #666; font-weight: 600; }
.schedule-card .schedule-table-four-column .prayer-time { color: #2c5f2d; font-weight: 700; text-align: right; font-family: monospace; }

/* Similar mosques grid spacing: add top/bottom spacing around the whole section */
.similar-mosques-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.similar-mosques-section h2 {
    margin-bottom: .9rem;
}

/* Similar mosques grid: 2 cards per row on medium+ screens */
.similar-mosques-section .places-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) {
    .similar-mosques-section .places-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .similar-mosques-section {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .schedule-card .schedule-times {
        grid-template-columns: .9fr 1.1fr;
        gap: .4rem;
    }

    .place-card-schedule .schedule-times {
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
    }

    .schedule-card .schedule-item,
    .place-card-schedule .schedule-item {
        gap: .3rem;
        padding: .4rem .5rem;
    }

    .schedule-card .schedule-times .schedule-item:nth-child(odd) .prayer-name {
        flex: 0 0 44px;
        max-width: 44px;
        font-size: .8rem;
    }

    .place-card-schedule .schedule-times .schedule-item:nth-child(odd) .prayer-name {
        flex: 0 0 56px;
        max-width: 56px;
        font-size: .8rem;
    }

    .schedule-card .schedule-times .schedule-item:nth-child(even) .prayer-name,
    .place-card-schedule .schedule-times .schedule-item:nth-child(even) .prayer-name {
        flex: 0 0 52px;
        max-width: 52px;
        font-size: .8rem;
    }

    .schedule-card .schedule-item .prayer-time,
    .place-card-schedule .schedule-item .prayer-time {
        flex: 1 1 auto;
        text-align: right;
        white-space: nowrap;
        font-size: .84rem;
    }
}

/* Place detail specific styles */

/* Use shared container so these sections align exactly with the banner edges (no inner gutter) */
.place-header, .breadcrumb, .address-row, .facilities, .notes {
  /* center and limit width like other page containers but remove horizontal gutter */
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

.place-header {
    margin: 0px !important;
}
.place-header h1 { font-size: 2.25rem; color: #234b2b; margin: 0 0 .5rem; }
.place-header .other-names { color: #666; margin: 0 0 .75rem; font-style: italic; }

.breadcrumb {
    margin: 10px 0px 10px 0px !important;
    display:flex;
    gap: .5rem;
    align-items: center;
    color: #666;
    font-size: 0.95rem;
}
.breadcrumb a { color:#4a7c59; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb-separator { color:#999; }
.breadcrumb-current { color:#333; font-weight:600; }

.address-row { margin: 10px 0px 20px 0px !important }
.address-row a { color:#2b6b45; text-decoration:underline; font-weight:500; }

.place-banner { margin: 0.5rem auto; padding: 0 0 1rem 0; overflow: hidden; box-sizing: border-box; background: transparent; border-radius: 12px; }
.place-banner { padding-left: 0 !important; padding-right: 0 !important; }
.place-banner .banner-link { display:block; border-radius: 12px; overflow: hidden; }
.place-banner .banner-image { width:100%; height:400px; object-fit:cover; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,0.08); display:block; }

/* Make banner link span the inner content gutter so image appears flush with cards
   while keeping the page content aligned with the top navigation. Adjusts for the
   content wrapper horizontal padding (1.5rem). */
.place-banner.edge-align .banner-link {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  width: calc(100% + 3rem);
  display: block;
}

.place-banner .banner-link:focus { outline: none; }
.carousel-placeholder { width:100%; height:400px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f5f5f5 0%,#e9e9e9 100%); border-radius:12px; }

/* Compensate for .content-wrapper horizontal padding so these sections align flush with the banner */
.content-wrapper .place-header,
.content-wrapper .breadcrumb,
.content-wrapper .address-row,
.content-wrapper .facilities,
.content-wrapper .notes {
  /* Remove compensating negative margins — align these sections to the shared page width
     and let the banner and container control horizontal spacing. This avoids a residual
     gap on the right in some layouts. */
  margin: 0 auto;
  max-width: var(--page-max-width);
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

/* Additional left-shift to remove residual gutter in some browsers/layouts */
.content-wrapper .place-header,
.content-wrapper .breadcrumb,
.content-wrapper .address-row,
.content-wrapper .facilities,
.content-wrapper .notes {
  /* remove extra left-shift; alignment is handled by negative margins/padding above
     translating can create a residual gap on the right in some browsers */
  transform: none;
}
.last-updated { margin: .5rem auto; padding: .75rem 1rem; background:#f8f9fa; border-left:4px solid #4a7c59; color:#666; border-radius:6px; }
.last-updated .relative-time { font-weight:600; color:#2c5f2d; margin-left:.5rem; }

/* Restore place detail layout consistency */
.schedule-card .schedule-header-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
}

.schedule-card .schedule-header-row h2 {
    margin: 0;
}

.schedule-card .schedule-header-row .edit-schedule-btn {
    margin-left: auto;
    white-space: nowrap;
}

.facilities.edge-align .info-section,
.notes.edge-align .info-section {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.facilities,
.notes {
  max-width: none;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

.content-wrapper .facilities,
.content-wrapper .notes {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.facilities.edge-align > .info-section,
.notes.edge-align > .info-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Place detail schedule edit modal */
.schedule-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.edit-schedule-btn {
    white-space: nowrap;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: auto;
}

.modal-dialog {
    position: relative;
    z-index: 100001;
    pointer-events: auto;
    background: #fff;
    border-radius: 12px;
    width: min(95vw, 640px);
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.modal-dialog-wide {
    width: min(95vw, 900px);
}

.modal-header {
    padding: 18px 24px 12px;
    border-bottom: 1px solid #eee;
    font-size: 1.35rem;
    font-weight: 600;
    background: #2c5f2d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0 0 16px;
}

.modal-body {
    padding: 1rem 1.5rem;
    overflow: auto;
}

.modal-footer {
    background: #fff;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
}

.modal-schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.modal-schedule-table th,
.modal-schedule-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    text-align: left;
}

.edit-time-type-select,
.edit-time-offset-select,
.edit-time-number,
.edit-time-picker {
    padding: .52rem .72rem;
    border: 1px solid #d7dfd8;
    border-radius: 10px;
    background: #fff;
    color: #1f2b21;
    font-size: .95rem;
    line-height: 1.2;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.edit-time-type-select,
.edit-time-offset-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #2c5f2d 50%),
        linear-gradient(135deg, #2c5f2d 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 3px),
        calc(100% - 10px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.1rem;
}

.edit-time-type-select {
    min-width: 210px;
}

.edit-time-offset-select {
    min-width: 86px;
}

.edit-time-type-select:focus,
.edit-time-offset-select:focus,
.edit-time-number:focus,
.edit-time-picker:focus {
    border-color: #2c5f2d;
    box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.15);
}

.edit-time-number {
    width: 90px;
}

.edit-time-picker {
    min-width: 145px;
    font-weight: 600;
    letter-spacing: .02em;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
    border-color: #c9d8cb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    padding-right: 2.25rem;
}

.edit-time-picker:hover {
    border-color: #7ea889;
}

.edit-time-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .9;
    filter: hue-rotate(55deg) saturate(1.4);
}

.edit-time-picker::-webkit-datetime-edit {
    color: #1f2b21;
}

.edit-time-suffix {
    margin-left: .4rem;
    color: #444;
}

.modal-success-dialog {
    max-width: 400px;
    text-align: center;
}

.modal-success-header {
    justify-content: center;
}

.modal-success-body {
    padding: 2rem;
}

.modal-success-footer {
    justify-content: center;
}

.contact-card .contact-value {
    min-width: 0;
}

.contact-card .contact-value a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 700px) {
    .modal-schedule-table thead {
        display: none;
    }

    .modal-schedule-table,
    .modal-schedule-table tbody,
    .modal-schedule-table tr,
    .modal-schedule-table td {
        display: block;
        width: 100%;
    }

    .modal-schedule-table tr {
        padding: .75rem 0;
        border-bottom: 1px solid #e6e8ec;
    }

    .modal-schedule-table td {
        border: none;
        padding: .2rem 0;
    }

    .modal-schedule-table td::before {
        content: attr(data-label);
        display: block;
        font-size: .82rem;
        font-weight: 600;
        color: #5e6b61;
        margin-bottom: .25rem;
    }

    .edit-time-type-select,
    .edit-time-offset-select,
    .edit-time-picker {
        width: 100%;
        min-width: 0;
    }

    .edit-time-suffix {
        margin-left: 0;
        margin-top: .35rem;
        display: block;
    }

    .schedule-card.content-card,
    .contact-card.content-card {
        padding: .45rem .5rem;
    }

    .schedule-card .info-section,
    .contact-card .info-section,
    .contact-card .contact-info {
        padding: 0;
        margin: 0;
    }

    .schedule-card .schedule-times,
    .place-card-schedule .schedule-times {
        gap: .3rem;
    }

    .schedule-card .schedule-item,
    .place-card-schedule .schedule-item {
        padding: .32rem .4rem;
    }

    .schedule-card .schedule-header-row {
        margin-bottom: .2rem;
    }

    .contact-card .contact-item {
        margin-bottom: .4rem;
    }
}