/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/**
 * Surgeon Directory Public Styles
 *
 * @package    Surgeon_Directory
 * @subpackage Surgeon_Directory/public/css
 */

/* Surgeon Filter Container */
.surgeon-filter-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Filter Form */
.surgeon-filter-form {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 0;
  margin-bottom: 20px;
  box-shadow: none;
  border: 0;
  margin-top: -63px;
}

.fields-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.field-search {
  width: calc(100% - (45% + 228px));
}
.field-taxonomy {
  position: relative;
  width: 25%;
}
.field-state {
  position: relative;
  width: 20%;
}
.field-submit {
  width: 168px;
}

.filter-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

input[type="text"].input-name_search {
  border-radius: 100px;
  border: 1px solid #d1d3e6;
  background: #fff;
  color: #101236;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  padding: 16px 20px;
  height: 60px;
  width: 100%;
}
input[type="text"].input-name_search::placeholder {
  color: #101236;
  opacity: 1;
}

.taxonomy-search-initial,
.state-search-initial {
  position: relative;
  border-radius: 100px;
  border: 1px solid #d1d3e6;
  background: #fff;
  color: #101236;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  padding: 16px 20px;
  cursor: pointer;
  height: 60px;
}
span.k-search-drop-icon {
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='32' viewBox='0 0 12 32' fill='none'%3E%3Cpath d='M5.54038 21.9597C5.79422 22.2135 6.20578 22.2135 6.45962 21.9597L10.5962 17.8231C10.85 17.5693 10.85 17.1577 10.5962 16.9039C10.3424 16.65 9.9308 16.65 9.67696 16.9039L6 20.5808L2.32304 16.9039C2.0692 16.65 1.65765 16.65 1.40381 16.9039C1.14996 17.1577 1.14996 17.5693 1.40381 17.8231L5.54038 21.9597ZM5.35 9.80005L5.35 21.5L6.65 21.5L6.65 9.80005L5.35 9.80005Z' fill='%231B2482'/%3E%3C/svg%3E");
  width: 12px;
  height: 32px;
  right: 25px;
  transform: rotate(0deg);
  transition: 0.3s ease-out;
}
.taxonomy-search-items,
.state-search-items {
  max-height: 600px;
  overflow-x: overlay;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 32px 30px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3);
  gap: 19px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  z-index: 6;
  margin: 8px 0 0 0;
  transform: scale(0.75) translateY(-21px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transform-origin: 50% 0;
}
.taxonomy-search-item,
.state-search-item {
  cursor: pointer;
  color: #101236;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 20px 0;
}
.taxonomy-search-item.placeholder,
.state-search-item.placeholder {
  color: #6c757d;
}
.taxonomy-search-item:last-of-type,
.state-search-item:last-of-type {
  margin: 0;
}
.field-taxonomy.drop-active .k-search-drop-icon,
.field-state.drop-active .k-search-drop-icon {
  transform: rotate(180deg);
}
.field-taxonomy.drop-active .taxonomy-search-items {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}
.field-state.drop-active .state-search-items {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.surgeon-filter-form .form-submit {
  padding: 5px 6px 5px 30px;
  border-radius: 29px;
  border: 1px solid #d1d3e6 !important;
  position: relative;
  display: inline-flex;
  overflow: hidden;
  height: 60px;
  width: 100%;
  background-color: #101236;
  cursor: pointer;
}
.form-submit span.cta-text-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.form-submit .cta-text {
  color: #ffffff;
  text-align: center;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 19.5px;
  font-weight: 400;
  line-height: normal;
  transition: color 0.3s ease-in-out;
  z-index: 2;
}
.form-submit .cta-icon {
  width: 47.45px;
  height: 47.45px;
  display: flex;
}
.form-submit .cta-icon:before {
  content: "";
  width: 47.45px;
  height: 47.45px;
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
  right: 6px;
  transition: transform 0.05s ease-in-out, width 0.25s ease-in-out 0.05s;
  transform: scale(1);
  border-radius: 27.5px;
}
.form-submit .cta-icon svg {
  z-index: 2;
  position: absolute;
  width: 47.45px;
  height: 47.45px;
  transition: 0.3s ease-in-out;
  right: 6px;
}
.form-submit .cta-icon-state {
  transform: translateX(-30px);
  opacity: 0;
}
.form-submit .cta-icon-initial {
  transform: translateX(0px);
  opacity: 1;
}
.form-submit:hover {
  border: 1px solid #101236;
}
.form-submit:hover .cta-icon-state {
  transform: translateX(0px);
  opacity: 1;
}
.form-submit:hover .cta-icon-initial {
  transform: translateX(30px);
  opacity: 0;
}
.form-submit:hover .cta-text {
  color: #101236;
}
.form-submit:hover .cta-icon:before {
  width: calc(100% - 12px);
  transform: scale(1.5);
  transition: width 0.25s ease-in-out, transform 0.05s ease-in-out 0.05s;
}

.filter-group input::placeholder {
  color: #6c757d;
  opacity: 0.7;
}

/* Buttons */
.filter-submit,
.filter-reset {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-submit {
  background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
  color: white;
  margin-right: 15px;
  box-shadow: 0 4px 6px rgba(0, 124, 186, 0.2);
}

.filter-submit:hover {
  background: linear-gradient(135deg, #005a87 0%, #004085 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 124, 186, 0.3);
}

.filter-submit:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.filter-reset {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  border: 2px solid #dee2e6;
}

.filter-reset:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  border-color: #adb5bd;
  transform: translateY(-2px);
}

/* Results Section */
.surgeon-results {
  margin-top: 30px;
}

.surgeon-results-content {
  min-height: 200px;
}

/* Loading and Error States */
.loading {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  background-color: #ffffff;
}

.loading::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border: 3px solid #e9ecef;
  border-top: 3px solid #101236;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.error {
  text-align: center;
  padding: 40px 20px;
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  margin: 20px 0;
}

/* Surgeon Grid */
.surgeon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

/* Surgeon Cards */
.surgeon-card {
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  padding: 20px;
}

.surgeon-left-column {
  flex: 0 0 348px;
  min-width: 348px;
}

.surgeon-right-column {
  flex: 1;
  padding: 40px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.surgeon-item-list-container {
  display: flex;
}
.surgeon-item-list-container .col-1,
.surgeon-item-list-container .col-2 {
  width: 50%;
}
.surgeon-profile-content .surgeon-right-column {
  padding: 20px;
}

.surgeon-card .surgeon-image img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  object-position: top;
}

.surgeon-profile-content .surgeon-image img {
  border-radius: 20px;
  width: 100%;
}

.surgeon-image .placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.surgeon-image-container img.surgeon-image {
  width: 100%;
  max-width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px 20px 20px 20px;
}
.surgeon-organization {
  margin: 8px 0;
  color: #007cba;
  font-size: 15px;
  font-weight: 600;
}

.surgeon-specialties {
  margin: 8px 0;
  color: #6c757d;
  font-size: 14px;
  font-style: italic;
}

.surgeon-excerpt {
  margin: 20px 0;
  color: #495057;
  line-height: 1.6;
  font-size: 15px;
}

.surgeon-link {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.surgeon-link:hover {
  background: linear-gradient(135deg, #005a87 0%, #004085 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 124, 186, 0.3);
}

.surgeon-taxonomy {
  display: flex;
  gap: 10px;
  margin: 0 !important;
}
.taxonomy-item {
  padding: 4px 15px;
  background-color: #71cac8;
  position: relative;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 16px;
  line-height: 2em;
  color: #ffffff;
}
span.taxonomy-item:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 100%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 15px;
  border-color: transparent transparent transparent #71cac8;
}

.surgeon-item-list {
  display: flex;
  gap: 10px;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 16px;
  color: #3e3e49;
}

.is-this-you {
  margin-top: 30px;
}
.is-this-you ul {
  margin: 0 0 20px 20px;
}
.surgeon-info {
  color: #101236;
}

.surgeon-actions {
  margin-top: 20px;
}

.surgeon-name-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}
.surgeon-card .surgeon-org,
.surgeon-card .surgeon-name {
  font-size: 24px;
  font-weight: 500;
  color: #202027;
  line-height: 40px;
  font-family: "Rethink Sans", Sans-serif;
  margin-bottom: 0;
}
.surgeon-name-container .surgeon-taxonomy {
  margin: 0;
}

.surgeon-location {
  display: flex;
  gap: 10px;
}

.surgeon-profile-details,
.surgeon-profile-details .profile-section h3 {
  color: #101236;
}

.surgeon-info .view-profile-button {
  cursor: pointer;
  background-color: #ffffff;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 16px;
  color: #71cac8;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #71cac8;
  border-radius: 5px 5px 5px 5px;
  padding: 15px 50px 15px 50px;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
}

.surgeon-info .view-profile-button:hover {
  background-color: #71cac8;
  color: #ffffff;
}
.surgeon-practice-location {
  font-family: "Rethink Sans", Sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  color: #3e3e49;
}

.surgeon-professional-biography,
.surgeon-professional-biography p {
  font-family: "Rethink Sans", Sans-serif;
  font-size: 16px;
  color: #3e3e49;
  line-height: 1.7;
}

/* Pagination */
.surgeon-pagination {
  text-align: center;
  margin: 40px 0;
  padding: 20px 0;
}

.surgeon-pagination .pagination-link {
  display: inline-block;
  padding: 10px 16px;
  margin: 0 4px;
  border: 1px solid #d1d3e6;
  text-decoration: none;
  color: #202027;
  transition: all 0.3s ease;
  min-width: 40px;
  text-align: center;
  font-family: "Rethink Sans", Sans-serif;
  border-radius: 40px;
}

.surgeon-pagination .pagination-link:hover,
.surgeon-pagination .pagination-link.active {
  background-color: #71cac8;
  color: #ffffff;
  border-color: #71cac8;
}

/* Results Info */
.surgeon-results-info {
  text-align: center;
  color: #202027;
  font-size: 15px;
  margin-top: 30px;
  padding: 15px;
  background: #ffffff;
  font-family: "Rethink Sans", Sans-serif;
}

/* No Results */
.no-results {
  text-align: center;
  padding: 60px 20px;
  background-color: #ffffff;
  font-family: "Rethink Sans", Sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  color: #3e3e49;
}

.no-results p {
  font-size: 18px;
  margin: 0;
}

/* Responsive Design */
@media (min-width: 767px) {
  .in-mobile {
    display: none;
  }
  .in-desktop {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .surgeon-filter-form {
    margin: 0;
  }
}
@media (max-width: 768px) {
  .in-mobile {
    display: flex;
  }
  .in-desktop {
    display: none;
  }
  .surgeon-filter-container {
    padding: 0;
  }
  .surgeon-name-container {
    flex-direction: column;
    margin: 30px 0 0 0;
  }
  .surgeon-item-list-container {
    flex-direction: column;
  }
  .surgeon-item-list-container .col-1,
  .surgeon-item-list-container .col-2 {
    width: 100%;
  }
  .surgeon-right-column {
    padding: 15px 0 15px 0;
    position: unset;
  }
  .surgeon-card .surgeon-image img {
    width: 90px;
    height: 120px;
  }
  .surgeon-card .surgeon-name {
    font-size: 20px !important;
  }

  .fields-form {
    flex-direction: column;
    gap: 15px;
  }
  .field-search,
  .field-taxonomy,
  .field-state,
  .field-submit {
    width: 100%;
    margin: 0;
  }

  .surgeon-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .surgeon-card {
    flex-direction: column;
    position: relative;
  }

  .surgeon-left-column {
    flex: none;
    min-width: auto;
    display: flex;
    gap: 15px;
  }

  .filter-submit,
  .filter-reset {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .surgeon-claim-status .profile-claimed,
  .surgeon-claim-status .claim-pending {
    font-size: 14px;
  }
  .surgeon-pagination .pagination-link {
    margin: 4px;
  }
}

@media (max-width: 480px) {
  .surgeon-filter-form {
    padding: 15px;
  }

  .surgeon-name {
    font-size: 18px;
  }

  .pagination-link {
    padding: 8px 12px;
    margin: 2px;
    font-size: 14px;
  }
}

/* Surgeon Profile Styles */
.surgeon-profile-content,
.surgeon-profile-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.profile-field label {
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0 0 0;
  display: block;
}

.surgeon-profile-header .profile-section h3 {
  font-weight: 500;
  margin: 30px 0 30px 0;
}
.surgeon-profile-header h2.surgeon-name {
  margin: 0;
}

/* Claim Button Styles */
.surgeon-actions .claim-profile-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #71cac8;
  color: #101236;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 6px rgb(16 18 54 / 20%);
  cursor: pointer;
}
.surgeon-actions .claim-profile-button:hover {
  transform: translateY(-2px);
  color: #101236;
  border: 0;
}

.surgeon-claim-status {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}

.surgeon-claim-status .profile-claimed {
  display: inline-block;
  padding: 5px 20px;
  background-color: #2ecc71;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  cursor: default;
  border: none;
  letter-spacing: 0.5px;
  line-height: 1.4;
  font-family: "Rethink Sans", Sans-serif;
}

.surgeon-claim-status .claim-pending {
  display: inline-block;
  padding: 5px 20px;
  background-color: #ffb300;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  cursor: default;
  border: none;
  letter-spacing: 0.5px;
  line-height: 1.4;
  font-family: "Rethink Sans", Sans-serif;
}

.surgeon-actions .claim-pending {
  padding: 16px;
  background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
  color: #212529;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: default;
  box-shadow: 0 4px 6px rgba(255, 193, 7, 0.2);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  display: inline-block;
  padding: 12px 24px;
}
/* Claim Modal Styles */
.claim-modal {
  display: none;
  position: fixed;
  z-index: 9996;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.claim-modal .claim-modal-content h2,
.edit-modal .edit-modal-content h2 {
  color: #101236;
  font-size: 32px;
  text-align: center;
}

.claim-modal .claim-modal-content h3,
.edit-modal .edit-modal-content h3 {
  color: #101236;
  font-size: 24px;
  line-height: 1.4;
}

.claim-modal .claim-modal-content,
.edit-modal .edit-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.claim-modal .claim-modal-close,
.edit-modal .edit-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 15px;
}

.claim-modal .claim-modal-close:hover,
.claim-modal .claim-modal-close:focus {
  color: #000;
  text-decoration: none;
}

.claim-modal .claim-notice {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  color: #856404;
  font-size: 14px;
  line-height: 1.7;
}

.claim-modal .surgeon-claim-form .form-group {
  margin-bottom: 20px;
}

.claim-modal .surgeon-claim-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #101236;
  font-size: 14px;
}

.claim-modal .surgeon-claim-form input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: white;
  color: #101236;
}

