/* assets/css/components/modal.css */

:root {
  --modal-backdrop-color: rgba(16, 16, 16, 0.6); /* paint_44:1795 */
  --modal-content-bg: #ffffff; /* paint_1:441 */
  --modal-border-radius-pc: 24px; /* common */
  --modal-border-radius-m: 24px; /* common */
  --modal-content-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Default, design may not specify */

  --modal-header-border-color: #dee2e6; /* Default, adjust if needed */
  --modal-title-color-pc: #101010; /* paint_1:523 */
  --modal-title-font-pc: "Alibaba Sans SEA", sans-serif;
  --modal-title-fontsize-pc: 24px;
  --modal-title-fontweight-pc: 500; /* Medium */

  --modal-title-color-m: #101010; /* paint_1:523 */
  --modal-title-font-m: "Alibaba Sans SEA", sans-serif;
  --modal-title-fontsize-m: 40px;
  --modal-title-fontweight-m: 500; /* Medium */

  --modal-close-button-color: #999999; /* paint_44:1286 */
  --modal-close-button-hover-color: #666666;

  --modal-body-text-color: #333333; /* paint_1:502 */
  --modal-footer-border-color: #dee2e6; /* Default, adjust if needed */

  /* Alert/Confirm Modal Specific */
  --alert-modal-width-pc: 440px;
  --alert-modal-height-pc: auto; /* Let content define height, was 304px */
  --alert-modal-width-m: 674px;
  --alert-modal-height-m: auto; /* Was 430px */

  --alert-content-item-bg-pc: #f4f4f4; /* paint_44:1249 */
  --alert-content-item-border-pc: #e5e5e5; /* paint_1:0202 */
  --alert-content-item-radius-pc: 8px;
  --alert-content-text-color-pc: #333333; /* paint_1:502 */
  --alert-content-font-pc: "Alibaba Sans SEA", sans-serif;
  --alert-content-fontsize-pc: 18px;

  --alert-content-item-bg-m: #f4f4f4; /* paint_44:1249 */
  --alert-content-item-border-m: #e5e5e5; /* paint_1:0202 */
  --alert-content-item-radius-m: 16px;
  --alert-content-text-color-m: #333333; /* paint_1:502 */
  --alert-content-font-m: "Alibaba Sans SEA", sans-serif;
  --alert-content-fontsize-m: 28px;

  --alert-icon-color: #1a73e8; /* paint_79:4396 */

  --alert-button-bg-pc: #1a73e8; /* paint_44:1394 */
  --alert-button-text-color-pc: #ffffff; /* paint_1:441 */
  --alert-button-radius-pc: 8px;
  --alert-button-font-pc: "Alibaba Sans SEA", sans-serif;
  --alert-button-fontsize-pc: 18px;

  --alert-button-bg-m: #1a73e8; /* paint_44:1394 */
  --alert-button-text-color-m: #ffffff; /* paint_1:441 */
  --alert-button-radius-m: 16px;
  --alert-button-font-m: "Source Han Sans", sans-serif;
  --alert-button-fontsize-m: 28px;

  /* Login Modal Specific */
  --login-modal-width-pc: 440px;
  --login-modal-height-pc: auto; /* Was 504px */
  --login-modal-width-m: 674px;
  --login-modal-height-m: auto; /* Was 802px */

  --login-input-bg-pc: #f5f5f5; /* paint_44:1482 */
  --login-input-radius-pc: 8px;
  --login-input-placeholder-color-pc: #999999; /* paint_44:1286 */
  --login-input-text-color-pc: #333333; /* paint_1:502 */
  --login-input-font-pc: "Alibaba Sans SEA", sans-serif;
  --login-input-fontsize-pc: 18px;

  --login-input-bg-m: #f5f5f5; /* paint_44:1482 */
  --login-input-radius-m: 16px;
  --login-input-placeholder-color-m: #999999; /* paint_44:1286 */
  --login-input-text-color-m: #333333; /* paint_1:502 */
  --login-input-font-m: "Alibaba Sans SEA", sans-serif;
  --login-input-fontsize-m: 32px;

  --login-button-bg-pc: #1a73e8; /* paint_44:1394 */
  --login-button-text-color-pc: #ffffff;
  --login-button-radius-pc: 8px;
  --login-button-font-pc: "Alibaba Sans SEA", sans-serif;
  --login-button-fontsize-pc: 18px;

  --login-button-bg-m: #1a73e8; /* paint_44:1394 */
  --login-button-text-color-m: #ffffff;
  --login-button-radius-m: 16px;
  --login-button-font-m: "Source Han Sans", sans-serif;
  --login-button-fontsize-m: 32px;

  --login-divider-text-color-pc: #afafaf; /* paint_44:1512 */
  --login-divider-text-font-pc: "Roboto-Regular", sans-serif;
  --login-divider-text-fontsize-pc: 16px;
  --login-divider-line-color-pc: #d8d8d8; /* paint_1:452 */

  --login-divider-text-color-m: #afafaf; /* paint_44:1512 */
  --login-divider-text-font-m: "Roboto-Regular", sans-serif;
  --login-divider-text-fontsize-m: 28px;
  --login-divider-line-color-m: #d8d8d8; /* paint_1:452 */

  --login-social-btn-bg-google-pc: #ececec; /* paint_44:1501 */
  --login-social-btn-bg-facebook-pc: #1b77f2; /* paint_44:1536 */
  --login-social-text-color-pc: #666666; /* paint_1:599 */
  --login-social-text-font-pc: "Roboto-Regular", sans-serif;
  --login-social-text-fontsize-pc: 16px;

  --login-social-btn-bg-google-m: #ececec; /* paint_44:1501 */
  --login-social-btn-bg-facebook-m: #1b77f2; /* paint_44:1536 */
  --login-social-text-color-m: #666666; /* paint_1:599 */
  --login-social-text-font-m: "Roboto-Regular", sans-serif;
  --login-social-text-fontsize-m: 28px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050; /* Ensure it's above other content */
  overflow-x: hidden;
  overflow-y: auto; /* Allow scrolling for long modals */
  outline: 0;
}

