/* css/appointment — updated to match Next.js DateSelectionStep visual language */


#appoContainer{
  padding: 50px 0;
}


/* ========== LOADING SKELETON ========== */
.loading-skeleton {
  animation: fadeIn 0.3s ease;
}

.skeleton-header {
  text-align: center;
  margin-bottom: 40px;
}

.skeleton-title {
  height: 40px;
  width: 300px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin: 0 auto 10px;
}

.skeleton-subtitle {
  height: 20px;
  width: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin: 0 auto;
}

.skeleton-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.skeleton-tab {
  flex: 1;
  height: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}


.skeleton-box {
  width: clamp(327px, 450px, 600px);
  max-height: 92px;
  background: white;
  padding: 40px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  display: flex;
  flex-wrap: wrap;
}

.skeleton-box-2{
width: clamp(327px, 450px, 600px);
  max-height: 92px;
  background: white;
  padding: 40px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.skeleton-btn {
  flex: 1;
  height: 40px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
  width: 50%;
  margin: 0 auto;
  margin-top: 50px;
  order: 2
}


.skeleton-summary-line {
  height: 24px;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 12px;
}

.skeleton-input {
  height: 50px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: 15px;
}

.skeleton-button {
  height: 60px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}


/* ========== LOCATION TABS ========== */
.tab-button {
  position: relative; /* needed for tick ::after */
}

/* Active tab: blue */
.tab-button.active {
  background-color: #0056b3;
  color: #ffffff;
  border-color: #0056b3;
}

.tab-button.active i {
  color: #ffffff;
}

img {
  padding: 0;
}

/* Fallback: if SVG isn't available, draw a CSS tick using a white checkmark */

/* Hide the CSS tick when a real SVG tick exists (SVG will render on top) */
.tab-button.active::after {
  z-index: 1;
}


/* ========== NEAREST APPOINTMENT SUMMARY ========== */
/* Blue gradient */
.nearest-summary {
  background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
  color: white;
  padding: 24px;
  border-radius: var(--border-radius);
  margin-bottom: 30px;
  box-shadow: 0 4px 14px rgba(0, 86, 179, 0.35);
  animation: fadeIn 0.3s ease;
}

/* Hidden state — animate out cleanly */
.nearest-summary.hidden {
  display: none;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.summary-label {
  font-size: var(--p-font);
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.summary-datetime {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--p-font);
  font-weight: 600;
  flex-wrap: wrap;
}

/* Remove icons from date/time display */
.summary-datetime i {
  display: none;
}

.separator {
  opacity: 0.6;
  font-weight: 400;
}

.btn-change {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--p-font);
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: inherit;
}

.btn-change:hover {
 
  transform: translateY(-2px);
}

/* Hide the pen/edit icon inside change button */
.btn-change i {
  display: none;
}


/* ========== DATE + TIME UNIFIED CARD ========== */
/* Wraps both date tabs and time slots in one card with a single heading */
.date-time-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 20px 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  animation: slideDown 0.3s ease;
}

.date-time-card-heading {
  color: #0056b3;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding: 0;
}

.date-time-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 12px 0;
}


/* ========== DATE TABS ========== */
.date-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.date-tabs::-webkit-scrollbar { height: 4px; }
.date-tabs::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.date-tabs::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }

.date-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 75px;
  flex-shrink: 0;
  position: relative; /* for tick ::after */
  font-family: inherit;
}

.date-tab:hover {
  border: 2px solid #0056b3;
  box-shadow: 0 2px 6px rgba(0, 86, 179, 0.1);
}

/* Selected state */
.date-tab.active,
.time-slot.active {
  border: 2px solid #0056b3;
  background-color: rgba(8, 97, 192, 0.05);
  color: var(--dark-gray);
  box-shadow: 0 4px 8px rgba(0, 86, 179, 0.15);
}


.date-tab .day-name {
  font-size: 0.65rem;
  color: #718096;
  margin-bottom: 0.25rem;
}

.date-tab .day-number {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.25rem;
}

.date-tab .day-month {
  font-size: 0.75rem;
  color: #4a5568;
}


