/* Add this at the top of style.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
}
.margin0 {
  margin: 0;
}
.container {
  width: 100%;
  max-width: 800px;
  text-align: center;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input,
textarea,
.tag-container {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box; /* Redundant but safe */
}
.flex {
  flex-direction: column;
  width: 100%;
}
@media (min-width: 800px) {
  .flex {
    flex-direction: row; /* Return to side-by-side on desktop  */
  }
}

/* Optional: Highlight holidays in the calendar */
.holiday-highlight .ui-state-default {
  background: #a9ff9e !important; /* Light red background for holidays */
  color: #000000 !important;
  font-weight: bold;
}
.holiday-highlight:hover .ui-state-default:hover {
  background: #33ff44 !important;
}
.green-color {
  color: rgb(64, 100, 64);
}
.flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.smallfont {
  font-size: 0.7rem;
}
.padding5x {
  padding: 0 5px;
  width: 95%;
}
.blockdisplay {
  justify-content: center;
  align-items: flex-start;
  display: block;
}

.errorvalidation {
  margin: 5px 0;
  color: #991b1b;
  font-size: 0.8rem;
  display: none;
  background: #fee2e2;
  border-radius: 5px;
}

#tag-container {
  border-radius: 4px;
  padding: 5px;
  border: 1px solid #ccc;
}

/* Tag Container Styling */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  gap: 5px;
  background: #fff;
}

.tag-container:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.tag-input {
  border: none;
  outline: none;
  flex-grow: 1;
  padding: 8px;
  font-size: 14px;
}

/* Base Tag Style */
.tag {
  background-color: #5a5c5e;
  border-radius: 3px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: default;
}

.tag .remove-btn {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  /*   color: #555; */
}

.tag .remove-btn:hover {
  color: #000;
}

/* Validation States */
.tag.invalid {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  text-decoration: line-through;
}

.error-msg {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 5px;
  min-height: 20px;
}

/* Row styling to keep select and input side-by-side */
.selection-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  animation: fadeIn 0.3s ease-out;
}

.city-select {
  flex: 1; /* Takes up 50% of the space */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.city-input {
  flex: 1; /* Takes up the other 50% */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.city-select:focus,
.city-input:focus {
  border-color: #007bff;
  outline: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

#mainContainer {
  padding: 10px;
}

.padding10x {
  padding: 10px;
}

.hidden {
  display: none;
}
.visible {
  display: block;
}

.break {
  flex-basis: 100%;
  height: 0;
}

/* Main columns */
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Allows the column to shrink */
}

/* Cells */
.cell {
  padding: 6px 0; /* was 10px 0 */
}

/* Bottom of first column has inner columns */
.nested {
  display: flex;
  flex-direction: row; /* Ensure they stay side-by-side */
  width: 100%; /* Critical: ensures row fills the column */
  gap: 0; /* Remove gaps that might push items out */
}

.nested-cell {
  flex: 1;
  display: flex;
  flex-direction: column; /* Stacks the H3 and Input vertically */
  align-items: center;
  justify-content: center;
  min-width: 0; /* Prevents flex children from overflowing */
  padding: 5px;
}

.gap5px {
  gap: 5px;
}

.padding5px {
  padding: 5px;
}

.nested-cell > div {
  width: 100%; /* Ensures the internal wrapper doesn't collapse */
}

/* This targets the <div> wrappers inside your .cell containers */
.cell > div {
  width: 100%;
  padding: 0 5px; /* Adds a little breathing room on the sides */
  box-sizing: border-box; /* Ensures padding doesn't cause spillover */
}

/* Ensure the headings above the inputs also align correctly */
.cell h2,
.cell h3 {
  width: 100%;
  margin-bottom: 10px;
}

.cell > div,
.nested-cell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Keeps text and inputs centered within the column */
  padding: 10px;
  box-sizing: border-box; /* Prevents padding from causing overflow */
}

.nested {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* 3. Ensure all headers and paragraphs take full width for proper text alignment */
.cell h2,
.cell h3,
.nested-cell h3 {
  width: 100%;
  margin: 10px 0;
  text-align: center;
}

/* 4. Remove the width from padding5x if it is interfering with these columns */
.padding5x {
  padding: 0 5px;
  width: 100%; /* Changed from 95% to ensure full alignment */
}

.datetime-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.datetime-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.datetime-item label {
  font-size: 0.75rem;
  margin-bottom: 4px;
  opacity: 0.8;
}

/* Compact inputs */
.datetime-item input {
  padding: 10px;
  font-size: 16px;
  text-align: center;
}

@media (max-width: 600px) {
  .datetime-row {
    flex-direction: column;
    gap: 8px;
  }
}

.datetime-item:first-child {
  flex: 1.5;
}

.cell > .datetime-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0; /* prevents extra vertical height */
}

.datetime-item {
  align-items: center;
}