.modal.active {
  display: flex; /* Use flex to center content */
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-backdrop-color);
}

.modal-content {
  position: relative;
  background-color: var(--modal-content-bg);
  border-radius: var(--modal-border-radius-pc);
  box-shadow: var(--modal-content-box-shadow);
  margin: 20px; /* Margin for smaller screens */
  max-width: 500px; /* Default max-width, overridden by specific modal types */
  width: calc(100% - 40px); /* Ensure padding on sides */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px); /* Max height with padding */
  z-index: 1051; /* Above overlay */
  text-align: center; /* Default for titles and some content */
}

.modal-header {
  display: flex;
  align-items: center; /* Align items to the center */
  justify-content: center; /* Center title by default */
  padding: 24px 24px 16px; /* Adjusted padding */
  border-bottom: none; /* Design doesn't show header border typically */
  position: relative; /* For absolute positioning of close button */
}

.modal-title {
  margin: 0;
  font-family: var(--modal-title-font-pc);
  font-size: var(--modal-title-fontsize-pc);
  font-weight: var(--modal-title-fontweight-pc);
  color: var(--modal-title-color-pc);
  line-height: 1.2;
  flex-grow: 1; /* Allow title to take space */
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 24px; /* Adjust as per design */
  right: 24px; /* Adjust as per design */
  padding: 0;
  background-color: transparent;
  border: 0;
  font-size: 20px; /* Adjust for icon size */
  line-height: 1;
  color: var(--modal-close-button-color);
  opacity: 0.8;
  cursor: pointer;
  width: 24px; /* Ensure clickable area */
  height: 24px;
}

.modal-close:hover {
  color: var(--modal-close-button-hover-color);
  opacity: 1;
}

.modal-close svg {
  display: block; /* Removes extra space below SVG */
  width: 100%;
  height: 100%;
}

.modal-body {
  position: relative;
  flex: 1 1 auto; /* Allow body to grow and shrink */
  padding: 16px 30px; /* PC padding, adjust for mobile */
  overflow-y: auto; /* Scroll for long content */
  color: var(--modal-body-text-color);
  text-align: left; /* Default for body content */
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Align items vertically */
  justify-content: center; /* Center buttons by default */
  padding: 16px 30px 30px; /* PC padding, adjust for mobile */
  border-top: none; /* Design usually doesn't show footer border */
}

.modal-footer > :not(:last-child) {
  margin-right: 12px; /* Space between buttons */
}
.modal-footer .btn {
  /* General button styling for modals */
  min-width: 120px;
}

