/* === GLOBAL === */
.physikit-doctors-appointment-container {
    display: grid;
    gap: 1rem;
    margin: 2rem auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .physikit-doctors-appointment-container {
        grid-template-columns: repeat(6, minmax(0px, 1fr));
    }
}

/* === CARD BASE STYLE (like n-card) === */
.physikit-card {
    background-color: var(--theme-palette-color-8);
    color: var(--theme-text-color);
    /*border: 1px solid var(--theme-border-color);*/
    border-radius: var(--theme-border-radius, 3px);
    padding: 1.5rem;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}


/* === SECTION TITLES === */
.physikit-section-title {
    font-size: 1.5rem;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--theme-text-color);
    transition: color 0.3s;
}

.physikit-section-subtitle {
    font-size: 1rem;
    color: var(--theme-palette-text-subtle, var(--theme-text-color));
    margin-bottom: 1rem;
    transition: color 0.3s;
}

/* === SEARCH SECTION === */
.physikit-search-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* FORM ELEMENTS */
.physikit-search-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.physikit-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.physikit-form-row--horizontal {
    flex-direction: row; /* ← important: override to horizontal */
    align-items: center; /* ← vertical centering */
}

.physikit-location-wrapper {
    display: flex;
    gap: 0.2rem;
}

.physikit-location-wrapper input[type="text"] {
    flex: 1;
}

.physikit-use-location-button {
    display: flex; /* FLEX! */
    align-items: center;
    justify-content: center;
    background-color: var(--theme-button-background-initial-color);
    border: none;
    padding: var(--theme-button-padding, 0 1rem);
    border-radius: var(--theme-border-radius, 3px);
    color: var(--theme-button-text-initial-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.physikit-use-location-button:hover,
.physikit-use-location-button:focus {
    background-color: var(--theme-button-background-hover-color);
    color: var(--theme-button-text-hover-color, var(--theme-button-text-initial-color));
}

.physikit-use-location-button svg {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    stroke: var(--theme-button-text-initial-color); /* Important: inherit theme color */
    transition: stroke 0.3s;
}

.physikit-use-location-button:hover svg,
.physikit-use-location-button:focus svg {
    stroke: var(--theme-button-text-hover-color, var(--theme-button-text-initial-color));
}

.physikit-checkbox-group {
    display: flex;
    flex-wrap: nowrap; /* force single line */
    gap: 12px;
}

.physikit-checkbox-group .physikit-checkbox {
    align-items: center; /* just to be sure everything is nicely aligned */
    margin-bottom: 0 !important; /* ← force no margin */
}

.physikit-checkbox-group--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}


.physikit-form-actions {
    text-align: center;
}

#search-submit {
    width: 100%;
    background-color: var(--theme-button-background-initial-color);
    color: var(--theme-button-text-initial-color);
    border: none;
    padding: var(--theme-button-padding, 0.75rem 1rem);
    border-radius: var(--theme-border-radius, 3px);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#search-submit:hover,
#search-submit:focus {
    background-color: var(--theme-button-background-hover-color);
    color: var(--theme-button-text-hover-color, var(--theme-button-text-initial-color));
}

.physikit-search-form input[type="datetime-local"] {
    border: 1px solid rgb(224, 224, 230);
}

/* === FORM INPUTS & SELECTS === */
.physikit-search-form input[type="text"],
.physikit-search-form select {
    border: 1px solid rgb(224, 224, 230);
    border-radius: var(--theme-border-radius, 3px);
    padding: var(--theme-form-field-padding, 0.5rem 1rem);
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    color: var(--theme-text-color);
    background: var(--theme-input-background, #fff);
}

.physikit-search-form input[type="text"]:hover,
.physikit-search-form input[type="text"]:focus,
.physikit-search-form select:hover,
.physikit-search-form select:focus {
    border-color: var(--theme-form-field-border-focus-color);
    outline: none;
}

#matched-doctors-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doctor-result {
    border: 1px solid rgb(224, 224, 230);
    /*border-radius: var(--theme-border-radius, 8px);*/
    background: var(--theme-palette-color-8, #fff);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s, background-color 0.2s;
}

.doctor-result-datetime {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-top: 0.5rem;
    padding-left: 1rem;
}

.doctor-result-datetime svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    stroke: currentColor;
}

.doctor-result .doctor-result-info {
    padding: 12px 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}

.doctor-result-info-icon .doctor-img {
    width: 70px;
    object-fit: cover;
    border-radius: 50%; /* optional: makes it circular */
    align-items: center;
}

.doctor-result .doctor-result-address {
    padding: 10px 12px;
    background: rgb(250, 250, 252);
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 8px 12px;
}

.doctor-result .doctor-result-address .doctor-result-address-right {
    cursor: pointer;
}