/* ========== TIME SLOTS ========== */
.time-slots-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.25rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.time-slots-grid::-webkit-scrollbar { height: 6px; }
.time-slots-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.time-slots-grid::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
.time-slots-grid::-webkit-scrollbar-thumb:hover { background: #555; }

.time-slot {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background-color: white;
  color: #333;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  font-family: inherit;
}

.time-slot:hover {
  border: 2px solid #0056b3;
  box-shadow: 0 2px 6px rgba(0, 86, 179, 0.1);
}

.red {
  color: red;
  font-weight: 600;
}


/* Tick in top-right corner of selected time */
.time-slot.active::after,
.date-tab.active::after,
.tab-button.detailed.active::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 13px;
  height: 13px;
  background-image: url("/img/svg/tick.svg");
  background-repeat: no-repeat;
  background-size: contain;
}


 .full-view-h3{
  display: none;
}

.default-h3{
margin-bottom: 20px; color: var(--dark-gray); 

}


 .selector-box {
  border: 1px solid var(--primary-light);
 }
 .selector-box label i {
  margin-right: 8px;
  color: var(--primary-color);
  display: none;
}
.time-slot.active::after {
  z-index: 1; /* SVG renders above CSS tick */
}


/* ========== DATE TIME SELECTION (Collapsible) ========== */
.date-time-selection {
  margin-bottom: 30px;
  animation: slideDown 0.3s ease;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ========== CLEARABLE INPUT ========== */
.input-clearable {
  position: relative;
  display: flex;
  align-items: center;
}

.input-clearable input {
  flex: 1;
  padding-left: 16px !important; /* room for the clear button */
}

.clear-field-btn {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #a0aec0;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
  margin: 0;
margin-bottom: 4px;
}

.clear-field-btn:hover {
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.08);
}

.clear-field-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}


.patient-details-form {
  background: white;
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  border: 1px solid var(--primary-light);
}
.tab-button i{
  display: none;
}

.patient-details-form h3 {
  margin-top: 0;
}


/* ========== PHONE VALIDATION MODAL ========== */
.phone-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

.phone-modal-overlay.hidden {
  display: none;
}

.phone-modal {
  background: white;
  border-radius: 16px;
  padding: 36px 32px 28px;
  max-width: 400px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: modalPop 0.25s ease;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.phone-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(229, 62, 62, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.phone-modal-icon svg {
  width: 26px;
  height: 26px;
  color: #e53e3e;
  stroke: #e53e3e;
}

.phone-modal h4 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a202c;
}

.phone-modal p {
  margin: 0 0 24px;
  font-size: 0.92rem;
  color: #4a5568;
  line-height: 1.5;
}

.phone-modal-btn {
  background: #0056b3;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, transform 0.15s ease;
  min-width: 120px;
}

.phone-modal-btn:hover {
  background: #003d82;
  transform: translateY(-1px);
}

.phone-modal-btn:active {
  transform: translateY(0);
}


/* ========== CONFIRMATION MODAL ICON ========== */
/* The ✓ circle in the modal stays green — it's a success state, correct semantically */


/* ========== SUBMITTING OVERLAY ========== */
.submitting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.submitting-content {
  text-align: center;
  background: white;
  padding: 40px 60px;
  border-radius: 16px;
  box-shadow: var(--box-shadow);
}

.submitting-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #0056b3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.submitting-content p,
.modal-content div h2 {
  font-size: var(--section-header-font);
  font-weight: 600;
  color: var(--dark-gray);
  margin: 0 0 8px;
}

#confirmationDetails p{
  text-align: left;
  margin-bottom: 5px;
}

#confirmationDetails{
  padding: 20px;
}
.bring-reports{
  color: var(--gray);
  line-height: 1.2;
}



.submitting-content small {
  color: var(--gray);
  font-size: var(--p-font);
}

.btn-primary{
  background-color: var(--primary-color);
}
/* ========== BUTTON LOADING STATE ========== */
.btn-primary .btn-loading {
  display: none;
}

.btn-primary.loading .btn-text {
  display: none;
}

.btn-primary.loading .btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* ========== UTILITIES ========== */
.padLt {
  padding-left: 0.7rem;
  margin-bottom: 0.5rem;
}

.textLt {
  text-align: left;
  padding-left: 0.7rem;
}

.bold {
  font-weight: 700;
font-family: var(--carlito) ;
  font-size: var(--p-font);
  line-height: 1;
  text-align: left;
}