/* --- Alert Modal Styles --- */
.modal-alert .modal-content {
  max-width: var(--alert-modal-width-pc);
  min-height: var(--alert-modal-height-pc); /* Use min-height */
}
.modal-alert .modal-title {
  padding-top: 32px; /* 56px (design title y) - 24px (header padding) */
}

.modal-alert .modal-body {
  padding-top: 24px; /* Space between title and first item */
  padding-bottom: 24px;
  text-align: center;
}

.modal-alert .alert-item {
  background-color: #fff;
  border: 1px solid var(--alert-content-item-border-pc);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  text-align: left;
  font-family: var(--alert-content-font-pc);
  font-size: var(--alert-content-fontsize-pc);
  color: var(--alert-content-text-color-pc);
}
.modal-alert .alert-item svg {
  width: 24px;
  height: 24px;
  fill: var(--alert-icon-color);
  margin-right: 12px;
  flex-shrink: 0;
}
.modal-alert .modal-footer .btn {
  background-color: var(--alert-button-bg-pc);
  color: var(--alert-button-text-color-pc);
  border-radius: var(--alert-button-radius-pc);
  font-family: var(--alert-button-font-pc);
  font-size: var(--alert-button-fontsize-pc);
  padding: 12px 20px;
  border: none;
  width: 100%; /* Full width button in alert footer */
  max-width: 380px;
  line-height: 1.5;
}

/* --- Login Modal Styles --- */
.modal-login .modal-content {
  max-width: var(--login-modal-width-pc);
  min-height: var(--login-modal-height-pc);
}
.modal-login .modal-title {
  padding-top: 10px; /* 56px (design title y) - 24px (header padding) */
}
.modal-login .modal-body {
  padding-top: 24px; /* Space between title and first input */
}
.modal-login .form-group {
  margin-bottom: 20px;
}
.modal-login .form-control {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--login-input-bg-pc);
  border: 1px solid var(--login-input-bg-pc); /* Or a light border like #E5E5E5 */
  border-radius: var(--login-input-radius-pc);
  font-family: var(--login-input-font-pc);
  font-size: var(--login-input-fontsize-pc);
  color: var(--login-input-text-color-pc);
  line-height: 1.5;
}
.modal-login .form-control::placeholder {
  color: var(--login-input-placeholder-color-pc);
  opacity: 1;
}
.modal-login .btn-login {
  background-color: var(--login-button-bg-pc);
  color: var(--login-button-text-color-pc);
  border-radius: var(--login-button-radius-pc);
  font-family: var(--login-button-font-pc);
  font-size: var(--login-button-fontsize-pc);
  padding: 12px 20px;
  border: none;
  width: 100%;
  line-height: 1.5;
}
.modal-login .login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 32px 0; /* Matches design 336y - 256y (btn bottom) - 48h (btn) */
  color: var(--login-divider-text-color-pc);
  font-family: var(--login-divider-text-font-pc);
  font-size: var(--login-divider-text-fontsize-pc);
}
.modal-login .login-divider::before,
.modal-login .login-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--login-divider-line-color-pc);
}
.modal-login .login-divider:not(:empty)::before {
  margin-right: 0.5em;
}
.modal-login .login-divider:not(:empty)::after {
  margin-left: 0.5em;
}
.modal-login .social-login-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Spacing between social buttons */
  margin-bottom: 16px; /* Space before footer/final text */
}
.modal-login .social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--login-social-text-color-pc);
  font-family: var(--login-social-text-font-pc);
  font-size: var(--login-social-text-fontsize-pc);
}
.modal-login .social-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background-color: #f0f0f0; /* Fallback */
}
.modal-login .social-btn-icon svg {
  width: 24px;
  height: 24px;
  fill: white; /* Default for icons on colored bg */
}
.modal-login .social-btn-google .social-btn-icon {
  background-color: var(--login-social-btn-bg-google-pc);
}
/* Google icon from DSL is complex, use a simpler placeholder or a proper SVG */
.modal-login .social-btn-google .social-btn-icon svg path {
  fill: #db4437; /* Example, actual Google logo has multiple colors */
}
.modal-login .social-btn-facebook .social-btn-icon {
  background-color: var(--login-social-btn-bg-facebook-pc);
}
.modal-login .social-btn-facebook .social-btn-icon svg path {
  fill: #ffffff;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  /* Tablet and Mobile */
  .modal-content {
    border-radius: var(--modal-border-radius-m);
    margin: 10px; /* Smaller margin for mobile */
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
  }
  .modal-header {
    padding: 20px 20px 12px;
  }
  .modal-title {
    font-family: var(--modal-title-font-m);
    font-size: var(--modal-title-fontsize-m);
    font-weight: var(--modal-title-fontweight-m);
    color: var(--modal-title-color-m);
  }
  .modal-close {
    top: 20px;
    right: 20px;
    width: 26px; /* Larger tap target for mobile */
    height: 26px;
    font-size: 24px;
  }
  .modal-body {
    padding: 12px 20px;
    font-size: 16px; /* General body text size for mobile */
  }
  .modal-footer {
    padding: 12px 20px 20px;
    justify-content: center; /* Center buttons */
  }
  .modal-footer .btn {
    width: 100%; /* Full width buttons in footer on mobile */
    margin-bottom: 10px;
    padding: 12px;
    font-size: 18px;
  }
  .modal-footer > :not(:last-child) {
    margin-right: 0;
  }
  .modal-footer > :last-child {
    margin-bottom: 0;
  }
}

