/*
 * Popups (Bootstrap .modal) site-wide, in the style of the restyled login
 * popup: a white card with a red top edge and rounded corners, a
 * condensed bold title on the left, a round close button top right,
 * 48px fields with a blue focus ring, red buttons for the main action
 * and light gray buttons for Cancel / Close, and a light gray footer.
 *
 * Loaded on every page by include/css.php and include/css-account.php
 * after styles.css, so it replaces the old shared look (concert-photo
 * background, centred capitalised title, 816px-wide dialog). Popups with
 * their own restyle keep it: #login-modal (styles.css),
 * #filter-modal.sp-modal (search-page.css) and the search results popups
 * (search-results.css) use more specific selectors, so they win.
 *
 * Hebrew pages load modal-theme.rtl.css instead (config.php RTL_CSS),
 * generated from this file by bin/build-rtl-css.sh - re-run it after
 * editing this file.
 */

.modal {
    --mt-red: #d93337;
    --mt-red-dark: #b0262a;
    --mt-bar: #404040;
    --mt-ink: #1f1f1f;
    --mt-text: #444;
    --mt-muted: #767676;
    --mt-line: #c9c9c9;
    --mt-line-soft: #ececec;
    --mt-soft: #f6f6f7;
    --mt-btn-light: #e4e4e4;
    --mt-blue: #0c83eb;
    --mt-font: 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    --mt-font-head: HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, 'Helvetica Neue Bold Condensed', 'Open Sans Condensed', 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
}

.modal-backdrop.show {
    opacity: .65;
}

/* ---------- The card ---------- */

.modal .modal-dialog {
    width: auto;           /* styles.css sets 816px from 768px up */
    max-width: 520px;
    margin: 80px auto;
    padding: 0;
}

.modal .modal-dialog.modal-lg {
    max-width: 800px;
}

.modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-top: 4px solid var(--mt-red);
    border-radius: 10px;
    background: #fff;      /* replaces the concert-photo background */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    font: 15px/1.5 var(--mt-font);
    color: var(--mt-text);
}

.modal .modal-header {
    display: block;
    margin: 0;
    padding: 26px 64px 6px 28px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left !important;
    color: var(--mt-ink);
}

.modal .modal-title {
    margin: 0;
    font: 700 26px/1.2 var(--mt-font-head);
    text-align: left;
    text-transform: none;
    color: var(--mt-ink);
}

/* Close button: the markup varies (a ×, or a glyphicon), so it is drawn
   the same way for all of them. */
.modal .modal-header .close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font: 300 30px/1 var(--mt-font);
    text-shadow: none;
    color: var(--mt-muted);
    opacity: 1;
}

.modal .modal-header .close .glyphicon {
    top: 0;
    font: 300 30px/1 var(--mt-font);
}

/* Some popups use a glyphicon "remove" icon, which is heavier than the ×
   the others use: draw the same thin × for both. */
.modal .modal-header .close .glyphicon-remove::before {
    content: '\00d7';
}

.modal .modal-header .close:hover,
.modal .modal-header .close:focus-visible {
    background: #f0f0f0;
    color: var(--mt-ink);
    outline: 0;
}

.modal .modal-body {
    min-height: 0;
    padding: 14px 28px 26px;
    border-radius: 0;
}

.modal .modal-body > :last-child {
    margin-bottom: 0;
}

.modal .modal-body p {
    margin: 0 0 12px;
}

.modal .modal-body h1,
.modal .modal-body h2,
.modal .modal-body h3 {
    margin: 0 0 10px;
    font: 700 20px/1.25 var(--mt-font-head);
    color: var(--mt-ink);
}

.modal .modal-body a:not(.btn):not(.modal-button):not(.button) {
    font-weight: bold;
    color: var(--mt-red);
}

.modal .modal-body hr {
    margin: 18px -28px;
    border-color: var(--mt-line-soft);
}

.modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px 28px;
    border-top: 1px solid var(--mt-line-soft);
    background: var(--mt-soft);
    text-align: right;
}

.modal .modal-footer > * {
    margin: 0;
}

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

.modal .btn,
.modal .modal-button,
.modal .button,
.modal input[type="submit"],
.modal input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 46px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 6px;
    background: var(--mt-btn-light);
    box-shadow: none;
    font: bold 15px/1.2 var(--mt-font);
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    white-space: normal;
    color: var(--mt-ink);
    cursor: pointer;
}