.claim-modal .surgeon-claim-form input:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.claim-modal .surgeon-claim-form small {
  display: block;
  margin-top: 5px;
  color: #101236;
  font-size: 12px;
}

.claim-modal .claim-submit,
.claim-modal .claim-cancel {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 10px;
}

.claim-modal .claim-submit {
  background-color: #71cac8;
  color: #101236;
  box-shadow: 0 4px 6px rgb(16 18 54 / 20%);
  border: 0;
}

.claim-modal .claim-submit:hover,
.claim-modal .claim-submit:focus {
  color: #101236;
  transform: translateY(-2px);
  border: 0;
}

.claim-modal .claim-cancel {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #101236;
  border: 0;
}

.claim-modal .claim-cancel:hover,
.claim-modal .claim-cancel:focus {
  transform: translateY(-2px);
  border: 0;
  color: #101236;
}

.claim-modal .surgeon-claim-form .ssl-notice {
  font-size: 14px;
  color: #101236;
  font-weight: 600;
  margin: 0;
}

.claim-message-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 20px;
  border-radius: 8px;
  color: #101236;
  text-align: center;
  z-index: 10000;
  display: none;
  max-width: 400px;
  width: 100%;
  background-color: #fefefe;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.claim-message-modal .claim-message-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 0;
}
.claim-message-modal .claim-message-close:hover {
  color: #000;
  text-decoration: none;
}
/* Edit Profile Button Styles */
.surgeon-edit-profile-section {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}