.doctor-result-info-buttons {
    padding: 10px 12px;
    background: rgb(250, 250, 252);
}

.doctor-result:hover {
    border-color: var(--theme-palette-color-1, #30d175);
}

.doctor-result strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-color, #1f2225);
}

.doctor-result div {
    font-size: 14px;
    color: var(--theme-palette-text-subtle, #666);
}

.doctor-result a {
    color: var(--theme-palette-color-1, #30d175);
    text-decoration: none;
}

.doctor-result a:hover {
    text-decoration: underline;
}

.doctor-appointment-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.doctor-result-info-content-button-wrapper {
    margin-left: auto;
    padding-top: 0;
    cursor: pointer;
    white-space: nowrap;
}

.doctor-result-info-content-button {
    background-color: rgba(48, 209, 117, 0.16);
    border-radius: 30px;
    padding: 0.1rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
}


.doctor-result-info-content-button a {
    color: #0e7b17;
    text-decoration: none;
    padding: 0.4rem;
}

.doctor-result-info-content-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
}

.doctor-result-info-content-button:hover {
    background-color: rgba(48, 209, 117, 0.22);
}

.doctor-result-info-content-button a:hover {
    color: #0e7b17;
    text-decoration: none;
}

.icon-text-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.icon-text-pair svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
}

.doctor-appointment-message {
    border: 1px solid var(--theme-border-color, #e0e0e0);
    border-radius: var(--theme-border-radius, 8px);
    padding: 1rem;
    background: var(--theme-palette-color-8, #fff);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.doctor-appointment-message strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-color);
}

.doctor-appointment-message div {
    font-size: 0.9rem;
    color: var(--theme-palette-text-subtle);
}

.doctor-appointment-message a {
    color: var(--theme-palette-color-1);
    text-decoration: none;
}

.doctor-appointment-message a:hover {
    text-decoration: underline;
}

.autocomplete-results {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    background: var(--theme-input-background, #fff);
    border-radius: var(--theme-border-radius, 3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 100%;
    max-width: 300px;
    z-index: 1000;
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--theme-text-color);
    transition: background-color 0.2s;
}

.autocomplete-item:hover {
    background-color: var(--theme-palette-color-7, #f5f5f5);
}

.doctor-result-info-buttons .delete-button {
    /* === Variables === */
    --btn-color: #d03050;
    --btn-color-hover: #de576d;
    --btn-color-pressed: #ab1f3f;
    --btn-border-radius: 3px;
    --btn-border-width: 1px;
    --btn-icon-size: 18px;
    --btn-icon-margin: 6px;

    /* === Layout & Appearance === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
    user-select: none;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;

    /* === Size & Spacing === */
    font-size: var(--theme-button-font-size);
    min-height: var(--theme-button-min-height);
    padding: 5px 20px;
    border-radius: var(--btn-border-radius);

    /* === Colors === */
    color: var(--btn-color);
    background-color: transparent;
    border: var(--btn-border-width) solid var(--btn-color);

    /* === Transitions === */

    /* === State Overrides (optional use in :hover, :active, etc.) === */
    --btn-ripple-color: var(--btn-color);
    --btn-text-color-hover: var(--btn-color-hover);
    --btn-text-color-pressed: var(--btn-color-pressed);
    --btn-border-hover: 1px solid var(--btn-color-hover);
    --btn-border-pressed: 1px solid var(--btn-color-pressed);

    /* === Misc === */
    position: relative;
    outline: none;
    z-index: auto;
    font-weight: 400;
}

.doctor-result-info-buttons .delete-button:hover {
    color: var(--btn-text-color-hover);
    border: var(--btn-border-hover);
}
.doctor-result-info-buttons .delete-button:active {
    color: var(--btn-text-color-pressed);
    border: var(--btn-border-pressed);
}

@media (max-width: 767px) {
  .doctor-result {
    flex-direction: column;
  }

  .doctor-result .doctor-result-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .doctor-result-info-icon .doctor-img {
    width: 60px;
    height: 60px;
  }

  .doctor-result .doctor-result-address {
    flex-direction: column;
    align-items: flex-start;
  }

  .doctor-result-info-content-button-wrapper {
    margin-left: 0;
    margin-top: 1rem;
  }

  .physikit-doctors-appointment-container {
      grid-template-columns: 1fr !important;
      padding: 1rem 0.5rem;
  }

  .physikit-doctors-appointment-container > .physikit-card {
      grid-column: span 6 / span 6 !important;
  }

  .physikit-search-section,
  .physikit-map-section,
  .physikit-results-section,
  .physikit-appointment-section {
      grid-column: span 6 / span 6 !important;
  }

  .physikit-card.physikit-search-section {
      padding: 1rem;
      gap: 1rem;
  }
}

.doctor-result-address-left {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.doctor-result-address-left svg {
    width: 20px;
    height: 20px
}