/* Specific modal sizes (can be used with .modal-lg, .modal-sm or type-specific classes) */
.modal-content.modal-lg {
  /* If you need a larger one than default */
  max-width: 800px;
}

.modal-content.modal-sm {
  /* If you need a smaller one than type-specific */
  max-width: 300px;
}

@media (max-width: 480px) {
  /* Alert Modal Mobile */
  .modal-alert .modal-content {
    max-width: var(--alert-modal-width-m);
    min-height: var(--alert-modal-height-m);
  }
  .modal-alert .modal-body {
    padding: 12px;
  }
  .modal-alert .modal-title,
  .modal-login .modal-title {
    padding-top: 10px;
    font-size: 20px;
  }
  .modal-alert .alert-item {
    background-color: #fff;
    border: 1px solid var(--alert-content-item-border-m);
    border-radius: 8px;
    font-size: 14px;
    padding: 10px 16px;
    font-family: var(--alert-content-font-m);
    color: var(--alert-content-text-color-m);
    max-width: 380px;
  }
  .modal-alert .alert-item svg {
    width: 20px; /* Larger icon for mobile */
    height: 20px;
    margin-right: 12px;
    margin-top: 6px;
  }
  .modal-alert .modal-footer .btn {
    background-color: var(--alert-button-bg-m);
    color: var(--alert-button-text-color-m);
    border-radius: 8px;
    font-family: var(--alert-button-font-m);
    font-size: 14px;
    padding: 14px 20px;
  }

  /* Login Modal Mobile */
  .modal-login .modal-content {
    max-width: var(--login-modal-width-m);
    min-height: var(--login-modal-height-m);
  }
  .modal-login .form-control {
    padding: 16px;
    background-color: var(--login-input-bg-m);
    border-radius: 8px;
    font-family: var(--login-input-font-m);
    font-size: 14px;
    color: var(--login-input-text-color-m);
  }
  .modal-login .form-control::placeholder {
    color: var(--login-input-placeholder-color-m);
  }
  .modal-login .btn-login {
    background-color: var(--login-button-bg-m);
    color: var(--login-button-text-color-m);
    border-radius: 8px;
    font-family: var(--login-button-font-m);
    font-size: 14px;
    padding: 14px 20px;
  }
  .modal-login .login-divider {
    margin: 32px 0;
    color: var(--login-divider-text-color-m);
    font-family: var(--login-divider-text-font-m);
    font-size: 14px;
  }
  .modal-login .login-divider::before,
  .modal-login .login-divider::after {
    border-bottom: 1px solid var(--login-divider-line-color-m);
  }
  .modal-login .social-btn {
    color: var(--login-social-text-color-m);
    font-family: var(--login-social-text-font-m);
    font-size: 14px;
  }
  .modal-login .social-btn-icon {
    width: 41px; /* Larger social icons */
    height: 41px;
    margin-bottom: 12px;
  }
  .modal-login .social-btn-icon svg {
    width: 28px; /* Larger SVG within */
    height: 28px;
  }
  .modal-login .social-btn-google .social-btn-icon {
    background-color: var(--login-social-btn-bg-google-m);
  }
  .modal-login .social-btn-facebook .social-btn-icon {
    background-color: var(--login-social-btn-bg-facebook-m);
  }
}