.claim-profile-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Edit Modal Styles */
.edit-modal {
  display: none;
  position: fixed;
  z-index: 9997;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.edit-modal-content {
  background-color: #fefefe;
  margin: 2% auto;
  padding: 30px;
  border-radius: 12px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.edit-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 15px;
  transition: color 0.3s ease;
}

.edit-modal-close:hover,
.edit-modal-close:focus {
  color: #000;
  text-decoration: none;
}

.edit-notice {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  color: #856404;
  font-size: 14px;
  line-height: 1.7;
}

/* Edit Step Styles */
.edit-step {
  display: none;
}

.edit-step.active {
  display: block;
}

.edit-step h3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #101236;
}

.edit-step h4 {
  color: #34495e;
  margin: 25px 0 15px 0;
  font-size: 18px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 4px solid #101236;
}

/* Form Section Styles */
.form-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #e9ecef;
}

.form-section:last-child {
  margin-bottom: 0;
}

/* Form Group Styles */
.surgeon-edit-form .form-group,
.verification-form .form-group {
  margin-bottom: 20px;
}

/* Name Fields Row - Responsive Layout */
.name-fields-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.name-fields-row .name-field {
  flex: 1;
  margin-bottom: 0;
}

/* Mobile responsive - stack fields vertically */
@media (max-width: 768px) {
  .name-fields-row {
    flex-direction: column;
    gap: 0;
  }

  .name-fields-row .name-field {
    margin-bottom: 20px;
  }

  .name-fields-row .name-field:last-child {
    margin-bottom: 0;
  }
}

