/* Personalisation rules: quiet note on restricted quality cards, hidden pathway, text hint. See mcm-personalise.js. */

.mcm-product .productOptionsList01 .mcm-pnote {
    float: none; position: static; width: auto; max-width: none; margin: 0; padding: 0;
    font-size: 11.5px; line-height: 1.3; font-style: normal; font-weight: 400; color: #6b7280; background: none; white-space: nowrap;
}
.mcm-product .productOptionsList01 .mcm-pnote::before {
    content: "i";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    font: italic 600 10px/13px Georgia, serif;
    text-align: center;
    color: #6b7280;
    vertical-align: 1px;
}

/* Whole personalisation pathway: alternative edging, logos/flags, custom text, fonts, passenger text */
html.mcm-no-personalise #ContrastingEdge,
html.mcm-no-personalise #logooption,
html.mcm-no-personalise #customise,
html.mcm-no-personalise #personaltext,
html.mcm-no-personalise #embimg,
html.mcm-no-personalise #logocolor,
html.mcm-no-personalise .yourPersonalText,
html.mcm-no-personalise .showPersonal,
html.mcm-no-personalise .showPersonalBox {
    display: none !important;
}

/* Passenger text: hidden until the different-passenger checkbox is ticked; the checkbox itself is always available */
.mcm-product [id$="_passengermat"] { display: block !important; margin: 0; }
.mcm-product #personaltext [id$="_passengermat"] input[id$="_txt_custom1"] { display: block; height: 0; margin: 0; padding: 0 12px; border-width: 0; opacity: 0; overflow: hidden; transition: height .25s ease, margin .25s ease, opacity .2s ease; }
.mcm-product #personaltext [id$="_passengermat"]:has(input[id$="_chkpassenger"]:checked) input[id$="_txt_custom1"] { height: 42px; margin-top: 8px; border-width: 1px; opacity: 1; }
.mcm-product [id$="_passengermat"] label { font-size: 13.5px; color: var(--mcm-ink); cursor: pointer; }

/* Selected thread colour: established green active state */
.mcm-product #logocolor img.Select { outline: 3px solid var(--mcm-green); outline-offset: 1px; border-radius: 4px; box-shadow: 0 0 0 5px rgba(20, 124, 53, .18); }
.mcm-product #logocolor img.Unselect { outline: 0; }

/* ---- builder: four stages (markup in view.aspx / viewvrm.aspx) ---- */
.mcm-product #personaltext { float: none; width: 100%; max-width: none; padding: 0; margin: 0; }
.mcm-product #personaltext > .rows { display: block; margin: 0; }
.mcm-product #personaltext > .rows > .cols-md-6 { width: 100%; max-width: 100%; flex: none; padding: 0; }
.mcm-product #personaltext .articleProductPage01Section03Text01 { margin: 0; padding: 0; }
.mcm-product #logooption .mcm-stage { margin: 0 0 14px; }
.mcm-product #logooption .mcm-stage-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.mcm-product #logooption .mcm-stage-head h6 { margin: 0; padding: 0; font: 700 14px/1.2 Arial, sans-serif; color: var(--mcm-navy); text-transform: none; }
.mcm-product #logooption .mcm-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mcm-navy); color: #fff; font: 700 11.5px Arial, sans-serif; }
.mcm-product #logooption .mcm-clear { margin-left: auto; padding: 4px 0; font: 12.5px Arial, sans-serif; color: var(--mcm-muted); text-decoration: underline; }
.mcm-product #logooption .mcm-clear:hover { color: var(--mcm-ink); }