.modal .btn:hover,
.modal .btn:focus {
    background: #d4d4d4;
    color: var(--mt-ink);
    text-decoration: none;
}

/* Main actions: red. */
.modal .btn-contact,
.modal .btn-danger,
.modal .btn-2,
.modal .modal-button,
.modal .button-red,
.modal input[type="submit"] {
    background: var(--mt-red);
    color: #fff;
}

.modal .btn-contact:hover,
.modal .btn-contact:focus,
.modal .btn-danger:hover,
.modal .btn-danger:focus,
.modal .btn-2:hover,
.modal .btn-2:focus,
.modal .modal-button:hover,
.modal .button-red:hover,
.modal input[type="submit"]:hover {
    background: var(--mt-red-dark);
    color: #fff;
}

/* Secondary actions that aren't Cancel/Close: dark gray. */
.modal .btn-primary {
    background: var(--mt-bar);
    color: #fff;
}

.modal .btn-primary:hover,
.modal .btn-primary:focus {
    background: #2b2b2b;
    color: #fff;
}

/* Cancel + Confirm pairs sit side by side under the text. */
.modal .modal-body > .btn,
.modal .modal-body .redirection .btn {
    margin: 8px 8px 0 0;
}

.modal .modal-body > p + .btn {
    margin-top: 14px;
}

/* ---------- Fields ---------- */

.modal .modal-body label {
    font: bold 13px/1.3 var(--mt-font);
    color: var(--mt-ink);
}

.modal .form-control,
.modal .modal-body input[type="text"],
.modal .modal-body input[type="email"],
.modal .modal-body input[type="password"],
.modal .modal-body input[type="tel"],
.modal .modal-body input[type="number"],
.modal .modal-body select,
.modal .modal-body textarea {
    display: block;
    width: 100%;
    max-width: none;
    height: 48px;
    margin: 0 0 16px;
    padding: 0 12px;
    border: 1px solid var(--mt-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    font: 16px var(--mt-font);   /* 16px stops iOS zooming in */
    color: var(--mt-ink);
}

.modal .modal-body textarea {
    height: auto;
    min-height: 130px;
    padding: 10px 12px;
    resize: vertical;
}

.modal .form-control:focus,
.modal .modal-body input:focus,
.modal .modal-body select:focus,
.modal .modal-body textarea:focus {
    outline: 0;
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
}

.modal .modal-body input[type="checkbox"],
.modal .modal-body input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: -3px;
    accent-color: var(--mt-bar);
}

.modal .modal-body .form-check {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 0;
}

.modal .modal-body .form-check-input {
    position: static;
    margin: 0 10px 0 0;
}

.modal .modal-body .form-check-label {
    font-weight: normal;
    font-size: 15px;
}

/* The older forms inside popups (login, save search, flag, hide). */
.modal .login-form,
.modal .message-form {
    width: auto !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    font: 15px/1.5 var(--mt-font);
}

.modal .login-form fieldset,
.modal .message-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.modal .login-form label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
}

.modal .login-form .clearfix {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
}

.modal .login-form .clearfix::before,
.modal .login-form .clearfix::after {
    display: none;
}

.modal .login-form .forgot {
    float: none;
    font-size: 13px;
    color: var(--mt-muted) !important;
}

.modal .login-form .frame {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 4px 0 16px;
    overflow: visible;
}

.modal .login-form .frame .btn {
    min-width: 140px;
}

.modal .login-form .frame > div {
    margin: 0 !important;
    float: none !important;
}

.modal .login-form p {
    text-align: left;
}

.modal .login-form ul {
    margin: 0 0 12px;
    padding: 0;
}

.modal .login-form ul li {
    margin: 0 0 8px;
}

.modal .login-form ul li label {
    font-weight: normal;
    font-size: 15px;
}

.modal .modal-body dl {
    margin: 0 0 12px;
}

.modal .modal-body dt {
    margin: 0;
}

.modal .modal-body dd {
    margin: 0 0 4px;
}

/* Notices inside popups. */
.modal .modal-body .alert {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 0;
    border-radius: 6px;
}