.firstLine {
  margin-top: 15px;
}

.gray-title {
  color: #3c3c47;
}

.form-group label {
  font-size: var(--p-font);
  font-weight: 500;
  color: var(--black);
  margin-bottom: 0;
  margin-left: 4px;
}

  .skeleton-tab {
    height: 46px;
  }




/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {

  .skeleton-box {

  display: block;
}

  .skeleton-btn {
    display: block;
  }

  #appointmentForm .form-group input{
    margin-top: 4px;
  }
  .summary-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-change {
    width: 100%;
    justify-content: center;
  }


  .patient-details-form {
    padding: 20px 15px;
  }

  .submitting-content {
    padding: 30px 40px;
    margin: 0 20px;
  }

  .skeleton-tabs {
    flex-direction: row;
    gap: 8px;
  }


  .date-tab {
    width: 73px;
    padding: 0.625rem 0.375rem;
  }

  .date-tab .day-name {
    font-size: 0.6rem;
  }

  .date-tab .day-number {
    font-size: 1.15rem;
  }

  .date-tab .day-month {
    font-size: 0.7rem;
  }

  .date-time-card {
    padding: 16px 14px 12px;
  }
}

@media (max-width: 480px) {


  .nearest-summary {
    padding: 20px;
  }

  .submitting-content {
    padding: 25px 30px;
  }

  .submitting-spinner {
    width: 50px;
    height: 50px;
  }

  .date-tab {
    width: 72px;
    padding: 0.5rem 0.25rem;
  }

  .date-tab .day-name  { font-size: 0.6rem; }
  .date-tab .day-number { font-size: 1rem; }
  .date-tab .day-month  { font-size: 0.7rem; }

  .time-slot {
    padding: 0.825rem 1.1rem 0.625rem;
    font-size: 0.875rem;
  }

  .phone-modal {
    padding: 28px 20px 22px;
  }
}




.nearest-summary {
/*   background: #ffffff;
  color: var(--dark-gray); */
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
}