/* stage 1 + 2: text beside preview on desktop, stacked on mobile (text, helper, passenger, preview) */
.mcm-product #logooption .mcm-s1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; }
.mcm-product #logooption .mcm-s1-preview { padding: 12px; border: 1px solid var(--mcm-line); border-radius: 10px; background: var(--mcm-soft); align-self: start; }
.mcm-product #logooption .mcm-s1-preview .mcm-preview { margin: 0; }
/* stage 3: one coherent card; font and symbols side by side, thread colour across the full width */
.mcm-product #logooption .mcm-s3 { padding: 12px; border: 1px solid var(--mcm-line); border-radius: 10px; }
.mcm-product #logooption .mcm-styles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; }
.mcm-product #logooption .mcm-styles > * { margin: 0; }
@media (min-width: 768px) {
    .mcm-product #logooption .mcm-s1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mcm-product #logooption .mcm-styles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mcm-product #logooption .mcm-styles .mcm-f-colour { grid-column: 1 / -1; }
}.mcm-product #personaltext .dadTaxi { margin: 0 0 8px; padding: 0; border: 0; }
.mcm-product #personaltext .inputpassen { width: 100%; max-width: 100%; height: 42px; padding: 0 12px; font-size: 16px; border: 1px solid #b9c3d1; border-radius: 8px; box-sizing: border-box; background: #fff; }
.mcm-product #personaltext .dadTaxi.mcm-field { position: relative; }
.mcm-product #personaltext .mcm-field .inputpassen { padding-right: 56px; }
.mcm-count { position: absolute; right: 12px; top: 11px; font: 12px Arial, sans-serif; color: var(--mcm-muted); pointer-events: none; }
.mcm-count.is-full { color: var(--mcm-green); font-weight: 700; }
.mcm-product .mcm-lbl { display: block; margin: 0 0 4px; font: 600 12.5px Arial, sans-serif; color: var(--mcm-ink); }
.mcm-product .mcm-lbl em { font-style: normal; font-weight: 400; color: var(--mcm-muted); }
.mcm-product .mcm-lbl-row { display: flex; align-items: center; justify-content: space-between; }
.mcm-block { margin: 0 0 10px; }
.mcm-product .mcm-link { border: 0; background: none; padding: 0; color: var(--mcm-link); font: 12.5px Arial, sans-serif; text-decoration: underline; cursor: pointer; }
.mcm-product .mcm-product .mcm-link[hidden] { display: none; }
.mcm-product #personaltext .mcm-pinfo { margin: 4px 0 0; padding: 0; font-size: 12px; line-height: 1.35; color: var(--mcm-muted); }
.mcm-product .mcm-text-hint, .mcm-product .mcm-pnotice { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: #6b7280; }
.mcm-product .mcm-product .mcm-text-hint[hidden], .mcm-product .mcm-fit[hidden] { display: none; }
.mcm-text-invalid { border-color: #9ca3af !important; }

/* legacy server preview stays in the DOM (server-referenced) but is replaced visually by the badge preview */
.mcm-product #personaltext div[id$="_divrear"] { display: none !important; }

/* single-line badge preview, about 11 cm wide */
.mcm-preview { margin: 0 0 12px; }
.mcm-badges { display: flex; flex-direction: column; gap: 8px; }
.mcm-product .mcm-badge-label { display: block; margin: 0 0 3px; font: 11.5px Arial, sans-serif; color: var(--mcm-muted); }
.mcm-badge { width: 100%; max-width: 100%; aspect-ratio: 110 / 17; background: #151a22; border-radius: 6px; box-shadow: 0 0 0 1px #0b0e13 inset, 0 1px 3px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mcm-badge.is-light { background: #e6e9ee; }
.mcm-badge-line { display: flex; align-items: center; justify-content: center; gap: .3em; white-space: nowrap; line-height: 1; max-width: 100%; }
.mcm-badge-line.is-empty .mcm-badge-text { opacity: 1; }
.mcm-badge-line.is-over { outline: 1px dashed #9ca3af; outline-offset: 3px; }
.mcm-badge-sym { display: inline-flex; width: 1.3em; height: 1.3em; }
.mcm-badge-sym svg { width: 100%; height: 100%; }
.mcm-badge-sym.is-iheart { width: auto; height: auto; align-items: center; }
.ih { display: inline-flex; align-items: center; gap: .08em; line-height: 1; }
.ih b { font: inherit; font-weight: inherit; }
.ih svg { width: 1.05em; height: 1.05em; flex: none; }
.mcm-sym .ih { width: 100%; height: 100%; justify-content: center; font: 700 20px/1 Georgia, serif; }
.mcm-sym .ih svg { width: 22px; height: 22px; }
.mcm-sym.is-wide { grid-column: span 2; }
.mcm-badge-sym.is-flag { width: 1.5em; height: .9em; align-self: center; }
.mcm-product .mcm-fit { margin: 6px 0 0; font-size: 12.5px; color: #6b7280; }
.mcm-ruler { max-width: 100%; margin-top: 4px; border-top: 1px solid #cbd5e1; position: relative; text-align: center; }
.mcm-ruler span { position: relative; top: -9px; padding: 0 8px; background: #fff; font: 11px Arial, sans-serif; color: var(--mcm-muted); }

/* symbols */
.mcm-sym-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mcm-sym-grp[data-collapsed] .mcm-sym[data-extra] { display: none; }
.mcm-sym-head { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 0 5px; }
.mcm-sym-grp:first-of-type .mcm-sym-head { margin-top: 2px; }
.mcm-sym-more { font-size: 12px; }
.mcm-sym-group { font: 600 11.5px/1 Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--mcm-muted); }
.mcm-sym { width: 100%; height: 44px; min-width: 0; padding: 9px; border: 1px solid var(--mcm-line); border-radius: 10px; background: #fff; color: var(--mcm-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mcm-sym svg { width: 100%; height: 100%; display: block; }
.mcm-sym:hover { border-color: #b9c3d1; }
.mcm-sym.is-active { border-color: var(--mcm-green); box-shadow: 0 0 0 1px var(--mcm-green) inset; background: #f1faf3; }
.mcm-sym:disabled { opacity: .4; cursor: not-allowed; }
.mcm-product .mcm-sym-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--mcm-muted); }
.mcm-product .mcm-product .mcm-sym-hint[hidden] { display: none; }

/* text helper (curated suggestions, not a live AI service) */
.mcm-ai { margin: 0 0 8px; }
.mcm-ai-open { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--mcm-line); border-radius: 999px; background: #fff; color: var(--mcm-ink); font: 600 13px Arial, sans-serif; cursor: pointer; }
.mcm-ai-open:hover, .mcm-ai-open[aria-expanded="true"] { border-color: var(--mcm-green); background: #f1faf3; }
.mcm-ai-ico { display: inline-flex; width: 16px; height: 16px; color: var(--mcm-green); }
.mcm-ai-ico svg { width: 100%; height: 100%; }
.mcm-ai-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--mcm-line); border-radius: 10px; background: var(--mcm-soft); }
.mcm-ai-panel[hidden] { display: none; }
.mcm-ai-row { display: flex; gap: 8px; }
.mcm-ai-theme { flex: 1; min-width: 0; height: 40px; padding: 0 10px; font-size: 16px; border: 1px solid #b9c3d1; border-radius: 8px; }
.mcm-ai-go { min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--mcm-navy); color: #fff; font: 700 13.5px Arial, sans-serif; cursor: pointer; }
.mcm-product .mcm-ai-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--mcm-muted); }
.mcm-product .mcm-product .mcm-ai-msg[hidden] { display: none; }
.mcm-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mcm-ai-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--mcm-line); border-radius: 999px; background: #fff; color: var(--mcm-ink); font: 14px Arial, sans-serif; cursor: pointer; }
.mcm-ai-chip:hover { border-color: var(--mcm-green); background: #f1faf3; }
.mcm-product .mcm-ai-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--mcm-muted); }

/* thread colour chips (mirror of the ddlColor dropdown) */
.mcm-product select.mcm-colour-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mcm-colour-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; }
.mcm-colour-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 9px 0 6px; border: 1px solid var(--mcm-line); border-radius: 999px; background: #fff; color: var(--mcm-ink); font: 12.5px Arial, sans-serif; cursor: pointer; }
.mcm-colour-chip i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #b9c3d1; }
.mcm-colour-chip:hover { border-color: #b9c3d1; }
.mcm-colour-chip.is-active { border-color: var(--mcm-green); background: #f1faf3; box-shadow: 0 0 0 1px var(--mcm-green) inset; font-weight: 700; }

/* fonts: the legacy declarations (CANDY.TTF, Revue.ttf) fail to load, so Candice and Revue are declared from the files that do exist */
@font-face { font-family: "Candice"; src: url("/includes/css/fontFace/CANDY.woff") format("woff"), url("/includes/css/fontFace/CANDY.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Revue"; src: url("/includes/css/fontFace/RevueBT-Regular.woff2") format("woff2"), url("/includes/css/fontFace/RevueBT-Regular.ttf") format("truetype"); font-display: swap; }

/* segmented Custom Text / Custom Logo switch and tidy-up of the legacy green panels */
.mcm-product #logooption .addCustomTextOrLogo { display: flex; gap: 0; margin: 10px 0 12px; padding: 3px; list-style: none; background: #e9edf2; border-radius: 10px; width: 100%; box-sizing: border-box; }
.mcm-product #logooption .addCustomTextOrLogo > li { float: none; flex: 1 1 0; width: auto; margin: 0; padding: 0; background: none; }
.mcm-product #logooption .addCustomTextOrLogo > li.Select .customTab { background: #fff; color: var(--mcm-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 0 0 1px var(--mcm-green) inset; }
.mcm-product #logooption .addCustomTextOrLogo > li.Unselect .customTab { background: transparent; color: var(--mcm-muted); box-shadow: none; }
.mcm-product #logooption .addCustomTextOrLogo .customTab { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border-radius: 8px; font: 700 13.5px Arial, sans-serif; text-align: center; cursor: pointer; }
.mcm-product #logooption .addCustomTextOrLogo .customTab::after, .mcm-product #logooption .addCustomTextOrLogo > li::after, .mcm-product #logooption .addCustomTextOrLogo > li::before { display: none; content: none; }

/* stage 4: position cards */
.mcm-product #logooption .mcm-pos { margin: 0; }
.mcm-product #logooption .mcm-pos .mcm-pos-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .mcm-product #logooption .mcm-pos .mcm-pos-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mcm-product #logooption .mcm-pos .mcm-pos-list > li { float: none; width: auto; margin: 0; padding: 0; }
.mcm-product #logooption .mcm-pos figure { display: flex; align-items: center; gap: 12px; width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 8px 12px 8px 8px; min-height: 64px; border: 1px solid var(--mcm-line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.mcm-product #logooption .mcm-pos figure:hover { border-color: #b9c3d1; }
.mcm-product #logooption .mcm-pos figure img { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 6px; border: 0; }
.mcm-product #logooption .mcm-pos figcaption { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; font: 12.5px Arial, sans-serif; color: var(--mcm-muted); text-align: left; }
.mcm-product #logooption .mcm-pos figcaption strong { font-size: 14px; color: var(--mcm-ink); }
.mcm-product #logooption .mcm-pos figure.Select { border: 1px solid var(--mcm-green); background: #f1faf3; box-shadow: 0 0 0 1px var(--mcm-green) inset; }
.mcm-product #logooption .mcm-pos figure.Select figcaption strong::after { content: " \2713"; color: var(--mcm-green); }
/* legacy stylesheets put a rule under every paragraph */
.mcm-product #logooption #personaltext p,
.mcm-product #logooption .mcm-pos p { border: 0; }
.mcm-product #logooption #articleProductPage01Section03Colours01Block01 { padding-top: 0; }
.mcm-product #logooption .showPersonalBox { margin-top: 6px; }
.mcm-idea { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--mcm-line); }
.mcm-product .mcm-idea-open { font-size: 13px; }
.mcm-idea-form { margin-top: 10px; padding: 12px; border: 1px solid var(--mcm-line); border-radius: 12px; background: #fff; }
.mcm-idea-form[hidden] { display: none; }
.mcm-product .mcm-idea-lead { margin: 0 0 8px; font: 13px/1.4 Arial, sans-serif; color: var(--mcm-muted); }
.mcm-idea-form label { display: block; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; }
.mcm-idea-form textarea, .mcm-idea-form input[type=email], .mcm-idea-form input[type=file] { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--mcm-line); border-radius: 8px; font: 14px Arial, sans-serif; }
.mcm-idea-form label.mcm-idea-ok { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.mcm-idea-form label.mcm-idea-ok input { margin-top: 2px; }
.mcm-idea-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mcm-product .mcm-idea-send { width: auto; flex: none; white-space: nowrap; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--mcm-green); color: #fff; font: 600 14px Arial, sans-serif; cursor: pointer; }
.mcm-product .mcm-idea-msg { font: 12.5px/1.3 Arial, sans-serif; color: var(--mcm-muted); }
.mcm-product .mcm-idea-note { margin: 8px 0 0; font: 11.5px/1.3 Arial, sans-serif; color: var(--mcm-muted); }
.mcm-badge-sym.is-iheart { width: auto; height: auto; align-items: center; }
.ih.wm b { font-style: italic; font-weight: 800; border: .09em solid currentColor; border-radius: .2em; padding: .06em .22em; line-height: 1; letter-spacing: .02em; }
.mcm-sym .ih.wm { font: italic 800 15px/1 Arial, sans-serif; }
.mcm-sym .ih.wm b { border-width: 2px; padding: 3px 6px; }
.mcm-product #logooption .addCustomTextOrLogo { display: none; }
.mcm-sym-panel.is-teaser .mcm-sym-grp:nth-of-type(n+3), .mcm-sym-panel.is-teaser .mcm-idea, .mcm-sym-panel.is-teaser .mcm-sym-more { display: none; }
.mcm-sym-panel.is-teaser .mcm-sym-grp[data-collapsed] .mcm-sym[data-extra] { display: none; }