/* Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
  .dashboard-actions-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  #ep_open_new_post_modal_button {
  place-content: center;
  }
}

/* Mobile */
@media all and (max-width: 767px) {
  #link_history_list .link_history_item {
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  }
  .link_actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  #link_history_list .link_actions .et_pb_button {
  text-align: center;
  }
  #link_history_list {
  max-height: calc(100vh - 414px) !important;
  }
  .dashboard-actions-wrapper {
    gap: 8px !important;
  }

  /* --- General Form Container Mobile Fixes --- */

  #custom_login_form,
  #custom_registration_form,
  #custom_forgot_password_form,
  #custom_reset_password_form {
  padding: 32px !important;
  }

  /* NEW: Styles for Login/Register Header */
  .login-register-header {
    margin-bottom: 16px !important;
  }

  .login-register-header h2 {
    font-size: 18px !important;
  }

  /* --- Form Fields: Labels and Inputs Mobile --- */

  #custom_login_form p,
  #custom_registration_form p,
  #custom_forgot_password_form p,
  #custom_reset_password_form p {
  padding-bottom: 16px !important;
  margin-bottom: 0px !important;
  }

  .login-register-header img {
    max-width: 40px !important;
    margin-bottom: 8px !important;
  }

  #custom_login_form input[type="text"],
  #custom_login_form input[type="password"],
  #custom_registration_form input[type="text"],
  #custom_registration_form input[type="email"],
  #custom_registration_form input[type="url"],
  #custom_registration_form input[type="password"],
  #custom_forgot_password_form input[type="text"],
  #custom_reset_password_form input[type="password"] {
  padding: 8px 12px !important;
  }

  #custom_registration_form p:last-child {
  padding: 0 !important;
  }
}

.dashboard-actions-wrapper {
  display: grid;
  gap: 16px;
}

#link_history_list li:last-child {
border: none;
}

#form_message_container .error {
padding: 10px;
text-align: center;
}

#registration_message_container {
display: flex !important;
justify-content: center !important;
}

#registration_message_container .error {
padding: 20px !important;
width: 480px;
}

#registration_message_container .error ul {
padding: 0;
}

/**
 * Stefan LIEN Plugin Styles
 * Version: 2.2.1
 */
#generate_invite_button {
display: block;
}
#invite_link_field {
color: black;
font-weight: 500;
width: 100%;
padding: 10px;
}
#invite_feedback {
color: #01d1e4;
}

/*
 * Custom Styles for Engagement Platform
 * Dark Theme for Login, Registration, Forgot PW Forms
 * ========================================= */
.create_account_title {
  text-align: center;
  font-size: 24px;
  color: white;
}

.create_acc_subtitle {
  text-align: center;
  font-size: 18px;
  color: white;
  font-weight: 300;
}
.error_message_acc_denied {
  text-align: center;
  font-size: 16px;
  color: red;
}
.acc_denied {
  font-size: 32px;
  color: white;
  text-align: center;
}

/* NEW: Styles for Login/Register Header */
.login-register-header {
  text-align: center;
  margin-bottom: 30px;
}
.login-register-header img {
  max-width: 60px;
  height: auto;
  margin-bottom: 15px;
}
.login-register-header h2 {
  color: white;
  font-size: 24px;
  margin: 0;
}

/* NEW: Style for "Already have an account?" link container */
.form-footer-prompt {
  text-align: center;
  margin-top: 10px;
  color: white;
}
.form-footer-prompt a {
  color: #01d1e4;
  text-decoration: underline;
}

/* NEW: Style for the "Refresh" button in the active invites shortcode */
#refresh-invite-links {
margin-top: 10px;
padding: 5px 10px;
}

/* --- General Form Container --- */

#custom_login_form,
#custom_registration_form,
#custom_forgot_password_form,
#custom_reset_password_form {
max-width: 480px;
margin: 10px auto;
padding: 35px;
background-color: #2a2a2e; /* Dark charcoal background for the form */
border: 1px solid #444;
border-radius: 1px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
color: #e0e0e0;
}

/* Add a heading style for the registration form */
#custom_registration_form h3,
#custom_forgot_password_form h3,
#custom_reset_password_form h3 {
margin-top: 0;
margin-bottom: 25px;
color: #ffffff;
text-align: center;
font-size: 24px;
}
#custom_registration_form > p:first-of-type {
text-align: center;
margin-bottom: 10px;
color: #a0a0a0;
}

/* --- Form Fields: Labels and Inputs --- */

#custom_login_form p,
#custom_registration_form p,
#custom_forgot_password_form p,
#custom_reset_password_form p {
margin-bottom: 10px;
}