.summary-label {
  /* color: var(--gray); */
  font-size: var( --sub-header-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-change {
  background: var(--primary-light);
  color: var(--primary-color);
  border: 1.5px solid rgba(0,102,204,0.2);
  border-radius: 8px;
  font-size: var(--p-font);
  font-weight: 700;
  padding: 7px 14px;
}

/* Location tabs: match card style, not full-fill */
.tab-button {
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: var(--tag-font);
  font-weight: 600;
  color: var(--dark-gray);
}

.tab-button.active {
  background: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Patient form: match contact form */
.patient-details-form {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 20px;
}

/* Form labels */


/* Inputs */
.form-group input {
  padding: 10px 12px;
  border: 1.5px solid rgba(0,0,0,0.11);
  border-radius: 8px;
  font-size: var(--tag-font);
  background: #f8f9fb;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Validation error state */
.form-group input.invalid {
  border-color: #d93025;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.08);
}

/* Inline field error message */
.appt-field-error {
  font-size: 11.5px;
  color: #d93025;
  display: block;
  margin-top: 0;
  font-weight: 500;
  margin-left: 3px;
}

/* Submit button */
.btn-primary.btn-large {
  border-radius: 8px;
  font-size: var(--p-font);
  font-weight: 700;
  padding: 12px 20px;
}












/* ----------------------------------- skeleton */

  .demo-note{
    max-width:680px;
    margin:0 auto 28px;
    padding:0 16px;
    color:#4a5568;
    font-size: var(--p-font);
    line-height:1.5;
  }
  .demo-note strong{color:#1a202c;}

  /* ================= SKELETON WRAPPER ================= */
  #appoContainer{
    padding:0 0 50px;
  }

  .loading-skeleton{
    animation:sk-fadeIn .3s ease;
  }

  .sk-wrap{
    max-width:70%;
    margin:0 auto;
    padding:0 16px;
    width:100%;
  }

  /* Shared shimmer surface */
  .sk-shimmer{
    background:linear-gradient(90deg,#eef0f3 25%,#e2e5ea 37%,#eef0f3 63%);
    background-size:400% 100%;
    animation:sk-shimmer 1.6s ease-in-out infinite;
  }

  @keyframes sk-shimmer{
    0%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  @keyframes sk-fadeIn{
    from{opacity:0;} to{opacity:1;}
  }

  @media (prefers-reduced-motion: reduce){
    .sk-shimmer{animation:none; background:#eaecef;}
    .loading-skeleton{animation:none;}
  }

  /* ---- 1. Location tabs ---- */
  .sk-tabs{
    display:flex;
    gap:10px;
    margin-bottom:20px;
  }
  .sk-tab{
    flex:1;
    height:48px;
    border-radius:8px;
    border:1.5px solid rgba(0,0,0,0.06);
  }

  /* ---- 2. Nearest appointment summary card ---- */
  .sk-summary{
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:var(--box-shadow-light);
    border-radius:12px;
    padding:18px;
    margin-bottom:20px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .sk-summary-left{
    flex:1;
    min-width:170px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .sk-summary-label{
    height:11px;
    width:38%;
    border-radius:4px;
  }
  .sk-summary-datetime{
    height:18px;
    width:72%;
    border-radius:6px;
  }
  .sk-summary-btn{
    height:38px;
    width:112px;
    border-radius:8px;
    flex-shrink:0;
  }

  /* ---- 3. Date + time card ---- */
  .sk-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:20px 20px 18px;
    margin-bottom:24px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
  }
  .sk-card-heading{
    height:16px;
    width:42%;
    border-radius:5px;
    margin-bottom:18px;
  }

  .sk-date-tabs{
    display:flex;
    gap:0.5rem;
    overflow-x:auto;
    padding:0.25rem 0;
    -webkit-overflow-scrolling:touch;
  }
  .sk-date-tabs::-webkit-scrollbar{height:4px;}
  .sk-date-tabs::-webkit-scrollbar-thumb{background:#dfe3e8;border-radius:3px;}

  .sk-date-tab{
    width:75px;
    height:76px;
    flex-shrink:0;
    border-radius:0.5rem;
    border:1px solid rgba(0,0,0,0.05);
  }

  .sk-divider{
    border:none;
    border-top:1px solid #e2e8f0;
    margin:16px 0 14px;
  }

  .sk-time-slots{
    display:flex;
    gap:0.75rem;
    overflow-x:auto;
    padding:0.25rem 0;
    -webkit-overflow-scrolling:touch;
  }
  .sk-time-slots::-webkit-scrollbar{height:4px;}
  .sk-time-slots::-webkit-scrollbar-thumb{background:#dfe3e8;border-radius:3px;}

  .sk-time-slot{
    width:92px;
    height:44px;
    flex-shrink:0;
    border-radius:0.5rem;
    border:1px solid rgba(0,0,0,0.05);
  }

  /* ---- 4. Patient details form ---- */
  .sk-form{
    background:#fff;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:var(--box-shadow-light);
    padding:20px;
    margin-bottom:24px;
  }
  .sk-form-heading{
    height:20px;
    width:48%;
    border-radius:6px;
    margin-bottom:22px;
  }
  .sk-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
  .sk-field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .sk-field.full{
    grid-column:1 / -1;
  }
  .sk-label{
    height:11px;
    width:34%;
    border-radius:4px;
  }
  .sk-input{
    height:46px;
    width:100%;
    border-radius:8px;
  }

  /* ---- 5. Submit button ---- */
  .sk-submit{
    height:52px;
    width:100%;
    border-radius:8px;
  }

  /* ================= RESPONSIVE ================= */

  /* Tablet */
  @media (min-width:600px){
    .sk-wrap{max-width:90%;}
    .sk-form-grid{
      grid-template-columns:1fr 1fr;
    }
  }

  /* Desktop */
  @media (min-width:1024px){
    .sk-wrap{max-width:79%;}
    .sk-tab{height:52px;}
    .sk-date-tab{width:80px;height:80px;}
    .sk-time-slot{width:100px;height:46px;}
    .sk-card{padding:24px 24px 20px;}
    .sk-form{padding:26px;}
  }

  /* Small phones */
  @media (max-width:380px){
    .sk-date-tab{width:66px;height:70px;}
    .sk-time-slot{width:82px;height:42px;}
    .sk-summary-btn{width:100%;height:40px;order:3;}
    .sk-summary-left{min-width:100%;}
  }