.datetime-item input {
  width: 100%;
  max-width: 180px; /* keeps time inputs from stretching */
}

.datetime-item:first-child {
  flex: 1.6;
}
.datetime-item:not(:first-child) {
  flex: 1;
}

/* Estimates row layout */
.cell > .estimate-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 0;
  width: 100%;
}

.estimate-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.estimate-item label {
  font-size: 0.75rem;
  margin-bottom: 4px;
  opacity: 0.8;
}

.estimate-item input {
  padding: 10px;
  font-size: 14px;
  text-align: center;
  max-width: 220px;
}

@media (max-width: 600px) {
  .estimate-row {
    flex-direction: column;
    gap: 8px;
  }
}

h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin20px {
  margin: 20px 0;
}

h2 {
  margin-bottom: 10px;
}

h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  padding: 0;
}

.emoji {
  position: relative;
  top: -5px;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;

  background: linear-gradient(
    120deg,
    rgba(0, 56, 168, 0.2) 0%,
    rgba(0, 56, 168, 0.2) 25%,

    rgba(252, 209, 22, 0.22) 25%,
    rgba(252, 209, 22, 0.22) 50%,

    #ffffff 50%,
    #ffffff 75%,

    rgba(206, 17, 38, 0.22) 75%,
    rgba(206, 17, 38, 0.22) 100%
  );

  /*background-size: 320% 320%; */
  background-size: 280% 280%;
  animation: flagFlow 60s ease-in-out infinite;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0;
}

/* Gentle ceremonial motion */
@keyframes flagFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes flagSlide {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* Main container */
.container {
  width: 100%;
  max-width: 920px;

  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.15),
    0 0 0 4px rgba(0, 56, 168, 0.08);

  padding: 2rem;
}

.container-bg {
  margin: 0 auto;
  padding: 0;
  background-image: url("/images/irasutoya-background.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}

.smallspan {
  font-size: 10px;
  /*  color: #555; */
}

.marginbottom0 {
  margin-bottom: 0;
}

#funrun-warning {
  color: #ea580c;
}

#clear {
  background-color: #f4f6ff;
  color: rgb(0, 0, 0);
  border: 1px solid #ccc;
  padding: 10px 50px;
  font-size: 16px;
  border-radius: 4px;
}

#clear:hover {
  background-color: #e0e4f1;
  cursor: pointer;
  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

#clear:active {
  background-color: #cbd5e1;
  -webkit-animation: jello-horizontal 0.3s both;
  animation: jello-horizontal 0.3s both;
}

#signature-pad {
  background-color: #f4f6ff;
  width: 100%;
}

#ui-datepicker-div {
  z-index: 9999;
}

#map {
  height: 400px;
  width: 100%;
  min-height: 400px;
  z-index: 0;
  border-radius: 10px;
}

.disabled-toolbar .leaflet-control-container {
  display: none !important;
}

/* leaflet pointer start */

.leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon {
  pointer-events: none !important;
}

/* leaflet pointer end*/

#mapWrapper {
  position: relative; /* VERY IMPORTANT */
  height: 400px;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

#drawHelp {
  position: absolute;
  top: 80px; /* aligns vertically with toolbar */
  left: 60px; /* aligns horizontally with toolbar */

  padding: 10px 15px;
  border-radius: 20px;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: opacity 0.3s ease;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}

#drawHelp.hidden {
  opacity: 0;
  pointer-events: none;
}
#drawHelp::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 14px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent rgb(0, 0, 0) transparent transparent;
}

.visibility-hidden {
  visibility: hidden;
}

#selectDateWarning {
  color: #ffd54f;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.dropzone .dz-preview.dz-image-preview {
  background: none !important;
}

/* 1. Fancy Remove Link Styling */
.dropzone .dz-preview .dz-remove {
  text-decoration: none;
  background: #083344;
  /* border: 1px solid #7a2a1f; */
  border-radius: 10px; /* Pill shape */
  color: #22d3ee;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-top: 10px;
  display: inline-block;
}

.dropzone .dz-preview .dz-remove:hover {
  background: #ff4d4d;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 2. Rounded Corners for Preview and Background */
.dropzone .dz-preview {
  border-radius: 15px !important;
  overflow: hidden; /* Ensures image doesn't spill out of corners */

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.dropzone .dz-preview .dz-image {
  border-radius: 15px !important; /* Matches the parent border radius */
}

/* Optional: Make the white background look "cleaner" */
.dropzone.dz-clickable {
  border-radius: 12px;
}

/* 1. Hide the progress bar by default */
.dropzone .dz-preview .dz-progress {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Ensures it doesn't block clicks on the thumbnail */
}

/* 2. Show the progress bar ONLY when the file is actually uploading */
.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
}

/* 3. Optional: Hide it again when the upload is complete */
.dropzone .dz-preview.dz-success .dz-progress {
  opacity: 0;
  transition: opacity 0.3s ease;
}