.surgeon-edit-form label,
.verification-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #101236;
  font-size: 14px;
}

.surgeon-edit-form input[type="text"],
.surgeon-edit-form input[type="email"],
.surgeon-edit-form input[type="url"],
.surgeon-edit-form select,
.surgeon-edit-form textarea,
.verification-form input[type="text"],
.verification-form input[type="email"] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.surgeon-edit-form input:focus,
.surgeon-edit-form select:focus,
.surgeon-edit-form textarea:focus,
.verification-form input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.surgeon-edit-form select[multiple] {
  height: 120px;
}

.surgeon-edit-form textarea {
  resize: vertical;
  min-height: 80px;
}

.surgeon-edit-form small,
.verification-form small {
  display: block;
  margin-top: 5px;
  color: #101236;
  font-size: 12px;
}

/* Button Styles */
.edit-modal .verify-submit,
.edit-modal .edit-submit {
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 10px;
  background-color: #71cac8;
  color: #101236;
  box-shadow: 0 4px 6px rgb(16 18 54 / 20%);
  border: 0;
}

.edit-modal .verify-submit:hover,
.edit-modal .verify-submit:focus,
.edit-modal .edit-submit:hover,
.edit-modal .edit-submit:focus {
  color: #101236;
  transform: translateY(-2px);
  border: 0;
}

