/* /js_creative_request_management/static/src/css/creative_request_form.css */
.js-creative-form-page{--js-blue: #1f41b8; --js-dark-blue: #0f236f; --js-orange: #ff7900; --js-soft-blue: #eaf4ff; --js-border: #696969; --js-text: #111111; background: #f4f6fb; color: var(--js-text); font-family: "Poppins", "Montserrat", "Arial", sans-serif; padding: 18px 0;}.js-creative-form-sheet{position: relative; max-width: 920px; margin: 0 auto; background: #ffffff; min-height: 0; overflow: hidden; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);}.js-creative-form-sheet::before{content: "JS"; position: absolute; left: 72px; top: 300px; font-size: 620px; line-height: 0.85; font-weight: 800; color: rgba(31, 65, 184, 0.035); letter-spacing: -48px; pointer-events: none; z-index: 0;}.js-creative-form-content{position: relative; z-index: 1;}.js-form-logo-area{min-height: 88px; display: flex; align-items: center; justify-content: center; background: #ffffff;}.js-form-logo-img{width: 345px; max-width: 76vw; height: auto; display: block;}.js-form-hero{min-height: 118px; background: linear-gradient(100deg, #2143bd 0%, #0f236f 100%); color: #ffffff; display: grid; grid-template-columns: 1fr 230px; gap: 28px; align-items: center; padding: 24px 40px;}.js-form-hero h1{margin: 0; font-size: 34px; line-height: 1.05; font-weight: 800; color: #ffffff;}.js-form-orange-label{display: inline-block; margin-top: 7px; background: var(--js-orange); color: #ffffff; border-radius: 8px; padding: 3px 12px; font-weight: 700; font-size: 15px;}.js-form-internal-box{border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px; font-size: 14px; color: #ffffff;}.js-form-internal-box strong{display: block; margin-top: 5px; font-size: 16px;}.js-form-body{padding: 28px 36px 0;}.js-form-objective{background: var(--js-soft-blue); border: 1px solid #bfd4f5; border-radius: 10px; padding: 10px 14px 12px; font-size: 16px; line-height: 1.26;}.js-form-objective strong{display: block; color: #2d4b91; font-size: 17px; margin-bottom: 2px;}.js-form-section{margin-top: 22px;}.js-form-step{display: none;}.js-form-step.is-active{display: block;}.js-form-stepper{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 18px;}.js-form-step-tab{border: 1px solid #c9d6ff; background: #f6f8ff; border-radius: 8px; color: #29407f; font-size: 12px; font-weight: 800; min-height: 36px; padding: 6px 8px; text-align: center;}.js-form-step-tab.is-active{background: #0d43b7; border-color: #0d43b7; color: #ffffff;}.js-form-step-tab.is-complete{border-color: #ff7900; color: #0d43b7;}.js-form-section-title{display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}.js-form-number{background: #0d43b7; color: #ffffff; min-width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px;}.js-form-section-title h2{margin: 0; font-size: 21px; font-weight: 800; color: #000000;}.js-form-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px;}.js-form-field label, .js-form-field-label{display: block; margin: 0 0 4px; color: #111111; font-size: 14px; font-weight: 400;}.js-form-field .form-control, .js-form-field .form-select{min-height: 46px; border: 1.6px solid var(--js-border); border-radius: 10px; color: #111111; background-color: rgba(255, 255, 255, 0.86); font-size: 14px; padding: 8px 12px; box-shadow: none;}.js-form-field textarea.form-control{min-height: 116px; resize: vertical;}.js-form-field-full{grid-column: 1 / -1;}.js-form-service-grid, .js-form-urgency-grid{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px;}.js-form-option{position: relative; min-height: 38px; border: 1.4px solid #222222; border-radius: 8px; background: rgba(255, 255, 255, 0.88); display: flex; align-items: center; gap: 9px; padding: 7px 10px; cursor: pointer; font-weight: 800; font-size: 14px; color: #101010;}.js-form-option input{width: 18px; height: 18px; margin: 0; accent-color: #0d43b7; flex: 0 0 auto;}.js-form-option span{line-height: 1.05;}.js-form-urgency-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}.js-form-urgency-card{align-items: flex-start; min-height: 92px; padding: 11px 12px;}.js-form-urgency-card strong{display: block; font-size: 15px; margin-bottom: 3px;}.js-form-urgency-card small{display: block; font-weight: 500; font-size: 12px; line-height: 1.18;}.js-form-signature-grid{display: grid; grid-template-columns: 1fr 1fr 180px; gap: 18px;}.js-form-line-input{height: 34px; border-bottom: 2px solid #555555;}.js-form-sla{margin-top: 18px;}.js-form-sla-title{font-size: 20px; font-weight: 800; margin-bottom: 8px;}.js-form-sla table{width: 100%; border-collapse: collapse; font-size: 13px; background: #ffffff;}.js-form-sla th{color: #0d43b7; font-weight: 800;}.js-form-sla th, .js-form-sla td{border-bottom: 1px solid #d8d8d8; padding: 5px 7px; text-align: left;}.js-form-footer-bar{height: 24px; margin-top: 24px; background: linear-gradient(100deg, #2143bd 0%, #0f236f 100%);}.js-form-actions{display: flex; justify-content: flex-end; gap: 16px; margin-top: 20px;}.js-form-actions .btn{border-radius: 8px; font-size: 16px; font-weight: 800; padding: 10px 22px;}.js-form-actions .btn-primary{background: var(--js-orange); border-color: var(--js-orange);}.js-form-secondary{background: #ffffff; border: 1px solid #b9c6ef; color: #1f41b8;}.js-creative-success{max-width: 760px; margin: 0 auto; background: #ffffff; border-top: 10px solid #1f41b8; border-bottom: 10px solid #1f41b8; border-radius: 14px; padding: 28px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);}.js-creative-success h1{color: #1f41b8; font-weight: 800; font-size: 28px;}.js-form-alert{background: #fff3e8; border: 1px solid #ffb26a; border-left: 5px solid var(--js-orange); border-radius: 8px; color: #6d3200; font-weight: 700; margin-bottom: 16px; padding: 10px 12px;}.js-form-help{display: none; color: #9a4a00; font-weight: 600; margin-top: 5px;}.js-form-field.is-required .js-form-help{display: block;}.js-form-field.has-error .js-form-help{display: block; color: #b42318;}.js-form-field.has-error .form-control, .js-form-field.has-error .form-select{border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.08);}.js-form-field.is-required label::after, .js-form-field.is-required .js-form-field-label::after{content: " *"; color: var(--js-orange); font-weight: 800;}.js-form-option.is-disabled{opacity: 0.45; cursor: not-allowed; background: #f2f2f2;}.js-form-success-head{display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; border-bottom: 1px solid #d9e2ff; padding-bottom: 16px;}.js-form-success-ref{background: #0d43b7; color: #ffffff; border-radius: 10px; font-weight: 800; padding: 10px 14px;}.js-form-success-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px;}.js-form-success-item{background: #f6f8ff; border: 1px solid #d9e2ff; border-radius: 10px; padding: 12px;}.js-form-success-item span{color: #53607d; display: block; font-size: 13px;}.js-form-success-item strong{color: #111111; display: block; font-size: 16px; margin-top: 3px;}.js-form-success-actions{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;}.js-creative-portal{--js-blue: #1f41b8; --js-dark-blue: #0f236f; --js-orange: #ff7900; --js-soft-blue: #eaf4ff; color: #111111;}.js-portal-hero{align-items: center; background: linear-gradient(100deg, #2143bd 0%, #0f236f 100%); border-radius: 10px; color: #ffffff; display: grid; gap: 18px; grid-template-columns: 1fr auto; margin-bottom: 16px; padding: 22px 26px;}.js-portal-hero h1{color: #ffffff; font-size: 28px; font-weight: 800; margin: 0;}.js-portal-hero p{margin: 5px 0 0; opacity: 0.9;}.js-portal-primary{background: var(--js-orange); border-color: var(--js-orange); color: #ffffff; font-weight: 800;}.js-portal-primary:hover{background: #df6500; border-color: #df6500; color: #ffffff;}.js-portal-kpi-grid{display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 14px;}.js-portal-kpi{background: #ffffff; border: 1px solid #d9e2ff; border-radius: 8px; padding: 12px;}.js-portal-kpi span, .js-portal-detail-grid span{color: #53607d; display: block; font-size: 12px; font-weight: 700;}.js-portal-kpi strong{color: var(--js-blue); display: block; font-size: 24px; font-weight: 800; margin-top: 2px;}.js-portal-request-list{display: grid; gap: 10px; margin-top: 14px;}.js-portal-request-card{align-items: center; background: #ffffff; border: 1px solid #d9e2ff; border-left: 5px solid var(--js-blue); border-radius: 8px; color: #111111; display: grid; gap: 14px; grid-template-columns: 1fr auto; padding: 14px 16px; text-decoration: none;}.js-portal-request-card:hover{border-left-color: var(--js-orange); box-shadow: 0 10px 24px rgba(15, 35, 111, 0.12); color: #111111; text-decoration: none;}.js-portal-ref{color: var(--js-orange); font-size: 12px; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase;}.js-portal-request-main h3{color: #111111; font-size: 18px; font-weight: 800; margin: 2px 0 6px;}.js-portal-meta{color: #53607d; display: flex; flex-wrap: wrap; font-size: 13px; gap: 7px;}.js-portal-meta span:not(:last-child)::after{content: "·"; margin-left: 7px;}.js-portal-request-side{align-items: end; display: flex; flex-direction: column; gap: 6px; text-align: right;}.js-portal-badge, .js-portal-sla{border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 800; line-height: 1; padding: 7px 10px;}.js-portal-badge{background: #eaf4ff; color: var(--js-blue);}.js-portal-badge.state-done{background: #e7f7ee; color: #067647;}.js-portal-badge.state-cancelled, .js-portal-badge.state-rejected{background: #f2f4f7; color: #475467;}.js-portal-sla.sla-on_time{background: #e7f7ee; color: #067647;}.js-portal-sla.sla-at_risk{background: #fff4e5; color: #b54708;}.js-portal-sla.sla-late{background: #fee4e2; color: #b42318;}.js-portal-detail-grid{background: #ffffff; border: 1px solid #d9e2ff; border-radius: 10px; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px;}.js-portal-detail-grid strong{color: #111111; display: block; font-size: 15px; margin-top: 3px;}@media (max-width: 900px){.js-creative-form-page{padding: 0;}.js-creative-form-sheet{min-height: auto; box-shadow: none;}.js-form-logo-area{min-height: 78px;}.js-form-logo-img{width: 285px;}.js-form-hero{grid-template-columns: 1fr; gap: 14px; padding: 22px;}.js-form-hero h1{font-size: 28px;}.js-form-body{padding: 22px 18px 0;}.js-form-objective{font-size: 15px;}.js-form-grid, .js-form-service-grid, .js-form-urgency-grid, .js-form-signature-grid, .js-form-stepper{grid-template-columns: 1fr;}.js-form-field-full{grid-column: auto;}.js-form-success-head, .js-form-success-grid{grid-template-columns: 1fr;}.js-portal-hero, .js-portal-kpi-grid, .js-portal-request-card, .js-portal-detail-grid{grid-template-columns: 1fr;}.js-portal-request-side{align-items: start; text-align: left;}}.js-creative-form-page, .js-creative-portal{--palace-navy: #07152d; --palace-navy-2: #102653; --palace-gold: #b7812f; --palace-gold-2: #e6c47a; --palace-cream: #fffaf0; --palace-line: #ead8b8; --palace-muted: #64718a; --palace-surface: #ffffff; font-family: "Poppins", "Montserrat", "Arial", sans-serif;}.js-creative-form-page{min-height: 100vh; background: radial-gradient(circle at 8% 8%, rgba(230, 196, 122, 0.22), transparent 28%), radial-gradient(circle at 92% 0%, rgba(7, 21, 45, 0.10), transparent 30%), linear-gradient(135deg, #f8fafc 0%, #fffaf0 100%); color: var(--palace-navy); padding: clamp(18px, 3vw, 38px) 0;}.js-creative-form-sheet, .js-creative-success{border: 1px solid rgba(183, 129, 47, 0.22); border-radius: 30px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 26px 80px rgba(7, 21, 45, 0.12);}.js-creative-form-sheet::before{content: "PALACE"; left: auto; right: -74px; top: 168px; font-size: clamp(88px, 16vw, 210px); letter-spacing: 0.18em; color: rgba(183, 129, 47, 0.045); transform: rotate(90deg);}.js-form-logo-area{min-height: 96px; background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);}.js-form-logo-img{width: min(330px, 76vw); max-height: 70px; object-fit: contain;}.js-form-hero, .js-portal-hero{background: radial-gradient(circle at 100% 0%, rgba(230, 196, 122, 0.18), transparent 32%), linear-gradient(135deg, var(--palace-navy) 0%, var(--palace-navy-2) 100%) !important; border: 1px solid rgba(230, 196, 122, 0.24); color: #ffffff;}.js-form-hero{grid-template-columns: minmax(0, 1fr) auto; border-radius: 0 0 28px 28px; padding: clamp(24px, 4vw, 42px);}.js-form-hero h1, .js-portal-hero h1{color: #ffffff; letter-spacing: -0.04em; text-transform: none;}.js-form-orange-label, .js-portal-ref, .js-portal-kicker{background: rgba(230, 196, 122, 0.16) !important; border: 1px solid rgba(230, 196, 122, 0.34); color: var(--palace-gold-2) !important; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em;}.js-form-internal-box{border-color: rgba(230, 196, 122, 0.28); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);}.js-form-body{padding: clamp(22px, 4vw, 42px);}.js-form-objective, .js-form-section, .js-portal-kpi, .js-portal-request-card, .js-portal-detail-grid > div, .js-form-success-item{border: 1px solid rgba(183, 129, 47, 0.18) !important; background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important; border-radius: 20px !important; box-shadow: 0 16px 38px rgba(7, 21, 45, 0.06);}.js-form-objective{color: var(--palace-muted); line-height: 1.55; padding: 18px 20px;}.js-form-objective strong, .js-form-section-title h2, .js-form-sla-title, .js-portal-kpi strong, .js-portal-request-card h3, .js-portal-detail-grid strong{color: var(--palace-navy) !important;}.js-form-step-tab, .js-form-option, .js-form-field .form-control, .js-form-field .form-select{border-color: rgba(183, 129, 47, 0.26) !important; border-radius: 14px !important;}.js-form-step-tab{background: #fffaf0; color: #8f641e;}.js-form-step-tab.is-active, .js-form-number, .btn-primary, .js-form-submit, .js-form-next, .js-portal-primary{border-color: var(--palace-navy) !important; background: var(--palace-navy) !important; color: #ffffff !important; box-shadow: 0 14px 30px rgba(7, 21, 45, 0.18);}.js-form-step-tab.is-complete, .js-form-option:has(input:checked){border-color: var(--palace-gold) !important; background: #fff7e8 !important; color: #8f641e !important;}.js-form-field label, .js-form-field-label, .js-portal-kpi span, .js-portal-meta, .js-portal-request-side small{color: var(--palace-muted) !important;}.js-form-field .form-control:focus, .js-form-field .form-select:focus{border-color: var(--palace-gold) !important; box-shadow: 0 0 0 4px rgba(183, 129, 47, 0.14) !important;}.js-form-secondary, .js-portal-badge, .js-portal-sla{border: 1px solid rgba(183, 129, 47, 0.28) !important; background: #fffaf0 !important; color: #8f641e !important; border-radius: 999px !important;}.js-creative-portal{width: min(1180px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 40px); color: var(--palace-navy);}.js-portal-hero{border-radius: 28px; padding: clamp(24px, 4vw, 42px); box-shadow: 0 24px 70px rgba(7, 21, 45, 0.14);}.js-portal-kpi-grid{gap: 14px; margin-top: 18px;}.js-portal-request-list{display: grid; gap: 14px; margin-top: 18px;}.js-portal-request-card{transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;}.js-portal-request-card:hover{border-color: rgba(183, 129, 47, 0.40) !important; box-shadow: 0 22px 58px rgba(7, 21, 45, 0.10); transform: translateY(-2px);}@media (max-width: 768px){.js-form-hero, .js-portal-hero{grid-template-columns: 1fr; border-radius: 22px;}.js-form-stepper, .js-form-service-grid, .js-form-urgency-grid, .js-form-grid, .js-form-signature-grid{grid-template-columns: 1fr !important;}.js-creative-form-sheet, .js-creative-success{width: min(100% - 20px, 920px); border-radius: 24px;}}.js-creative-request-form .js-form-submit, .js-creative-request-form:not([data-current-step="5"]) .js-form-submit{display: none !important;}.js-creative-request-form[data-current-step="5"] .js-form-submit{display: inline-flex !important;}.js-creative-request-form[data-current-step="5"] .js-form-next{display: none !important;}.js-creative-request-form:not([data-current-step="5"]) .js-form-next{display: inline-flex !important;}.js-creative-portal{inline-size: min(100%, 1080px); margin-inline: auto; padding: clamp(18px, 3vw, 36px);}.js-creative-portal .js-portal-hero{display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 auto 18px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; overflow: hidden;}.js-creative-portal .js-portal-hero h1{max-inline-size: 760px; margin: 8px 0 0; font-size: clamp(28px, 4vw, 46px); line-height: 0.98; overflow-wrap: anywhere;}.js-creative-portal .js-portal-detail-grid{grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 0 auto 18px; padding: 0; border: 0; background: transparent !important; box-shadow: none;}.js-creative-portal .js-portal-detail-grid > div{min-block-size: 112px; padding: 18px; overflow: hidden;}.js-creative-portal .js-portal-detail-grid strong{line-height: 1.25; overflow-wrap: anywhere;}.js-portal-chatter-panel{background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(183, 129, 47, 0.18); border-radius: 26px; box-shadow: 0 24px 70px rgba(7, 21, 45, 0.10); padding: clamp(18px, 3vw, 28px);}.js-portal-chatter-header{display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr); gap: 18px; align-items: end; margin-bottom: 18px;}.js-portal-chatter-header span{color: var(--palace-gold); display: inline-flex; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;}.js-portal-chatter-header h2{color: var(--palace-navy); font-size: clamp(22px, 3vw, 32px); line-height: 1.04; margin: 6px 0 0;}.js-portal-chatter-header p{color: var(--palace-muted); margin: 0;}.js-portal-message-list{display: grid; gap: 12px; margin-bottom: 16px; max-block-size: 420px; overflow: auto; padding-right: 4px;}.js-portal-message{display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start;}.js-portal-message.is-mine{grid-template-columns: minmax(0, 1fr) 42px;}.js-portal-message.is-mine .js-portal-message-avatar{grid-column: 2; grid-row: 1;}.js-portal-message.is-mine .js-portal-message-content{grid-column: 1; background: linear-gradient(135deg, #fff8ea 0%, #ffffff 100%); border-color: rgba(183, 129, 47, 0.28);}.js-portal-message-avatar{align-items: center; background: linear-gradient(135deg, var(--palace-navy) 0%, var(--palace-navy-2) 100%); border-radius: 50%; color: var(--palace-gold-2); display: inline-flex; font-weight: 900; height: 42px; justify-content: center; width: 42px;}.js-portal-message-content, .js-portal-message-empty{background: #ffffff; border: 1px solid rgba(183, 129, 47, 0.16); border-radius: 18px; padding: 14px 16px;}.js-portal-message-meta{align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;}.js-portal-message-meta strong{color: var(--palace-navy);}.js-portal-message-meta span, .js-portal-message-empty{color: var(--palace-muted); font-size: 13px;}.js-portal-message-body{color: #27344f; line-height: 1.55; overflow-wrap: anywhere;}.js-portal-message-body p:last-child{margin-bottom: 0;}.js-portal-message-form{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end;}.js-portal-message-form textarea{border: 1px solid rgba(183, 129, 47, 0.25); border-radius: 18px; min-height: 88px; padding: 14px 16px; resize: vertical;}.js-portal-message-form textarea:focus{border-color: var(--palace-gold); box-shadow: 0 0 0 4px rgba(183, 129, 47, 0.12); outline: none;}.js-portal-message-form button{background: linear-gradient(135deg, var(--palace-navy) 0%, var(--palace-navy-2) 100%); border: 0; border-radius: 16px; color: #ffffff; font-weight: 800; min-height: 52px; padding: 0 22px;}.js-portal-message-form button:hover{filter: brightness(1.08);}@media (max-width: 1100px){.js-creative-portal{padding-inline: 18px;}.js-creative-portal .js-portal-detail-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}@media (max-width: 720px){.js-creative-portal{padding: 14px;}.js-creative-portal .js-portal-hero, .js-portal-chatter-header, .js-portal-message-form{grid-template-columns: 1fr;}.js-creative-portal .js-portal-hero{border-radius: 22px;}.js-creative-portal .js-portal-detail-grid{grid-template-columns: 1fr;}.js-portal-message.is-mine, .js-portal-message{grid-template-columns: 36px minmax(0, 1fr);}.js-portal-message.is-mine .js-portal-message-avatar, .js-portal-message.is-mine .js-portal-message-content{grid-column: auto; grid-row: auto;}.js-portal-message-avatar{height: 36px; width: 36px;}.js-portal-message-form button{width: 100%;}}