/* Styles for Match Making Calculator plugin
   - Result panel and breakdown table
   - Share buttons (PDF, WhatsApp, Email)
   - Key terms and interpretation sections
*/

.mmc-container { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #243143; }

.mmc-result {
  background: #ffffff;
  border: 1px solid #e6eef6;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(36,49,67,0.06);
  max-width: 820px;
  margin-top: 14px;
}

.mmc-result h3, .mmc-result h4 { color: #102a43; margin: 0 0 8px 0; }
.mmc-result p { margin: 6px 0; line-height: 1.45; }

.mmc-result table { width: 100%; max-width: 520px; border-collapse: collapse; margin-top: 10px; }
.mmc-result th, .mmc-result td {
  border: 1px solid #e6eef6;
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
}
.mmc-result thead th { background: #f4fbff; color: #0b3a5a; font-weight: 700; }
.mmc-result tbody tr:nth-child(odd) { background: #ffffff; }
.mmc-result tbody tr:nth-child(even) { background: #fbfdff; }

.mmc-share { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.mmc-share button { display: inline-flex; align-items: center; gap: 8px; border: none; padding: 8px 12px; border-radius: 8px; color: #ffffff; cursor: pointer; font-weight: 600; box-shadow: 0 2px 6px rgba(16,42,67,0.08); transition: transform 0.08s ease, box-shadow 0.12s ease; }
.mmc-share button i { font-size: 16px; line-height: 1; }
.mmc-share button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,42,67,0.12); }
.mmc-share button:focus { outline: 3px solid rgba(2,132,199,0.18); }

.mmc-download-pdf { background: linear-gradient(180deg,#d9534f,#c43a2e); }
.mmc-download-pdf i { color: #fff; }
.mmc-share-whatsapp { background: linear-gradient(180deg,#25D366,#1ebe54); }
.mmc-share-email { background: linear-gradient(180deg,#0a66c2,#084a9a); }

.mmc-share .mmc-copy-link { background: #f0f4f8; color: #0b3a5a; border: 1px solid #d6e4f0; }

.mmc-key-terms { margin-top: 18px; padding: 14px; background: #fbfdff; border-left: 4px solid #dbeefd; border-radius: 8px; }
.mmc-key-terms h3 { margin-top: 0; }
.mmc-score-interpretation ul { margin: 8px 0 0 20px; }
.mmc-details summary { cursor: pointer; font-weight: 600; }
.mmc-details p { margin-top: 8px; color: #334e68; }

.mmc-disclaimer { font-size: 13px; color: #425466; margin-top: 12px; }

/* Loader */
.mmc-loader-container { display: flex; align-items: center; gap: 10px; }
.mmc-spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(2,132,199,0.12); border-top-color: #0284c7; animation: mmc-spin 1s linear infinite; }
@keyframes mmc-spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 520px) {
  .mmc-result table { max-width: 100%; font-size: 13px; }
  .mmc-share { flex-direction: column; }
  .mmc-share button { width: 100%; justify-content: center; }
}
/*
 * Match Making Calculator Styles
 */

.mmc-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 850px;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.mmc-form h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

.mmc-form .mmc-dual-fieldset-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* On smaller screens, stack the fieldsets */
@media (max-width: 650px) {
    .mmc-form .mmc-dual-fieldset-container {
        grid-template-columns: 1fr;
    }
}

.mmc-form fieldset {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.mmc-form legend {
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 10px;
    color: #555;
}

.mmc-form legend .fas {
    margin-right: 8px;
    color: #0073aa;
}

.mmc-form p {
    margin-bottom: 10px;
}

.mmc-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #444;
}

.mmc-label-example {
    font-weight: normal;
    font-size: 0.85em;
    color: #777;
}

.mmc-lat-lon-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mmc-form input[type="text"],
.mmc-form input[type="date"],
.mmc-form input[type="time"],
.mmc-form input[type="email"],
.mmc-form input[type="tel"],
.mmc-form input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.mmc-submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.mmc-submit-button:hover {
    background-color: #005177;
}

.mmc-result {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-left: 5px solid #0073aa;
}

.mmc-result table {
    width: 100%;
    max-width: 400px;
    border-collapse: collapse;
    margin-top: 10px;
}

.mmc-result th, .mmc-result td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.mmc-key-terms {
    margin-top: 40px;
}

.mmc-key-terms .fas {
    margin-right: 8px;
    color: #0073aa;
}

.mmc-score-interpretation {
    background: #eef7ff;
    border: 1px solid #b3d7ff;
    border-radius: 4px;
    padding: 10px 15px;
    margin: 20px 0;
}

.mmc-score-interpretation h4 {
    margin-top: 0;
    color: #005a9e;
}

.mmc-score-interpretation ul {
    margin: 0;
    padding-left: 20px;
}

.mmc-details {
    margin-bottom: 5px;
    border: 1px solid #eee;
    padding: 5px 10px;
    border-radius: 4px;
    background: #fff;
}

.mmc-details summary {
    cursor: pointer;
    font-weight: 600;
}

.mmc-disclaimer {
    margin-top: 40px;
    padding: 15px;
    border: 1px solid #f0ad4e;
    background-color: #fcf8e3;
    color: #8a6d3b;
    border-radius: 4px;
}

.mmc-disclaimer .fas {
    margin-right: 8px;
}

/* --- Typeahead.js Autocomplete Styling --- */
.twitter-typeahead {
  width: 100%;
  position: relative;
}
.tt-menu {
  width: 100%;
  margin-top: 4px;
  padding: 8px 0;
  background: #ffffff; /* Use shorthand to ensure it's opaque white */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tt-suggestion {
  padding: 8px 12px;
  color: #333; /* Ensure suggestion text is readable */
  font-size: 1em;
  line-height: 1.4;
  cursor: pointer;
}
.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
  color: #fff;
  background-color: #0073aa;
}

/* --- Loader/Spinner Styling --- */
.mmc-loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 1.1em;
    color: #555;
}

.mmc-spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #0073aa; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

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