.edit-modal .edit-cancel {
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 10px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #101236;
  border: 0;
}

.edit-modal .edit-cancel:hover,
.edit-modal .edit-cancel:focus {
  transform: translateY(-2px);
  border: 0;
  color: #101236;
}

.surgeon-edit-form .edit-submit {
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 10px;
  background-color: #71cac8;
  color: #101236;
  box-shadow: 0 4px 6px rgb(16 18 54 / 20%);
  border: 0;
  line-height: 20px;
}

.surgeon-edit-form .edit-submit:hover,
.surgeon-edit-form .edit-submit:focus {
  transform: translateY(-2px);
  border: 0;
  color: #101236;
}

.surgeon-edit-form .edit-cancel {
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 10px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #101236;
  border: 0;
  line-height: 20px;
}

.surgeon-edit-form .edit-cancel:hover,
.surgeon-edit-form .edit-cancel:focus {
  transform: translateY(-2px);
  border: 0;
  color: #101236;
}

/* Message Styles */
.edit-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 6px;
  font-weight: 600;
  z-index: 9999;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.edit-message.success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border-left: 4px solid #1e7e34;
}

.edit-message.error {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  border-left: 4px solid #a71e2a;
}

/* Modal Open Body Style */
body.modal-open {
  overflow: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
  .edit-modal-content {
    margin: 5% auto;
    width: 95%;
    padding: 20px;
    max-height: 95vh;
  }

  .video-entry {
    flex-direction: column;
    gap: 10px;
  }

  .video-entry input[type="text"],
  .video-entry input[type="url"] {
    flex: none;
    width: 100%;
  }

  .form-section {
    padding: 15px;
  }

  .edit-step h3 {
    font-size: 20px;
  }

  .edit-step h4 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .edit-modal-content {
    margin: 10% auto;
    padding: 15px;
  }

  .verify-submit,
  .edit-submit,
  .edit-cancel {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;
  }

  .edit-message {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

/* Email Sent Message Styles */
.email-sent-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  max-width: 500px;
  width: 90%;
  text-align: center;
}

.email-sent-message h3 {
  color: #28a745;
  margin-bottom: 20px;
  font-size: 24px;
}

.email-sent-message p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.email-sent-message ul {
  text-align: left;
  margin: 15px 0;
  padding-left: 20px;
}

.email-sent-message li {
  margin-bottom: 8px;
  color: #6c757d;
}

.close-message {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 15px;
}

.close-message:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  transform: translateY(-1px);
}