#custom_login_form label,
#custom_registration_form label,
#custom_forgot_password_form label,
#custom_reset_password_form label {
text-align: left;
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #b0b0b0;
font-size: 14px;
letter-spacing: 0.5px;
}

#custom_login_form input[type="text"],
#custom_login_form input[type="password"],
#custom_registration_form input[type="text"],
#custom_registration_form input[type="email"],
#custom_registration_form input[type="url"],
#custom_registration_form input[type="password"],
#custom_forgot_password_form input[type="text"],
#custom_reset_password_form input[type="password"] {
width: 100%;
padding: 12px 15px;
background-color: #1e1e21; /* Very dark background for inputs */
border: 1px solid #555;
border-radius: 1px;
color: #e0e0e0;
font-size: 16px;
box-sizing: border-box;
transition:
border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}

/* --- Input Focus State --- */
#custom_login_form input:focus,
#custom_registration_form input:focus,
#custom_forgot_password_form input:focus,
#custom_reset_password_form input:focus {
outline: none;
border-color: #01d1e4;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* NEW: Input Error State */
#custom_registration_form input.error,
#custom_registration_form input.error:focus {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* --- Submit Buttons --- */

#custom_login_form .login-submit input,
#custom_registration_form input[type="submit"],
#custom_forgot_password_form input[type="submit"],
#custom_reset_password_form input[type="submit"] {
width: 100%;
padding: 12px 20px;
background-color: #01d1e4;
color: #ffffff;
border: none;
border-radius: 1px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: background-color 0.2s ease-in-out;
}

/* MODIFIED: Standardized hover state */
#custom_login_form .login-submit input:hover,
#custom_registration_form input[type="submit"]:hover,
#custom_forgot_password_form input[type="submit"]:hover,
#custom_reset_password_form input[type="submit"]:hover,
#ep_submission_modal #new_link_form input[type="submit"]:hover,
#invite_code_wrapper .et_pb_button:hover,
.et_pb_button:hover {
  background-color: #1b7982 !important; /* Lighter blue on hover */
}

/* Style for the disabled button state during AJAX calls */
#custom_login_form input[type="submit"]:disabled,
#custom_registration_form input[type="submit"]:disabled,
#custom_forgot_password_form input[type="submit"]:disabled,
#custom_reset_password_form input[type="submit"]:disabled {
background-color: #555;
cursor: not-allowed;
opacity: 0.6;
}

/* --- Specific Login Form Styles (Remember Me) --- */
#custom_login_form .login-remember {
display: flex;
align-items: center;
font-size: 14px;
color: #b0b0b0;
}

#custom_login_form .login-remember label {
margin-bottom: 0;
font-weight: normal;
}

#custom_login_form .login-remember input {
margin-right: 8px;
width: auto;
}

/* --- Registration, Login, Forgot, Reset Message Containers --- */
#login_message_container,
#registration_message_container,
#forgot_message_container,
#reset_message_container {
padding: 15px;
margin-bottom: 20px;
border-radius: 1px;
font-size: 15px;
}

#login_message_container:empty,
#registration_message_container:empty,
#forgot_message_container:empty,
#reset_message_container:empty {
display: none !important;
}

/* Error Messages */
#login_message_container .error,
#registration_message_container .error,
#forgot_message_container .error,
#reset_message_container .error {
background-color: rgba(220, 53, 69, 0.1);
border: 1px solid #dc3545; /* Red border */
color: #ff8a8a; /* Light red text */
padding: 15px;
}
#login_message_container .error {
width: 480px;
}

#login_message_container {
display: flex;
justify-content: center;
}
#registration_message_container .error ul {
margin: 0;
padding-left: 20px;
}

#registration_message_container .error ul li {
margin-bottom: 5px;
}

/* Success Message */
#login_message_container .success,
#registration_message_container .success,
#forgot_message_container .success,
#reset_message_container .success {
background-color: rgba(40, 167, 69, 0.1);
border: 1px solid #28a745; /* Green border */
color: #73d691; /* Light green text */
text-align: center;
padding: 15px;
}

/*
 * Custom Styles for Engagement Platform
 */

#invite_code_wrapper .et_pb_button,
.et_pb_button {
  width: 100% !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out;
}

/* =================================================================== */
/* MODIFIED: Engagement Popup Modal (Dark Theme) */
/* =================================================================== */
#ep_submission_modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99997;
}

#ep_submission_modal .engagement_modal_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 99998;
}

#ep_submission_modal .engagement_modal_content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #2a2a2e;
padding: 35px;
z-index: 99999;
max-width: 500px;
width: 90%;
border: 1px solid #444;
border-radius: 1px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
color: #e0e0e0;
}

