/* GENERATED from modal-theme.css by bin/build-rtl-css.sh (rtlcss) for right-to-left pages. Do not edit by hand. */
/*
 * 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 28px 6px 64px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: right !important;
    color: var(--mt-ink);
}

.modal .modal-title {
    margin: 0;
    font: 700 26px/1.2 var(--mt-font-head);
    text-align: right;
    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;
    left: 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: left;
}

.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 0 0 8px;
}

.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 0 0 8px;
    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 0 0 10px;
}

.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: right;
}

.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;
}

/* Message history links: medium grey, darker on hover, so they read as a
   quiet list beside the form instead of a column of red. The extra
   .modal-body outranks the general modal link rule above. */
.modal .modal-body .message-form .box .history a {
    color: var(--mt-muted);
}

.modal .modal-body .message-form .box .history a:hover,
.modal .modal-body .message-form .box .history a:focus {
    color: var(--mt-ink);
}

/* 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-right: 0;
    padding: 0;
    text-align: right;
}

.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;
}

/* Phones: the browse options (count, filters, feeds, cities, instruments)
   open only in this popup from the Filters link and icon at the top of the
   page, so the results start right under the pager. styles.css shows every
   .search-filters on phones, hence the more specific selector here. */
@media only screen and (max-width: 767px) {
    .search-results > .search-filters.browse-options {
        display: none;
    }

    /* Fit the translated label ("Filter", "Filtres", "フィルター") instead of
       the 30px search-results width, so it isn't cut off at the edge. */
    .page-header .edit-search.browse-filters-link {
        width: auto;
        min-width: 30px;
        margin-left: 12px;
        line-height: 1.2;
    }

    .page-header .edit-search.browse-filters-link img {
        display: block;
        margin: 0 auto 2px;
    }
}

.modal .browse-options h2,
.modal .browse-options h3 {
    text-align: right;
    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 20px 4px 56px;
    }

    .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;
    }
}