.claim-message.success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.claim-message.error {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

/* Edit Profile Page Styles */
.edit-profile-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px 0;
}

.edit-profile-container {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.edit-profile-header {
  background-color: #101236;
  color: white;
  padding: 30px;
  text-align: center;
}

.edit-profile-header h1 {
  margin: 0 0 15px 0;
  font-size: 32px;
  font-weight: 700;
}

.edit-profile-header .edit-notice {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.edit-profile-header .edit-notice strong {
  color: #ff0000;
}
.surgeon-edit-form {
  padding: 20px;
}
.surgeon-edit-form h4 {
  color: #101236;
}
.surgeon-edit-form p.ssl-notice {
  font-size: 18px;
  color: #000000;
  font-weight: 500;
  margin: 0 0 20px 0;
}

.edit-profile-notice {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 25px;
  color: #0d47a1;
  font-size: 14px;
  line-height: 1.6;
}

.edit-profile-notice a {
  color: #1976d2;
  text-decoration: underline;
  font-weight: 600;
}

.edit-profile-notice a:hover {
  color: #0d47a1;
}

/* Responsive Design for Edit Profile Page */
@media (max-width: 768px) {
  .edit-profile-page {
    padding: 10px 0;
  }

  .edit-profile-container {
    margin: 0 10px;
    border-radius: 8px;
  }

  .edit-profile-header {
    padding: 20px;
  }

  .edit-profile-header h1 {
    font-size: 24px;
  }

  .email-sent-message {
    width: 95%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .edit-profile-header {
    padding: 15px;
  }

  .edit-profile-header h1 {
    font-size: 20px;
  }

  .email-sent-message {
    padding: 15px;
  }

  .email-sent-message h3 {
    font-size: 20px;
  }
}

/* Email Confirmation Step */
#email-confirmation-step {
  text-align: center;
  padding: 20px 0;
}

.email-confirmation-message {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 1.7;
}

.email-confirmation-message p {
  margin-bottom: 15px;
  color: #495057;
}

.email-confirmation-message ul {
  text-align: left;
  margin: 15px 0;
  padding-left: 20px;
}

.email-confirmation-message li {
  margin-bottom: 8px;
  color: #6c757d;
}

/* Alert Messages */
.alert {
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-left: 4px solid;
  position: relative;
  z-index: 1000;
}

.alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-left-color: #28a745;
  color: #155724;
}

.alert-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-left-color: #dc3545;
  color: #721c24;
}

/* Ensure alerts are visible in different contexts */
.edit-profile-container .alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  padding: 20px;
  text-align: center;
  font-size: 24px;
  animation: none;
}

.edit-modal-content .alert {
  margin-bottom: 20px;
  animation: slideDown 0.3s ease-out;
}

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

/* Profile Content Display */

/* Textarea Styling */
textarea {
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.surgeon-actions-section {
  margin-bottom: 20px;
}

.videos-available-text {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #101236;
}

.surgeon-action-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.surgeon-actions-section .action-button {
  display: inline-block;
  margin: 5px 10px 5px 0;
  padding: 12px 24px;
  background-color: #71cac8;
  color: #101236;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.surgeon-actions-section .action-button:hover {
  background-color: #71cac8;
  color: #101236;
  text-decoration: none;
}

/* Location Fields Row in Edit Form */
.location-fields-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.location-field {
  flex: 1;
  min-width: 200px;
}

/* WYSIWYG Editor Fields in Edit Form */
.form-section .wp-editor-container {
  margin-bottom: 10px;
}

/* Profile Section Spacing */
.surgeon-profile-details .profile-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.surgeon-profile-details .profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.surgeon-profile-details .profile-section h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.surgeon-profile-details .profile-field {
  margin-bottom: 15px;
}

.surgeon-profile-details .profile-field:last-child {
  margin-bottom: 0;
}

.surgeon-profile-details .profile-field label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 5px;
  display: block;
}