.modal .modal-body .alert-danger,
.modal .modal-body .error {
    background: #fdeeee;
    color: #a01f23;
}

.modal .modal-body .success {
    color: #237a45;
}

.modal .modal-body .info {
    color: var(--mt-muted);
}

/* ---------- Popups with their own layout ---------- */

/* Contact a member: the message form beside the member's photo and
   message history (#message-modal, and the per-member
   #message-modal-<id> / -local-<id> / -bookmark-<id> on profiles). */
.modal[id^="message-modal"] .modal-dialog {
    max-width: 760px;
}

.modal .message-form fieldset {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.modal .message-form .frame {
    flex: 1 1 auto;
    align-self: stretch;
    order: 2;
    float: none;
    width: auto;
    padding: 0;
}

.modal .message-form .box {
    flex: 0 0 150px;
    order: 1;
    float: none;
    width: 150px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mt-muted);
}

.modal .message-form .box img {
    width: 120px !important;
    height: 120px !important;
    margin: 0 0 12px;
    object-fit: cover;
}

.modal .message-form .box .ttl {
    margin: 0 0 8px;
    font: bold 13px/1.3 var(--mt-font);
    color: var(--mt-ink);
}

.modal[id^="message-modal"] .modal-body textarea {
    min-height: 180px;
}

/* Tabs (the mastered-track checkout popup). */
.modal .nav-tabs {
    gap: 4px;
    margin: 4px 0 18px;
    border-bottom: 1px solid var(--mt-line-soft);
}

.modal .nav-tabs .nav-link {
    margin: 0 0 -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
    font-weight: bold;
    color: var(--mt-muted) !important;
}

.modal .nav-tabs .nav-link.active,
.modal .nav-tabs .nav-link:hover {
    border-bottom-color: var(--mt-red);
    background: none !important;
    color: var(--mt-ink) !important;
}

/* Share a profile: the link field with its copy button beside it. */
.modal .share-link label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.modal .share-link label input {
    flex: 1 1 220px;
    margin: 0;
}

/* Gift card form: labels above their fields. */
.modal .bigdl dt,
.modal .bigdl dd {
    float: none;
    width: auto;
    margin-left: 0;
    padding: 0;
    text-align: left;
}

.modal .modal-body textarea {
    max-width: none !important;
    width: 100% !important;
}

/* Browse options on the state / city pages: a normal-width popup with the
   filters as radio rows (styles.css makes #filter-modal full width for the
   search results filters on phones, which keep that). */
.modal#filter-modal:has(.browse-options) .modal-dialog {
    width: auto;
    min-width: 0;
    max-width: 640px;
    margin: 80px auto;
    padding: 0;
}

.modal#filter-modal:has(.browse-options) .modal-body {
    background: #fff;
}

.modal .browse-options {
    padding: 0;
    border: 0;
    background: none;
}

.modal .browse-options h2,
.modal .browse-options h3 {
    text-align: left;
    text-transform: none;
}

.modal .browse-options form > div:not(.clear),
.modal .browse-options form p > div {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
}

.modal .browse-options form label {
    margin: 0;
    font-weight: normal;
    font-size: 15px;
}

/* Mastering keeps its dark artwork panel. */
.modal .modal-dialog.modal-mastering-dialog {
    max-width: 900px;
}

.modal .modal-mastering-body h1,
.modal .modal-mastering-body h2,
.modal .modal-mastering-body h3 {
    font-size: 34px;
    text-align: center;
    color: #fff;
}

/* ---------- Phones ---------- */

@media (max-width: 575px) {
    .modal .modal-dialog,
    .modal .modal-dialog.modal-lg {
        max-width: none;
        margin: 64px 12px;
    }

    .modal .modal-header {
        padding: 22px 56px 4px 20px;
    }

    .modal .modal-title {
        font-size: 23px;
    }

    .modal .modal-body {
        padding: 12px 20px 22px;
    }

    .modal .modal-body hr {
        margin: 16px -20px;
    }

    .modal .modal-footer {
        padding: 12px 20px;
    }

    .modal .modal-body > .btn {
        flex: 1 1 auto;
    }

    .modal .message-form fieldset {
        flex-direction: column;
    }

    .modal .message-form .box {
        flex: none;
        width: auto;
    }
}