#ep_submission_modal .engagement_modal_content h3 {
margin-top: 0;
margin-bottom: 25px;
color: #ffffff;
text-align: center;
font-size: 24px;
}

#ep_submission_modal .engagement_modal_close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #b0b0b0;
line-height: 1;
padding: 5px;
}

#ep_submission_modal .engagement_modal_close:hover {
color: #ffffff;
}

#ep_submission_modal #new_link_form p {
margin-bottom: 10px;
}

#ep_submission_modal #new_link_form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #b0b0b0;
font-size: 14px;
letter-spacing: 0.5px;
}

#ep_submission_modal #new_link_form input[type="text"],
#ep_submission_modal #new_link_form input[type="url"],
#ep_submission_modal #new_link_form textarea {
width: 100%;
padding: 12px 15px;
background-color: #1e1e21;
border: 1px solid #555;
border-radius: 1px;
color: #e0e0e0;
font-size: 16px;
box-sizing: border-box;
transition:
border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}

#ep_submission_modal #new_link_form textarea {
min-height: 80px;
}

#ep_submission_modal #new_link_form input:focus,
#ep_submission_modal #new_link_form textarea:focus {
outline: none;
border-color: #01d1e4;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

#ep_submission_modal #new_link_form input[type="submit"] {
width: 100%;
padding: 12px 20px;
background-color: #01d1e4;
color: #ffffff;
border: none;
border-radius: 1px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: background-color 0.2s ease-in-out;
}

#ep_submission_modal #new_link_form input[type="submit"]:disabled {
background-color: #555;
cursor: not-allowed;
opacity: 0.6;
}

#ep_submission_modal #form_message_container {
display: none;
padding: 15px;
margin-bottom: 20px;
border-radius: 1px;
font-size: 15px;
}

#ep_submission_modal #form_message_container:has(.success),
#ep_submission_modal #form_message_container:has(.error) {
display: block;
}

#ep_submission_modal #form_message_container .success {
background-color: rgba(40, 167, 69, 0.1);
border: 1px solid #28a745;
color: #73d691;
text-align: center;
}

#ep_submission_modal #form_message_container .error {
background-color: rgba(220, 53, 69, 0.1);
border: 1px solid #dc3545;
color: #ff8a8a;
}

/* =================================================================== */
/* Invite Code Shortcode */
/* =================================================================== */
#invite_code_wrapper {
margin-top: 12px;
}

#invite_code_wrapper a {
display: block;
}

#invite_code_wrapper #invite_link_field {
width: 100%;
padding: 8px;
margin-top: 4px;
border: 1px solid #ccc;
}

/* =================================================================== */
/* MODIFIED: History List Shortcode Styles
 * /** =================================================================== */
 #link_history_list {
 list-style: none;
 padding: 0;
 max-height: calc(100vh - 320px);
 overflow-y: auto;
 overflow-x: hidden;
 padding-right: 1em !important;
 }

 #link_history_list .link_history_item {
 display: flex;
 gap: 20px;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 padding-bottom: 15px;
 border-bottom: 1px solid #727272;
 }

 #link_history_list .link_details {
 color: white;
 min-width: 0;
 }

 #link_history_list .link_details strong {
 font-size: 1.2em;
 display: block;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 color: #01d1e4;
 }

 #link_history_list .link_details p {
 margin: 5px 0 0 0;
 font-size: 0.9em;
 color: #e0e0e0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }

 #link_history_list .link_engagement_metrics {
 flex: 4;
 text-align: right;
 text-wrap: nowrap;
 }

 #link_history_list .link_engagement_metrics p {
 color: #bebebe;
 font-style: italic;
 font-size: 0.9em;
 margin: 0;
 }

 #link_history_list .link_actions {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 gap: 10px;
 flex: 0;
 justify-content: flex-end;
 }
 .link_actions * {
   text-wrap: nowrap;
 }

 /* Override global button styles for buttons inside the list */
 #link_history_list .link_actions .et_pb_button {
 width: auto;
 padding: 8px 16px !important;
 font-size: 14px !important;
 margin: 0 !important;
 line-height: 1.5 !important;
 }

 /* Specific style for the delete button */
 .delete-post-btn {
   background-color: #982c2c !important;
   color: white !important;
 }

 /* MODIFIED: Standardized hover state for delete button */
 .delete-post-btn:hover {
   background-color: #c23939 !important;
 }

 #link_history_list .link_actions .sent_status_text {
 color: #999;
 font-size: 0.9em;
 font-weight: bold;
 text-transform: uppercase;
 padding: 8px 16px;
 text-align: center;
 min-width: 80px;
 border-radius: 1px;
 }

 footer {
   display: none;
 }