.surgeon-profile-details .profile-content {
  font-size: 18px;
  line-height: 1.6;
}

/* CSurgeries Account Setup Section */
.csurgeries-account-section {
  background: linear-gradient(135deg, #e8f4f8 0%, #d4ebf5 100%);
  border: 2px solid #71cac8;
  border-radius: 12px;
  padding: 25px;
  margin: 30px 0;
  position: relative;
}

.csurgeries-account-section h4 {
  color: #101236;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.csurgeries-account-section h4:before {
  content: "🔐";
  font-size: 24px;
}

.account-setup-notice {
  background: #ffffff;
  border-left: 4px solid #71cac8;
  padding: 15px 20px;
  margin-bottom: 25px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.account-setup-notice p {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
  line-height: 1.5;
}

.account-setup-notice p:first-child {
  font-weight: 700;
  color: #101236;
  margin-bottom: 8px;
}

.csurgeries-account-section .form-group {
  margin-bottom: 20px;
}

.csurgeries-account-section .form-group label {
  color: #101236;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
}

.csurgeries-account-section input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.csurgeries-account-section input[type="password"]:focus {
  border-color: #71cac8;
  box-shadow: 0 0 0 3px rgba(113, 202, 200, 0.2);
  outline: none;
}

.csurgeries-account-section .form-group small {
  display: block;
  color: #6c757d;
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.4;
}

.account-info {
  background: #ffffff;
  border: 1px solid #dee2e6;
  padding: 20px;
  border-radius: 8px;
  margin-top: 25px;
}

.account-info p {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 16px;
}

.account-info ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.account-info li {
  color: #555;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

.account-info li:before {
  content: "✓";
  color: #28a745;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.account-info strong {
  color: #101236;
  font-weight: 600;
}

.account-info a {
  color: #007cba;
  text-decoration: none;
  font-weight: 500;
}

.account-info a:hover {
  text-decoration: underline;
}

/* Password Validation Styles */
.password-match-warning,
.password-strength-warning {
  color: #dc3545 !important;
  font-size: 14px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
}

.password-match-success,
.password-strength-success {
  color: #28a745 !important;
  font-size: 14px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
}

.password-match-warning span:first-child,
.password-strength-warning span:first-child,
.password-match-success span:first-child,
.password-strength-success span:first-child {
  margin-right: 5px;
  font-size: 14px;
}

/* Password field border styles */
#account-password.error,
#account-password-confirm.error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

#account-password.success,
#account-password-confirm.success {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.1rem rgba(40, 167, 69, 0.25);
}

/* Animation for validation messages */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments for password validation */
@media (max-width: 768px) {
  .password-match-warning,
  .password-strength-warning,
  .password-match-success,
  .password-strength-success {
    font-size: 12px;
  }
}

/* Enhanced alert/message styles */
.alert {
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease-out;
}

.alert-success {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border: 2px solid #28a745;
  color: #155724;
}

.alert-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border: 2px solid #dc3545;
  color: #721c24;
}

/* Special styling for login success messages */
.alert-success:contains("🎉") {
  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
  border: 2px solid #28a745;
  font-weight: 600;
  text-align: center;
}

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

/* Disabled submit button styles */
.edit-submit.disabled-by-password {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 0.65;
  pointer-events: none;
}

.edit-submit.disabled-by-password:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Visual feedback for disabled state */
.edit-submit:disabled {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 0.65;
}

.edit-submit:disabled:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Checkbox styling for claim form */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  margin-bottom: 10px;
}
.claim-modal .surgeon-claim-form .checkbox-label {
  font-weight: 400;
}
.claim-modal .surgeon-claim-form .checkbox-label a {
  color: #71cac8;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
}