/* Global typography close to screenshot: clean sans-serif with medium weight */
/* Style.css */
html, body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color: #222;
  line-height: 1.5;
  margin: 0;
}

/* Login form styling */
.user-login-page-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.user-login-form {
  max-width: 400px;
  padding: 40px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 15px;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.login-subtitle {
  text-align: center;
  margin-bottom: 30px;
  color: #666;
  font-size: 14px;
  font-weight: 400;
}

.user-login-form .form-item {
  margin-bottom: 20px;
}

.user-login-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.user-login-form input[type="text"],
.user-login-form input[type="password"],
.user-login-form input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.user-login-form input[type="text"]:focus,
.user-login-form input[type="password"]:focus,
.user-login-form input[type="email"]:focus {
  outline: none;
  border-color: #007bff;
}

.user-login-form .form-actions {
  text-align: center;
  margin-top: 30px;
}

.user-login-form .form-submit {
  background: #007bff;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.user-login-form .form-submit:hover {
  background: #0056b3;
}

.form-messages {
  margin-bottom: 20px;
}

.form-messages .messages {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 0;
}

.form-messages .messages--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.form-messages .messages--warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.form-messages .messages--status {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* Enhanced error message styling */
.form-error-message {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: shake 0.5s ease-in-out;
}

.error-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.error-text {
  flex: 1;
  font-weight: 500;
}

/* Shake animation for error messages */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Enhanced form field error styling */
.user-login-form input.error {
  border-color: #dc3545;
  background-color: #fff5f5;
}

.user-login-form input.error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Field-level error messages */
.field-error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
  font-weight: 500;
}

/* Focused form item styling */
.user-login-form .form-item.focused label {
  color: #007bff;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Form with errors styling */
.user-login-form.form-has-errors {
  border: 2px solid #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Page-level messages styling */
.page-messages {
  margin-bottom: 20px;
}

.page-messages .messages,
.messages-wrapper .messages {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 0;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
  position: relative;
}

.page-messages .messages--error,
.messages-wrapper .messages--error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.page-messages .messages--error::before,
.messages-wrapper .messages--error::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.page-messages .messages--error .messages__content,
.page-messages .messages--error .messages__list,
.messages-wrapper .messages--error .messages__content,
.messages-wrapper .messages--error .messages__list {
  margin-left: 30px;
}

.page-messages .messages--warning,
.messages-wrapper .messages--warning {
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffeaa7;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.page-messages .messages--status,
.messages-wrapper .messages--status {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
}

/* Slide down animation for messages */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* System messages styling (for page-level messages) */
.system-messages {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  margin-bottom: 20px;
}

.system-messages .messages {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 0;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
  position: relative;
}

.system-messages .messages--error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.system-messages .messages--error::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.system-messages .messages--error .messages__content,
.system-messages .messages--error .messages__list {
  margin-left: 30px;
}

.system-messages .messages--warning {
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffeaa7;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.system-messages .messages--status {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
}

/* Highlighted region styling */
.highlighted-region {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  margin-bottom: 20px;
}

.highlighted-region .messages {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 0;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
  position: relative;
}

.highlighted-region .messages--error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.highlighted-region .messages--error::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.highlighted-region .messages--error .messages__content,
.highlighted-region .messages--error .messages__list {
  margin-left: 30px;
}

/* Login page specific error messages */
.login-error-messages {
  margin-bottom: 20px;
}

.login-error-messages .messages {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 0;
  font-weight: 500;
  animation: slideDown 0.3s ease-out, shake 0.5s ease-in-out;
  position: relative;
}

.login-error-messages .messages--error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.login-error-messages .messages--error::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.login-error-messages .messages--error .messages__content,
.login-error-messages .messages--error .messages__list {
  margin-left: 30px;
}

/* Password reset page specific messages */
.password-reset-messages {
  margin-bottom: 20px;
}

.password-reset-messages .messages {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 0;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
  position: relative;
}

.password-reset-messages .messages--error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.password-reset-messages .messages--error::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.password-reset-messages .messages--error .messages__content,
.password-reset-messages .messages--error .messages__list {
  margin-left: 30px;
}

.password-reset-messages .messages--status {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
}

.password-reset-messages .messages--status::before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.password-reset-messages .messages--status .messages__content,
.password-reset-messages .messages--status .messages__list {
  margin-left: 30px;
}

.login-links {
  text-align: center;
  margin-top: 20px;
}

.password-reset-link {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.password-reset-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Topbar */
.topbar {
  background: #fff; /* light grey */
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
  color: #000;
}
.topbar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar a {
  color: #444;
  text-decoration: none;
  margin-left: 16px;
}
.topbar a:hover {
  text-decoration: underline;
}

/* Header - keep minimal */
header.site-header {
  /* padding: 16px; */
}

/* Content */
main.site-content {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Footer */
footer.site-footer {
  background: #f0f0f0; /* grey footer */
  border-top: 1px solid #e0e0e0;
  color: #444;
}
footer.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  font-size: 14px;
}

/* Utility */
.links-inline {
  display: inline-flex;
  gap: 16px;
}

/* Views exposed filters */
.views-exposed-form, .all-guests .views-exposed-form {
  margin: 16px 0;
  padding: 12px;
  background: #ffffff;
  /* border: 1px solid #e5e7eb; */
  border-radius: 8px;
  display: grid !important;
  grid-template-columns: 90% 1fr;
  align-items: center;
  gap: 30px;
}

.views-exposed-form label {
  font-weight: 600;
  margin-bottom: 6px;
  display: none;
}

.views-exposed-form .form-text,
.views-exposed-form .form-select {
  padding: 14px 18px;
  border: 1px solid #d1d5db;
  border-radius: 24px;
}

.views-exposed-form .form-actions .button,
.views-exposed-form .form-actions .button--primary {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid #757575;
    border-radius: 24px;
    font-weight: 500;
    color: #757575;

}

/* Align exposed filter controls for the Shobha bookings view */
/* Enforce inline alignment for the Shobha bookings exposed form */
.view.shobha-bookings .views-exposed-form .form--inline,
.shobha-bookings .views-exposed-form .form--inline,
.view.shobha-bookings .views-exposed-form,
.shobha-bookings .views-exposed-form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.view.shobha-bookings .views-exposed-form .form--inline .form-item,
.view.shobha-bookings .views-exposed-form .form--inline .form-actions,
.shobha-bookings .views-exposed-form .form--inline .form-item,
.shobha-bookings .views-exposed-form .form--inline .form-actions {
  margin: 0;
}

.view.shobha-bookings .views-exposed-form .form--inline .form-actions,
.shobha-bookings .views-exposed-form .form--inline .form-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Fallback alignment when .form--inline isn't present */
.view.shobha-bookings .views-exposed-form > .form-item,
.view.shobha-bookings .views-exposed-form > .form-actions {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 12px 12px 0;
  width: auto;
}

.view.shobha-bookings .views-exposed-form > .form-actions .button,
.view.shobha-bookings .views-exposed-form > .form-actions .button--primary {
  height: 38px;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .view.shobha-bookings .views-exposed-form .form--inline,
  .shobha-bookings .views-exposed-form .form--inline {
    gap: 8px;
  }
  .view.shobha-bookings .views-exposed-form .form--inline .form-actions,
  .shobha-bookings .views-exposed-form .form--inline .form-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Align exposed filter controls for the All Guests view */
/* Enforce inline alignment for the All Guests exposed form */
.view.all-guests .views-exposed-form .form--inline,
.all-guests .views-exposed-form .form--inline,
.view.all-guests .views-exposed-form,
.all-guests .views-exposed-form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.view.all-guests .views-exposed-form .form--inline .form-item,
.view.all-guests .views-exposed-form .form--inline .form-actions,
.all-guests .views-exposed-form .form--inline .form-item,
.all-guests .views-exposed-form .form--inline .form-actions {
  margin: 0;
}

.view.all-guests .views-exposed-form .form--inline .form-actions,
.all-guests .views-exposed-form .form--inline .form-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Fallback alignment when .form--inline isn't present */
.view.all-guests .views-exposed-form > .form-item,
.view.all-guests .views-exposed-form > .form-actions {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 12px 12px 0;
  width: auto;
}

.view.all-guests .views-exposed-form > .form-actions .button,
.view.all-guests .views-exposed-form > .form-actions .button--primary {
  height: 38px;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .view.all-guests .views-exposed-form .form--inline,
  .all-guests .views-exposed-form .form--inline {
    gap: 8px;
  }
  .view.all-guests .views-exposed-form .form--inline .form-actions,
  .all-guests .views-exposed-form .form--inline .form-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Views rows (non-table) */
.view .views-row {
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.view .views-row:last-child {
  border-bottom: 0;
}

/* Views tables and generic tables */
table,
.views-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  /* border: 1px solid #e5e7eb; */
}

table thead th,
.views-table thead th {
  background: #fff;
  color: #636363;
  font-weight: 500;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
  text-transform: uppercase;
}

table tbody td,
.views-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #000;
  vertical-align: middle;
  font-size: 14px;
}

table tbody tr:nth-child(odd),
.views-table tbody tr:nth-child(odd) {
  background: #fff;
}

table tbody tr:hover,
.views-table tbody tr:hover {
  background: #f3f4f6;
}

.views-table.views-view-table--responsive,
table.table--responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.views-table a,
table a {
  color: #636463;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
}

.views-table a:hover,
table a:hover {
  text-decoration: underline;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center; /* center like Claro */
  margin-top: 16px;
}

.pager__item a,
.pager__item span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #111827;
}

.pager__item.is-active span {
  background: #374151; /* darker grey for strong highlight */
  color: #ffffff;
  border-color: #374151;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Enhanced pager styles */
.pager__items {
  display: inline-flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pager__item {
  display: inline-flex;
  align-items: center;
}

.pager__item a,
.pager__item span {
  line-height: 1.25; /* tighter like Claro */
}

/* Keep pager in a single row when possible */
.pager--nowrap .pager__items {
  white-space: nowrap;
}

.pager__item a {
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pager__item a:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.pager__item a:focus-visible {
  outline: 2px solid #93c5fd; /* focus ring */
  outline-offset: 2px;
}

.pager__item.is-disabled span,
.pager__item.is-disabled a {
  color: #9ca3af;
  border-color: #e5e7eb;
  background: #fafafa;
  cursor: not-allowed;
}

/* Previous/Next prominence */
.pager__item--previous a,
.pager__item--next a {
  font-weight: 600;
}

/* Compact variant support */
.pager.pager--compact .pager__item a,
.pager.pager--compact .pager__item span {
  padding: 4px 8px;
  font-size: 13px;
}

/* Align pager to the right when desired */
.pager.pager--align-right {
  justify-content: flex-end;
}

/* Ellipsis item */
.pager__item--ellipsis span {
  border: none;
  background: transparent;
  color: #6b7280;
  padding: 6px 6px;
}

/* First/Last emphasis */
.pager__item--first a,
.pager__item--last a {
  font-weight: 600;
}

/* Larger hit area on touch devices */
@media (max-width: 640px) {
  .pager__item a,
  .pager__item span {
    padding: 8px 12px;
  }
  .pager__items {
    gap: 6px;
  }
}

/* Booking Actions Field Styling */
.booking-actions-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.action-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
}

.action-item .action-link {
  display: inline-block;
  text-decoration: none;
  color: #6b7280;
  transition: color 0.2s ease;
  margin-bottom: 0 !important;
}

.action-item .action-link:hover {
  color: #374151;
}

.action-item .action-link .action-icon {
  font-size: 22px;
  line-height: 1;
  display: none;
  margin-bottom: 0;;
}

.action-item .action-link .view-guest-icon {
  font-size: 18px;
  font-weight: bold;
}

.action-item .action-label {
  display: block !important;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  white-space: nowrap;
}


table thead tr th.views-field a::after {
  content: "" !important;
  display: none !important;
  width: 10px !important;
  height: 11px !important;
  margin-left: 0.5em !important;
  vertical-align: middle !important;
  /* SVG icon for up/down arrows */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3e%3cpath d='M5 3.121L2.121.243.243 2.12l4.757 4.757 4.757-4.757L7.879.243 5 3.121zM5 7.879L2.121 10.757l-1.878-1.878L5 4.121l4.757 4.758-1.878 1.879L5 7.879z' fill='%23585858'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/*
 * 2. (Optional) Make sure our icon is hidden if/when the
 * theme's icon appears on an active column.
 */
table.views-table th.views-field.is-active>a[rel="nofollow"]::after {
  content: none !important;
}

.tablesort--asc, .tablesort--desc {
  display:none;
}


/*=========== Start Additional Css ===========*/

#view-webform-submission-value-4-table-column
{
width: 110px;
}
#view-created-table-column, .views-exposed-form #view-webform-submission-value-1-table-column
{
width: 120px;
}
/*=========== End Additional Css ===========*/


.grecaptcha-badge {
  display: block !important;
  visibility: visible !important;
  z-index: 10000 !important;
  /* Ensures it sits on top of other elements */
}