/*! jQuery UI - v1.11.4 - 2015-10-06
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, accordion.css, button.css, dialog.css, progressbar.css, tabs.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=2191c0&bgTextureHeader=gloss_wave&bgImgOpacityHeader=75&borderColorHeader=4297d7&fcHeader=eaf5f7&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=inset_hard&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=0078ae&bgColorDefault=0078ae&bgTextureDefault=glass&bgImgOpacityDefault=45&borderColorDefault=77d5f7&fcDefault=ffffff&iconColorDefault=e0fdff&bgColorHover=79c9ec&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=448dae&fcHover=026890&iconColorHover=056b93&bgColorActive=6eac2c&bgTextureActive=gloss_wave&bgImgOpacityActive=50&borderColorActive=acdd4a&fcActive=ffffff&iconColorActive=f5e175&bgColorHighlight=f8da4e&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcd113&fcHighlight=915608&iconColorHighlight=f7a50d&bgColorError=e14f1c&bgTextureError=gloss_wave&bgImgOpacityError=45&borderColorError=cd0a0a&fcError=ffffff&iconColorError=fcd113&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=75&opacityOverlay=30&bgColorShadow=999999&bgTextureShadow=flat&bgImgOpacityShadow=55&opacityShadow=45&thicknessShadow=0px&offsetTopShadow=5px&offsetLeftShadow=5px&cornerRadiusShadow=5px
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin:2px 0 0 0;padding:.5em .5em .5em .7em;min-height:0;font-size:100%}.ui-accordion .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-icons .ui-accordion-icons{padding-left:2.2em}.ui-accordion .ui-accordion-header .ui-accordion-header-icon{position:absolute;left:.5em;top:50%;margin-top:-8px}.ui-accordion .ui-accordion-content{padding:1em 2.2em;border-top:0;overflow:auto}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-progressbar{height:2em;text-align:left;overflow:hidden}.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%}.ui-progressbar .ui-progressbar-overlay{background:url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");height:100%;filter:alpha(opacity=25);opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-tabs{position:relative;padding:.2em}.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom-width:0;padding:0;white-space:nowrap}.ui-tabs .ui-tabs-nav .ui-tabs-anchor{float:left;padding:.5em 1em;text-decoration:none}.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{cursor:text}.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{cursor:pointer}.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1.4em;background:none}.ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #a6c9e2;background:#fcfdfd url("images/ui-bg_inset-hard_100_fcfdfd_1x100.png") 50% bottom repeat-x;color:#222}.ui-widget-content a{color:#222}.ui-widget-header{border:1px solid #4297d7;background:#2191c0 url("images/ui-bg_gloss-wave_75_2191c0_500x100.png") 50% 50% repeat-x;color:#eaf5f7;font-weight:bold}.ui-widget-header a{color:#eaf5f7}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #77d5f7;background:#0078ae url("images/ui-bg_glass_45_0078ae_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#fff}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#fff;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #448dae;background:#79c9ec url("images/ui-bg_glass_75_79c9ec_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#026890}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#026890;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #acdd4a;background:#6eac2c url("images/ui-bg_gloss-wave_50_6eac2c_500x100.png") 50% 50% repeat-x;font-weight:normal;color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcd113;background:#f8da4e url("images/ui-bg_glass_55_f8da4e_1x400.png") 50% 50% repeat-x;color:#915608}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#915608}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#e14f1c url("images/ui-bg_gloss-wave_45_e14f1c_500x100.png") 50% top repeat-x;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_0078ae_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_d8e7f3_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_e0fdff_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_056b93_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_f5e175_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_f7a50d_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_fcd113_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:5px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:5px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:5px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:5px}.ui-widget-overlay{background:#aaa url("images/ui-bg_flat_75_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:5px 0 0 5px;padding:0;background:#999 url("images/ui-bg_flat_55_999999_40x100.png") 50% 50% repeat-x;opacity:.45;filter:Alpha(Opacity=45);border-radius:5px}
@font-face{
    font-family: "Effra App H3";
    src: url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_Rg.ttf');
}
html {
    height: 100%;
    box-sizing: border-box;
}
* {
    font-family: "Effra App H3";
    /*letter-spacing:0.5px;*/
}
option {/* Firefox in windows need an local installed font */
    font-family: "Effra App H3", sans-serif;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

/* begin extra overwrites to fit with website */
.h3-content p {
    font-size: 14px;
    margin: 0;
    padding: 0;
    padding-bottom: 11px;
}
.h3-content form { 
    margin: 0px;
    padding: 0px;
}

.h3-content td p {
    margin: 0;
    padding: 0;
    padding-bottom: 11px;
}
.h3-content td td p {
    margin: 0;
    padding: 0;
}

.h3-content h1,
.h3-content td {
    font-size: 14px;
}
.h3-content ul,
.h3-content li {
    padding: 0;
    margin: 0;
    list-style-image: url(/iface/images/bullet.gif);
    margin-left: 10px;
}
.h3-content ul,
.h3-content ol,
.h3-content dl {
    position: relative;
}
.h3-content hr {
    display: none;
}
/* end extra overwrites to fit with website */

div#dcenter {
    width: 850px;
    margin: 0 auto;
    padding: 0;
}
#rootpg H1 {
    background: none;
    background-color: #197cb9;
    font-family:  verdana, arial, helvetica, sans-serif;
    font-size: 13px;
    margin: 0px;
    margin-bottom: 5px;
    padding: 5px;
    color:#fff;
    padding-right: 0px;
    border-bottom: 0px;
}

#rootpg H2 {
    background: none;
    background-color: #FF9000;
    font-family:  verdana, arial, helvetica, sans-serif;
    font-size: 13px;
    margin: 0px;
    margin-bottom: 5px;
    padding: 5px;
    color:#FFF;
    padding-right: 0px;
    border-bottom: 0px;
}
#tld_std, #tld_all {
    background: transparent;
    border: 0px;
    height: 11px;
    width: 11px;
}
.tblnoline * TD {
   border:0px;
}
#borderblue { /* DEPRECATED / REPLACED BY CLASS - IN QUEUE TO REMOVE */
    border: #3561aa solid 1px;
}

.borderblue {
    border: #3561aa solid 1px;
}

.bulletlist2 {
    margin-top: 0px;
    list-style-image: url(/iface/images/bullet.gif);
    line-height: 130%;
}
.no_style {
    display: none;
}
/********************** TOM MEN&#65533; ********************/

#header{
    /*height:120px;*/
    margin:0;
    padding:0;
    background: #3461aa; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM0NjFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTdjYjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #3461aa 0%, #197cb9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3461aa), color-stop(100%,#197cb9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #3461aa 0%,#197cb9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #3461aa 0%,#197cb9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #3461aa 0%,#197cb9 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #3461aa 0%,#197cb9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3461aa', endColorstr='#197cb9',GradientType=0 ); /* IE6-8 */
    border-bottom:2px solid #ff9900;
}

.contenttable td {
    border-bottom: 1px solid #ffac40;
}

.contenttable th {
    border-bottom: 1px solid #ffac40;
    border-top: 1px solid #ffac40;
    font-weight: bold;
    background: #DDE8FF;
}

/*** HOST3 ***/

.orange { color: #FF9000; }
.orange2 { color: #C06700; }
.blue { color: #197cb9; }
.blue2 { color: #3366CC; }
.white { color: white; }
.black { color: black; }
.red { color: red }
.green { color: green }
.grey { color: #666 }

.clear {
   clear: both;
}

#ZE-RR-Table .asc{background:url(/images/sort-asc.png) no-repeat left center;padding-left:12px;}
#ZE-RR-Table .desc{background:url(/images/sort-desc.png) no-repeat left center;padding-left:12px;}
.error{font-size:0.9em;color:red}

#product-tabs .tab {
    background-color:silver;
    border:1px solid black;
    cursor:pointer;
    text-align:center;
}
#product-tabs .tab.hover {
    background-color:#bed3ff;
}
#product-tabs .tab.selected {
    background-color:white;
    font-weight:bold;
    border-bottom-color:white;
}
#product-tab-content {
    border:1px solid black;
    border-top-width:0;
}
#product-tab-content .product th {text-align:center}

select.monospace, select.monospace option {font-family:monospace;background-image:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);}

form.dt-lookup-form td.dt-tld-section {border-top: 1px solid #a69348; font-size:0.75em !important; color:#2e6e9e; text-align:right}
form.dt-lookup-form td.dt-tld-section {border-top: 1px solid whitesmoke; font-size:0.75em !important; color:#2e6e9e; text-align:right !important}
form.dt-lookup-form td.dt-tld-section {border-top: 1px solid #EFE9D1; font-size:0.75em !important; color:#2e6e9e; text-align:right !important}
form.dt-lookup-form tbody.dt-lookup-group th {border-top: 1px solid lightgrey;}
form.dt-lookup-form tbody.dt-lookup-group span {font-weight:normal !important;}
form.dt-lookup-form tbody.dt-lookup-group a {font-weight:bold !important; float:left}
form.dt-lookup-form tbody.dt-lookup-group div a {font-weight:normal !important; margin-left:1em; float:none}
form.dt-lookup-form tbody.dt-lookup-tlds label {white-space:nowrap;}
form.dt-lookup-form table.dt-lookup-tlds thead td {text-align:right !important}
form.dt-lookup-form table.dt-lookup-tlds tfoot td {text-align:center !important; border-top:1px solid lightgrey}
form.dt-lookup-form table.dt-lookup-tlds thead a, form.dt-lookup-form table.dt-lookup-tlds tfoot a {margin-left:1em}

@font-face{font-family:'Share';font-style:normal;font-weight:400;src:url('../font/share-regular-webfont-webfont.eot');src:url('../font/share-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),url('../font/share-regular-webfont-webfont.woff') format('woff'),url('../font/share-regular-webfont-webfont.ttf') format('truetype')}
@font-face{font-family:'Share';font-style:italic;font-weight:400;src:url('../font/share-italic-webfont-webfont.eot');src:url('../font/share-italic-webfont-webfont.eot?#iefix') format('embedded-opentype'),url('../font/share-italic-webfont-webfont.woff') format('woff'),url('../font/share-italic-webfont-webfont.ttf') format('truetype')}
@font-face{font-family:'Share';font-style:normal;font-weight:500;src:url('../font/share-bold-webfont-webfont.eot');src:url('../font/share-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'),url('../font/share-bold-webfont-webfont.woff') format('woff'),url('../font/share-bold-webfont-webfont.ttf') format('truetype')}
@font-face{font-family:'Share';font-style:normal;font-weight:bold;src:url('../font/share-bold-webfont-webfont.eot');src:url('../font/share-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'),url('../font/share-bold-webfont-webfont.woff') format('woff'),url('../font/share-bold-webfont-webfont.ttf') format('truetype')}
@font-face{font-family:'Glyphicons Halflings';src:url('../font/glyphicons-halflings-regular.eot');src:url('../font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../font/glyphicons-halflings-regular.woff') format('woff'),url('../font/glyphicons-halflings-regular.ttf') format('truetype'),url('../font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')}


.agb {
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 13px;
    padding: 0px;
    text-align: center;
    background-color: #fafafa;
}
.message-info {
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

table.box-info {
    border-collapse: collapse;
    border: 1px solid #cdcdcd;
    width: 100%;
    margin: .5em 0;
    font-size: 1.4em;
}
table.box-info th {
    background: #197cb9 none repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #3461aa 0%, #197cb9 100%) repeat scroll 0 0;
    padding: .3em .8em;
    color: white;
    text-align: center;
    font-weight: bold;
    line-height: 1.3;
}
table.box-info td {
    font-size: 0.7em;
    padding: .3em .8em;
    text-align: left;
}

table.box-info tr:last-child td div {
    float: left;
}

@media (min-width: 30em) {
    table.box-info tr:last-child td div {
        width: 50%;
    }
}

/*selected_domains.html - start*/
.domain-spaced {
    letter-spacing: -0.11em;
    font-weight: bold;
}
fieldset.domain-item * {
    white-space: nowrap;
}
fieldset.domain-item {
    background: #f0f0f0;
    border: none;
}
fieldset.domain-item legend.domain-spaced {
    padding: .3em;
    white-space: normal;
    font-size: 1.1em;
}
fieldset.domain-item fieldset.flex-item:nth-child(1) div.label-radiobox,
fieldset.domain-item fieldset.flex-item:nth-child(2) div.label-radiobox {
    display: block;
}
@media all and (min-width: 18em) {
    fieldset.domain-item fieldset.flex-item:nth-child(2) div.label-radiobox {
        display: inline;
    }
}
@media all and (min-width: 25em) {
    fieldset.domain-item div.flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
    fieldset.domain-item fieldset.flex-item {
        -webkit-order: 2;
        order: 2;
        -webkit-flex: 2 1 0%;
        flex: 2 1 0%;
        -webkit-align-self: auto;
        align-self: auto;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(1) {
        -webkit-order: 0;
        order: 0;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(3) {
        -webkit-flex: 1 2 0%;
        flex: 1 2 0%;
        -webkit-order: 1;
        order: 1;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(2) div.label-radiobox {
        display: block;
    }
}
@media all and (min-width: 27em) {
    fieldset.domain-item fieldset.flex-item:nth-child(1) div.label-radiobox {
        display: inline;
    }
}
@media all and (min-width: 30em) {
    fieldset.domain-item fieldset.flex-item:nth-child(2) div.label-radiobox {
        display: inline;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(3) {
        -webkit-order: 1;
        order: 1;
    }
}
@media all and (min-width: 45em) {
    fieldset.domain-item div.flex-container {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-content: stretch;
        align-content: stretch;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(1) {
        -webkit-flex-basis: 80%;
        flex-basis: 80%;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(3) {
        -webkit-flex-grow: 0;
        flex-grow: 0;
        -webkit-order: 3;
        order: 3;
        text-align: right;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(1) div.label-radiobox,
    fieldset.domain-item fieldset.flex-item:nth-child(2) div.label-radiobox {
        display: block;
    }
    fieldset.domain-item fieldset.flex-item:nth-child(1) {
        -webkit-flex-basis: 0%;
        flex-basis: 0%;
    }
}
@media all and (min-width: 48em) {
    fieldset.domain-item fieldset.flex-item:nth-child(1) div.label-radiobox {
        display: inline;
    }
}
/*selected_domains.html - end*/

#domain-lookup_form.flex-container {
    padding: .5em; 
    text-align: left; 
    font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular; 
    font-size: 14px;
}
#domain-lookup_form.flex-container .flex-item {
    background-color: #eaf2fe; 
    border: 1px solid #000000;
    margin: .5em auto;
    max-width: 33.35em;
    width: 100%;
}
#domain-lookup_form.flex-container .flex-item div {
    padding: .5em;
}
#domain-lookup_form.flex-container .flex-item div:first-child {
    border-bottom: 1px solid #000000;
}
@media screen and (min-width: 54.5em) {
    #domain-lookup_form.flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
    }
    #domain-lookup_form.flex-container .flex-item {
        -webkit-flex: 1;
        flex: 1;
    }
}

#domain-claims {
    border: 1px solid #aaaaaa;
    padding: .5em;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

#domain-claims fieldset {
    border: 1px solid #f0f0f0;
    padding-top: 0;
    margin: .5em;
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 13px;
}

#domain-claims .flex-item {
    vertical-align: top;
    padding: .5em;
    margin-bottom: 0.5em;
}

#domain-claims .flex-item.claim-mark {
    min-width: 210px;
}

@media screen and (min-width: 34em) {
    #domain-claims {
        -ms-hyphens: manual;
        -webkit-hyphens: manual;
        -moz-hyphens: manual;
        hyphens: manual;
    }
    #domain-claims .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    #domain-claims .flex-item {
        -webkit-flex: 1;
        flex: 1;
    }
    #domain-claims .flex-item.claim-mark {
        -webkit-flex: 2;
        flex: 2;
    }
}

@media screen and (min-width: 50em) {
    #domain-claims .flex-container {
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    #domain-claims .flex-item {
        margin-bottom: 0;
    }
}

.t-data .t-head,
.t-data .t-desc,
.t-data .t-label,
.t-data .t-input {
    font-size: 1.1em;
    padding: 3px 4px;
}
.t-data .t-head,
.t-data .t-desc,
.t-data .t-label {
    text-align: left;
}
.t-data .t-iact {
    font-size: .875em;
    padding: 3px 4px;
    text-align: right;
}
.t-data .t-label,
.t-data .t-input {
    vertical-align: top;
    font-weight: normal;
}
.t-data .t-head,
.t-data .t-required .t-label label {
    font-weight: bold;
}
.t-data .t-head {
    background: #bed3ff;
}
.t-data .t-input select[name],
.t-data .t-input textarea[name],
.t-data .t-input input[name] {
    text-align:left;
    width: 100%;
}
.t-data .t-input input[type=checkbox],
.t-data .t-input input[type=radio] {
    width: auto;
}
@media all and (max-width: 30em) {
    .t-data .t-head,
    .t-data .t-desc,
    .t-data .t-iact,
    .t-data .t-label,
    .t-data .t-input,
    .t-data .t-error {
        white-space: normal;
        display: block;
    }
    .t-data .t-head,
    .t-data .t-desc {
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    .t-data .t-label {
        margin-top: 10px;
    }
    .t-data .t-input {
        text-align:right;
    }
}
@media all and (max-width: 35em) {
    .t-data .t-label {
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
}

.user-data .flex-container {
    display:-webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}
.user-data .flex-item {
    -webkit-flex: 1 0 28em;
    flex: 1 0 28em;/*edit 26em, register 28em*/
    display: inline-block;
    vertical-align: top;
    float:left;
}
.user-data .flex-item table.t-data {
    width: 100%;
    text-align: left;
    float: left;
}
.user-data .flex-item table.t-data colgroup col {
    width: 18em;
}

@media all and (min-width: 35em) {
    .user-data .flex-item {
        padding: 0 5px;
    }
}

@media all and (max-width: 30em) {
    .user-data .flex-container {
        display: inline-block;
    }
    .user-data .flex-item {
        width: 100%;
    }
    .user-data .flex-item table.t-data colgroup col {
        width: auto !important;
    }
}

#order_statusbar {
    clear: both;
    min-height: 84px;
    margin: 0 auto;
}
#order_statusbar ul.flex-item {/*steps*/
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    text-align: left;
    min-height: 31px;
    clear: both;
    margin: 0 auto;
    padding: 0;
}
#order_statusbar ul.flex-item li {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    display: block;
    min-height: 17px;
    padding: 5px 5px 5px 25px;
    border: 1px solid #000000;
    margin: 0 -1px -1px 0;
    white-space: nowrap;
    list-style: none;
}
#order_statusbar .flex-item:last-child {/*message*/
    background-color: #ffffff;
    padding: 5px;
    border: 1px solid #000000;
    text-align: left;
    clear: both;
    margin: 0 auto;
}
@media all and (max-width: 55.5em) {
    #order_statusbar.flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap;
        -webkit-justify-content: space-between;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }
    #order_statusbar .flex-item {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }
    #order_statusbar ul.flex-item {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-basis: 20%;
        flex-basis: 20%;
        margin-left: -1px;
    }
}
#order_statusbar .status-current {
    background: #ffe3bf url(/images/order_process_current.gif) no-repeat scroll left+5px center;
    font-weight: bold;
}
#order_statusbar .status-done {
    background: #f0fff0 url(/images/order_process_done.gif) no-repeat scroll left+5px center;
}
#order_statusbar .status-notdone {
    background: #f0f0f0 url(/images/order_process_notdone.gif) no-repeat scroll left+5px center;
}

#dt-cookie-accept {
    position:fixed;
    bottom:0px;
    width:100%;
    color:#fff;
    background:rgba(25,124,185,.9);
    border-top:#FF9000 solid 4px;
    padding:3px 0px 10px;
    font-size:.9em;
    z-index: 10000;
    text-align:center;
}
#dt-cookie-accept > div {
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-flex-flow:row wrap;
    flex-flow:row wrap;
}
#dt-cookie-accept div div {
    padding:0.3em;
    float:left;
    -webkit-flex:0 1 auto;
    flex:0 1 auto;
}
#dt-cookie-accept button {
    font-size:inherit;
}
@media all and (min-width: 35em) {
    #dt-cookie-accept {
        padding-top:10px;
        font-size:1em;
    }
    #dt-cookie-accept div div {
        padding:0.5em;
    }
}
@media all and (min-width: 649px) {
    #dt-cookie-accept > div {
        width: -moz-calc(100% - 140px);
        width: -webkit-calc(100% - 140px);
        width: -o-calc(100% - 140px);
        width: calc(100% - 140px);
    }
}
@media print {
    div[id^=trustbadge],
    div[id^=tsbadge],
    #dt-cookie-accept {display:none !important}
}

/* */

#content {
    font-size: 16px;
    /*font-size: 12.1px;*/
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
}


.login-form {
    text-align: center;
}
.login-form .flex-container {
    display: inline-block;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-flex-justify-content: center;
    justify-content: center;
}
.login-form .flex-item {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}
.login-form .flex-item a,
.login-form .flex-item input {
    text-align: left;
}
.login-form .flex-item a {
    display: inline-block;
    background: transparent no-repeat 18px center;
    background-size: 30px;
    vertical-align: middle;
    min-height: 50px;
    padding: 5px 5px 5px 60px;
    box-sizing: padding-box;
    margin-top: 10px;
}

#customer-logout .flex-item a {
    padding: 10px 5px 0 53px;
    margin-top: 0;
}
#customer-main .flex-item:nth-child(2) {
    -webkit-order: 1;
    order: 1;
}

@media (min-width: 14em) {
    .login-form .flex-item a {
        min-width: 18em;
    }
}
@media (min-width: 34em) {
    #customer-main .flex-item {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }

    .login-form .flex-item {
        -webkit-flex-basis: 1%;
        flex-basis: 1%;
    }
    .login-form .flex-item:first-child {
        flex-basis: 100%;
        min-width: 100%;
    }
    .login-form .flex-item a {
        min-width: none;
    }
}
@media (min-width: 50em) {
    .login-form .flex-container {
        text-align: center;
        display: inline-block;
        width: 45em;
    }
    .login-form .flex-item {
        display: inline-block;
        min-width: 20em;
        max-width: 20em;
    }
    .login-form .flex-item:first-child {
        float:left;/*important that both (password and register) are at left side of login*/
        min-width: 22em;
    }
    .login-form .flex-item a {
        min-width: 18em;
    }
}


/* ============================================================================
   modern.css -- Domaintechnik Kundenzone central design system
   ----------------------------------------------------------------------------
   Single source for all "modern" styles that used to live as {literal}<style>
   blocks inside the Smarty templates. Loaded last via iface/css/user_logged.php
   and iface/css/user_normal.php so it wins same-specificity conflicts against
   style.css / user_normal.css / user_logged.css.

   Contents
     1. Tokens
     2. Base (#content text, links, headings, hr)
     3. Form controls (global input/select/textarea/button skins)
     4. Action links (.btn kit, .dtn-btn pill link)
     5. Bars (.pagination, filter bars, .message-info)
     6. Cards and panels (.dtn-card, .dtn-panel, page card hooks)
     7. Tables (.dtn-table canon table, light card tables)
     8. Form skin (.t-data / t-head / t-desc / t-label / t-input / t-error)
     9. Sign-up layer (.reg-*)
    10. Plan selection cards (.pkg-*)
    11. Notice card (.dtn-notice)
    12. Small form card (.dtn-form-card)
    13. Order stepper (.dtn-stepper)
    14. Domain manager (filter bar, .domain-table grid, pagination)
    15. Invoice list
    16. TLD landing/application pages (shared kit + per-page bits)
    17. Selected-domains order page (dtn-* order UI)
    18. Transfer pages
    19. Page sections (everything page-specific, scoped per page)
   ============================================================================ */

/* ============================================================
   0. Effra Medium (500)
   ------------------------------------------------------------
   Section "22. Typography" already registers the 600/700 cuts;
   the website's UI weight for links, buttons and titles is 500
   (Effra_A_Md), so register that cut too for both family names
   (style.css uses "Effra App", user_normal.css "Effra App H3").
   ============================================================ */
@font-face{
  font-family:"Effra App";
  font-style:normal;
  font-weight:500;
  font-display:fallback;
  src:url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_Md.ttf') format('truetype');
}
@font-face{
  font-family:"Effra App H3";
  font-style:normal;
  font-weight:500;
  font-display:fallback;
  src:url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_Md.ttf') format('truetype');
}

/* ============================================================
   1. Tokens
   ============================================================ */
:root{
  /* dtk-* = ported dt design-system tokens (the plain dt- prefix collides
     with app classes like dt-tld/dt-error, so the design system uses dtk-) */
  --dtk-primary:#0F65D5;
  --dtk-primary-hover:#0A4FA8;
  --dtk-primary-active:#083E85;
  --dtk-primary-weak:#EAF2FE;
  --dtk-primary-soft:#F4F8FE;
  --dtk-accent:#F7832D;
  --dtk-accent-hover:#E06E17;
  --dtk-accent-weak:#FEF1E6;
  --dtk-ink:#333336;
  --dtk-body:#46464A;
  --dtk-muted:#6E6F6F;
  --dtk-bg:#FDFDFD;
  --dtk-page:#FDFDFD;   /* page behind the white cards (website body #fdfdfd) */
  --dtk-elev:#F8FAFC;   /* elevated fill: hovered headers etc. (website --dt-bg-elev) */
  --dtk-panel:#F4F6F9;
  --dtk-surface:#FFFFFF;
  --dtk-zebra:#F7F9FC;
  --dtk-border:#E8EAEE;         /* website --dt-line (card hairlines) */
  --dtk-border-strong:#DADEE4;  /* website --dt-line-2 (control outlines) */
  --dtk-border-soft:#EDF1F6;
  --dtk-input-border:#DADEE4;
  --dtk-success:#1F9D57;
  --dtk-success-weak:#E9F7EF;
  --dtk-error:#DC2B45;
  --dtk-error-weak:#FDECEE;
  --dtk-warning:#F7832D;
  --dtk-warning-weak:#FEF1E6;
  --dtk-info:#0F65D5;
  --dtk-info-weak:#EAF2FE;
  --dtk-disabled-bg:#EEF1F5;
  --dtk-disabled-ink:#A6AEBB;
  --dtk-r-sm:8px;
  --dtk-r-md:12px;
  --dtk-r-lg:16px;
  --dtk-r-xl:22px;
  --dtk-r-pill:999px;
  --dtk-shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --dtk-shadow-sm:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --dtk-shadow-md:0 6px 18px rgba(16,24,40,.10);
  --dtk-shadow-lg:0 16px 40px rgba(16,24,40,.16);
  --dtk-focus:0 0 0 3px rgba(15,101,213,.28);

  /* legacy dtn-* aliases -- every existing var(--dtn-*) reference now
     resolves to the dtk system */
  --dtn-primary:var(--dtk-primary);
  --dtn-primary-hover:var(--dtk-primary-hover);
  --dtn-selected-bg:var(--dtk-primary-weak);
  --dtn-hover-tint:var(--dtk-primary-soft);
  --dtn-text:var(--dtk-ink);
  --dtn-muted:var(--dtk-muted);
  --dtn-line:var(--dtk-border);
  --dtn-line-strong:var(--dtk-border-strong);
  --dtn-line-soft:var(--dtk-border-soft);
  --dtn-row-line:var(--dtk-border-soft);
  --dtn-zebra:var(--dtk-zebra);
  --dtn-head:var(--dtk-panel);
  --dtn-tint:var(--dtk-panel);
  --dtn-bar:var(--dtk-panel);
  --dtn-input-border:var(--dtk-input-border);
  --dtn-error:var(--dtk-error);
  --dtn-error-dark:#B42318;
  --dtn-disabled:var(--dtk-disabled-ink);
  --dtn-radius-card:var(--dtk-r-lg);
  --dtn-radius-table:var(--dtk-r-lg);
  --dtn-radius-input:var(--dtk-r-md);
  --dtn-radius-pill:var(--dtk-r-pill);
  --dtn-shadow:var(--dtk-shadow-xs);
  --dtn-focus-ring:var(--dtk-focus);
}

/* ============================================================
   2. Base
   ============================================================ */
#content{ color:#333336; }
/* long domain names (IDN, deep subdomains) must always be able to break;
   word-break/overflow-wrap inherit, so this reaches every domain rendered
   anywhere in the content area (tables, headings, cards, lookup widget).
   word-wrap is the legacy alias of overflow-wrap for old engines. */
#content{
  word-break:break-word;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
/* website link feel: accent color, medium weight, offset underline */
#content a{
  color:var(--dtk-primary);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
}
#content a:hover{ color:var(--dtk-primary-hover); }
#content h2{ font-size:24px; font-weight:600; letter-spacing:.3px; color:#333336; }
#content h1{ font-size:24px; font-weight:600; letter-spacing:.3px; color:#333336; }
#content hr{ border:none; height:1px; background:var(--dtk-border); margin:1.6em 0; }

/* ============================================================
   3. Form controls -- global modern skin
   ============================================================ */
#content input:not([type]),
#content input[type="text"],
#content input[type="password"],
#content textarea{
  padding:.55em .75em;
  font-size:1em;
  color:#333336;
  border:1px solid var(--dtk-input-border);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#content select{
  font-size:1em;
  padding:.45em .6em;
  color:#333336;
  border:1px solid var(--dtk-input-border);
  border-radius:12px;
  background:#fff;
}
#content input:not([type]):focus,
#content input[type="text"]:focus,
#content input[type="password"]:focus,
#content textarea:focus,
#content select:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.18);
}
#content input[type="checkbox"],
#content input[type="radio"]{ accent-color:var(--dtk-primary); }

/* primary pill call-to-action (all legacy input submits) */
#content input[type="submit"]{
  padding:.72em 2.4em;
  font-size:17px;
  letter-spacing:.3px;
  background:var(--dtk-primary);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
}
#content input[type="submit"]:hover,
#content input[type="submit"]:active{ background:var(--dtk-primary-hover); }
#content input[type="submit"][disabled]{ background:#b9c3d1; cursor:not-allowed; }

/* secondary ghost pill */
#content input[type="button"],
#content input[type="reset"]{
  padding:.72em 1.9em;
  font-size:16px;
  background:#fff;
  color:#333336;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  cursor:pointer;
  margin-left:.4em;
  transition:background .2s ease, border-color .2s ease;
}
#content input[type="button"]:hover,
#content input[type="reset"]:hover{ background:#f1f3f5; border-color:#c4ccd6; }

/* ============================================================
   4. Action links
   ============================================================ */
/* compact rectangular row-action buttons (canon domain-table kit) */
#content a.btn{
  padding:7px 15px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
#content .btn.ghost{
  background:#fff;
  border:1px solid var(--dtk-border-strong);
  color:var(--dtk-ink);
}
#content .btn.ghost:hover{ background:var(--dtk-primary-soft); border-color:var(--dtk-primary); }
#content .btn.primary{
  background:var(--dtk-primary);
  color:white;
  border:1px solid var(--dtk-primary);
}
#content .btn.primary:hover{ background:var(--dtk-primary-hover); border-color:var(--dtk-primary-hover); }
/* quiet text-ghost row action (borderless, primary ink) */
#content .btn.quiet{
  background:transparent;
  border:1px solid transparent;
  color:var(--dtk-primary);
}
#content .btn.quiet:hover{ background:var(--dtk-primary-weak); }

/* pill-shaped call-to-action link */
#content .dtn-btn{
  display:inline-block;
  background:var(--dtk-primary);
  color:#fff;
  border-radius:999px;
  padding:.7em 2.2em;
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease;
}
/* color must be repeated here: the base rule is (1,1,0) and loses to the global
   `#content a:hover` (1,1,1), which would recolor the label to the very blue the
   background animates to -- the text vanished on hover on every .dtn-btn link */
#content .dtn-btn:hover{ background:var(--dtk-primary-hover); color:#fff; }

/* ============================================================
   5. Bars (gray utility bars: results count, filters, notes)
   ============================================================ */
#content .pagination,
#content .invoice-note,
#content .message-info,
#content .expire-filter{
  background:var(--dtk-panel);
  border-radius:16px;
  padding:1.1429em;
  font-size:14px;
}

/* ============================================================
   6. Cards and panels
   ============================================================ */
/* white content card */
#content .dtn-card,
#content .dtn-info-card,
#content .claim-card,
#content .subdomain-card,
#content .authinfo-card,
#content .domain-cancel-card,
#content .partner-stats-card,
#content .partner-new-card,
#content .tld-card,
#content .dotwien2-card,
:is(#domain-dottirol, #domain-dottirollr, #domain-dotasia, #domain-dotat, #domain-doteulr2, #domain-doteu, #domain-dottirol1, #domain-dottirol2, #domain-dotwien2) form#borderblue,
#domain-idn form[name="main"]{
  display:block;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:1.8em 2.2em;
}

/* tinted info panel */
#content .dtn-panel,
#content .tld-claims,
#content .dotwien2-claims,
#domain-doteu .doteu-side,
#domain-doteu_editcc .editcc-side,
#domain-renew-promotion .renew-agb{
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border-soft);
  border-radius:16px;
  padding:1.2em 1.6em;
}

/* fieldsets share the card/panel language on the TLD order pages */
:is(#domain-dottirol, #domain-dottirollr, #domain-dotasia, #domain-dotat, #domain-doteulr2, #domain-dotme) fieldset{
  border:1px solid var(--dtk-border);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--dtk-shadow-xs);
  padding:1.2em 1.6em;
  margin-top:1.5em;
}
#domain-doteu fieldset{
  border:1px solid var(--dtk-border);
  border-radius:16px;
  background:#fff;
  padding:1.2em 1.6em;
  margin-top:1em;
}
:is(#domain-dottirol, #domain-dottirollr) fieldset fieldset{ background:var(--dtk-panel); border-color:var(--dtk-border-soft); box-shadow:none; }
#domain-doteu fieldset#phase_data,
#domain-doteu fieldset#dophase_data,
#domain-doteu fieldset.doteu-actions{ background:var(--dtk-panel); border-color:var(--dtk-border-soft); }
#domain-doteu_editcc fieldset{
  border:1px solid var(--dtk-border);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--dtk-shadow-xs);
  padding:1.2em 1.6em;
}
#content fieldset legend{ font-weight:600; letter-spacing:.2px; padding:0 .5em; }

/* ============================================================
   7. Tables
   ============================================================ */
/* canon bordered table (domain-table look for real <table> elements) */
#content table.dtn-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
#content table.dtn-table thead th,
#content table.dtn-table thead td{
  background:var(--dtk-panel);
  font-weight:bold;
  text-align:left;
  padding:20px 10px;
  border-bottom:1px solid var(--dtk-border);
}
#content table.dtn-table tbody td{
  padding:12px 10px;
  font-size:15px;
}
#content table.dtn-table tbody tr:nth-child(odd) td{ background:var(--dtk-zebra); }
#content table.dtn-table a{ font-weight:normal; text-decoration:underline; }
#content table.dtn-table a.btn{ text-decoration:none; }

/* light card table (12px card, var(--dtk-panel) head, row dividers, hover tint) */
#content table.dtn-tbl,
#domain-ze table.ze-table,
#domain-lookup2 table.lookup-table,
#domain-calculate_prices table.price-table,
#domain-expire table.expire-table,
#content .subdomain-wrap table,
#content .pass-list-wrap table,
#lookup_domains,
#rootserver-order table.rs-table,
#content .product-list,
#content table.partner-list-table,
#domain-doteu_editcc table.editcc-table{
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  overflow:hidden;
  text-align:left;
}
#content table.dtn-tbl th,
#domain-ze table.ze-table th,
#domain-lookup2 table.lookup-table th,
#domain-calculate_prices table.price-table th,
#content .subdomain-wrap table th,
#lookup_domains th{
  background:var(--dtk-panel);
  font-weight:600;
  font-size:.95em;
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--dtk-border);
}
#content table.dtn-tbl td,
#domain-lookup2 table.lookup-table td,
#content .subdomain-wrap table td,
#content .pass-list-wrap table td,
#lookup_domains td{
  padding:10px 16px;
  border-bottom:1px solid var(--dtk-border-soft);
}
#content table.dtn-tbl tr:last-child td,
#domain-lookup2 table.lookup-table tr:last-child td,
#content .subdomain-wrap table tr:last-child td,
#content .pass-list-wrap table tr:last-child td,
#lookup_domains tr:last-child td{ border-bottom:none; }
#content table.dtn-tbl tbody tr:hover td,
#content .subdomain-wrap table tr:hover td,
#content .pass-list-wrap table tr:hover td{ background:var(--dtk-primary-soft); }

/* ============================================================
   8. Form skin (.t-data) -- unified premium variant
   ============================================================ */
#content .t-data{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--dtk-shadow-xs);
}
#content .t-data caption{
  text-align:left;
  font-weight:600;
  color:#333336;
  padding:0 0 .6em 2px;
}

/* section header rows (t-head and the t-desc variant share the look).
   Card-form design like customer edit/register (ce-h): white, ink text,
   hairline below -- replaces the old gray band + blue left accent. */
#content .t-head,
#content .t-data .t-desc{
  background:#fff;
  color:#1c2c47;
  font-weight:600;
  font-size:1.08em;
  text-align:left;
  letter-spacing:.01em;
  padding:19px 20px 14px !important;
  border-top:none;
  border-left:none;
  border-bottom:1px solid #e9edf3;
}
/* breathing room before each subsequent section */
#content .t-data tbody:not(:first-of-type) .t-head,
#content .t-data tr:not(:first-child) .t-head{ padding-top:30px !important; }
#content .t-head label{ font-weight:600; cursor:pointer; }
/* option rows (t-head carrying a radio) read as choices, not section titles */
#content .t-data .t-head:has(input[type="radio"]),
#content .t-head:has(input[type="radio"]){
  font-size:1em;
  font-weight:500;
  color:#333336;
  padding:13px 20px !important;
  border-bottom:none;
}
#content .t-data .t-head:has(input[type="radio"]) label,
#content .t-head:has(input[type="radio"]) label{ font-weight:500; }

/* label / input cells */
#content .t-label,
#content .t-input{ padding:10px 18px; vertical-align:top; text-align:left; }
#content .t-label{ font-weight:500; color:#3a4658; width:40%; }
#content .t-label small{ display:block; margin-top:3px; font-size:.875em; font-weight:400; color:#8a93a3; }
#content .t-input input,
#content .t-input select,
#content .t-input textarea{
  width:100%;
  padding:.64em .82em;
  font-size:1em;
  color:#1f2733;
  border:1px solid #d5dbe4;
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#content .t-input input::placeholder,
#content .t-input textarea::placeholder{ color:#aab2bf; }
#content .t-input input:hover,
#content .t-input select:hover,
#content .t-input textarea:hover{ border-color:#b7c0cd; }
#content .t-input input:focus,
#content .t-input select:focus,
#content .t-input textarea:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.16);
}
#content .t-data input[type="radio"],
#content .t-data input[type="checkbox"]{ margin-right:.45em; }

/* action row: the submit/reset button lives in a class-less <td>, so without
   this it renders flush against the card's rounded bottom edge (no breathing
   room). Give the button cell its own vertical padding. */
#content .t-data td:has(> input[type="submit"]),
#content .t-data td:has(> input[type="button"]),
#content .t-data td:has(> input[type="reset"]),
#content .t-data td:has(> button){ padding:16px 18px 22px; }

/* required marker */
#content .t-required .t-label label::after{ content:'*'; color:var(--dtk-error); margin-left:.25em; font-weight:700; }

/* error rows */
#content .t-error td{ color:#b42318; font-size:.9em; font-weight:500; padding:2px 18px 10px; }
#content .t-error td::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:.4em; vertical-align:-2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC2B45'><path d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/></svg>") no-repeat center/contain;
}
#content tr:has(+ tr.t-error) .t-input input,
#content tr:has(+ tr.t-error) .t-input select,
#content tr:has(+ tr.t-error) .t-input textarea{ border-color:#e2a3a3; background:#fffafa; }

/* selected payment method highlight */
#content tbody:has(.t-head input[type="radio"]:checked) .t-head{ background:#EAF2FE; }

/* progressive disclosure: collapse the detail rows of non-selected payment
   methods. Opt-in via the dtn-paydisclose marker (register.html, edit.html)
   because it hides *all* siblings after a row with an unchecked radio. */
#content .dtn-paydisclose tr:has(input[type="radio"]:not(:checked)) ~ *{ display:none; }

/* password-strength hint (passStrengthify) */
#content .passStrengthify{ margin-top:.5em; font-size:.875em; color:#6E6F6F; }

/* two-column responsive layout used by the big account forms */
#content .user-data{ max-width:1080px; margin:0 auto; color:#1f2733; }
#content .user-data .flex-container{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; padding:0; }
#content .user-data .flex-item{ flex:1 1 440px; min-width:0; }

/* action bar buttons inside the account forms (bigger, with glow) */
#content .user-data input[type="submit"],
#content .aff-wrap input[type="submit"],
#content .user-data .dtn-btn-submit{
  padding:.86em 2.9em; font-size:17px; font-weight:600; letter-spacing:.2px;
  background:var(--dtk-primary); color:#fff; border:none; border-radius:999px; cursor:pointer;
  text-wrap:nowrap; box-shadow:0 6px 16px rgba(15,101,213,.28);
  transition:background .2s ease, box-shadow .2s ease, transform .05s ease;
}
#content .user-data input[type="submit"]:hover,
#content .aff-wrap input[type="submit"]:hover,
#content .aff-wrap input[type="submit"]:active,
#content .user-data .dtn-btn-submit:hover,
#content .user-data .dtn-btn-submit:active{ background:var(--dtk-primary-hover); box-shadow:0 9px 22px rgba(0,56,146,.3); }
#content .user-data input[type="submit"]:active{ transform:translateY(1px); }
#content .user-data input[type="button"],
#content .aff-wrap input[type="button"]{
  padding:.86em 1.9em; font-size:15px; font-weight:500; background:#fff; color:#3a4658;
  border:1px solid #d5dbe4; border-radius:999px; cursor:pointer; margin-left:.5em;
  transition:background .2s ease, border-color .2s ease;
}
#content .user-data input[type="button"]:hover,
#content .aff-wrap input[type="button"]:hover{ background:#f4f6f9; border-color:#b7c0cd; }

/* mobile: stack each field (label above input). Kept below the disclosure
   rule's specificity so collapsed payment rows stay collapsed. */
@media (max-width:720px){
  #content .t-data,
  #content .t-data tbody,
  #content .t-data tr,
  #content .t-data th,
  #content .t-data td{ display:block; width:auto; }
  #content .t-label{ width:auto; padding:12px 16px 2px; }
  #content .t-input{ padding:2px 16px 12px; }
  #content .t-head,
  #content .t-data .t-desc{ padding:13px 16px !important; }
  #content .t-error td{ padding:0 16px 11px; }
  #content .user-data .flex-container{ gap:16px; }
  #content .user-data input[type="submit"],
  #content .user-data input[type="button"]{ width:100%; }
  /* stacked-button top gap: em now tracks each button's own font-size
     (submit 17px, button 15px, qpay's inline font-size:larger 19.2px),
     so the 8px gap is restated per context */
  #content .user-data input[type="submit"]{ margin:0.4706em 0 0; }
  #content .user-data input[type="button"]{ margin:0.5333em 0 0; }
  #content .user-data[name="payment_qpay_token"] input[type="submit"]{ margin:0.4167em 0 0; }
}

/* ============================================================
   9. Sign-up layer (.reg-*)
   ============================================================ */
/* intro / info banner (edit.html and the base sign-up forms) */
#content .reg-intro{
  width:100%;
  max-width:1120px;
  margin:0 auto 1.5em auto;
  border-collapse:collapse;
  background:#EAF2FE;
  border:1px solid #cfe0fb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--dtk-shadow-xs);
}
#content .reg-intro th{ background:none; text-align:left; padding:16px 22px 4px 22px; font-size:1.15em; font-weight:600; color:var(--dtk-primary); }
#content .reg-intro td{ padding:4px 22px 16px 22px; color:#333336; line-height:1.5; }

/* hero */
#content .reg-hero{
  max-width:1080px; margin:0 auto 1.5em; text-align:center;
  background:linear-gradient(180deg,#eef6ff 0%,#ffffff 72%);
  border:1px solid #e0ebf9; border-radius:18px;
  box-shadow:0 8px 26px rgba(15,101,213,.08); padding:2.1em 1.75em 1.7em;
}
#content .reg-hero-badge{
  width:54px; height:54px; margin:0 auto .9em; display:flex;
  align-items:center; justify-content:center; background:var(--dtk-primary);
  border-radius:16px; box-shadow:0 8px 18px rgba(15,101,213,.34);
}
#content .reg-hero-badge svg{ width:27px; height:27px; fill:#fff; }
#content .reg-hero h1{
  margin:0 0 0.2616em; font-size:1.72em; line-height:1.2; font-weight:700;
  letter-spacing:-.01em; color:#13233d;
}
#content .reg-hero-sub{ margin:0 auto; max-width:640px; color:#54617a; line-height:1.55; font-size:1.02em; }
#content .reg-hero-sub b{ color:#1f2733; font-weight:600; }
#content .reg-trust{
  display:inline-flex; flex-wrap:wrap; gap:0.6286em 1.7143em; justify-content:center;
  margin-top:1.3714em; padding-top:1.2571em; border-top:1px solid #eaf0f8;
  color:#4d5b73; font-size:.875em; font-weight:600;
}
#content .reg-trust span{ display:inline-flex; align-items:center; gap:.42em; }
#content .reg-trust svg{ width:15px; height:15px; fill:var(--dtk-primary); flex:none; }

/* global error banner */
#content .reg-alert{
  display:flex; align-items:center; gap:.6em; max-width:1080px;
  margin:0 auto 1.25em; background:#fef3f2; border:1px solid #f6cecb;
  color:#b42318; border-radius:16px; padding:.85em 1.1em; font-weight:500;
}
#content .reg-alert svg{ width:19px; height:19px; fill:var(--dtk-error); flex:none; }

/* submit / actions card */
#content .reg-actions{
  max-width:1080px; margin:1.5em auto 0; text-align:center; background:#fff;
  border:1px solid var(--dtk-border); border-radius:16px; box-shadow:var(--dtk-shadow-xs);
  padding:1.6em 1.25em;
}
#content .reg-secure{
  display:inline-flex; align-items:flex-start; gap:.5em; margin-top:1.2em;
  color:#6b7686; font-size:.875em; line-height:1.5; text-align:left; max-width:560px;
}
#content .reg-secure svg{ width:16px; height:16px; fill:#2a9d5b; flex:none; margin-top:1px; }
#content .reg-note{ max-width:1080px; margin:1.1579em auto 0; color:#5b6675; font-size:.95em; line-height:1.6; }

@media (max-width:720px){
  #content .reg-hero{ padding:1.6em 1.15em; }
  #content .reg-hero h1{ font-size:1.4em; margin:0 0 0.3214em; }
}

/* ============================================================
   10. Plan selection cards (.pkg-*) + order statusbar override
   ============================================================ */
.pkg-wrap{ max-width:820px; margin:1.25em auto; color:#333336; }
.pkg-wrap h2, .pkg-wrap .pkg-title{ font-size:24px; font-weight:600; letter-spacing:.3px; color:#333336; }
/* margins split per element: the h2's 24px here loses to `#content h2`
   (26px desktop / 22px mobile), so its em base differs from .pkg-title's */
.pkg-wrap .pkg-title{ margin:0.3333em 0 0.6667em; }
.pkg-wrap h2{ margin:0.3077em 0 0.6154em; }
@media (max-width:720px){
  .pkg-wrap h2{ margin:0.3636em 0 0.7273em; }
}
.pkg-note{ font-size:.88em; color:#6E6F6F; margin:1.1364em 0; line-height:1.5; }
.pkg-section{ font-size:18px; font-weight:600; color:#333336; margin:1.4222em 0 0.7111em; }

.pkg-card{
  position:relative;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  background:#fff;
  padding:1.1em 1.4em;
  margin-bottom:1em;
  box-shadow:0 3px 10px rgba(0,0,0,.03);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pkg-card:hover{ border-color:var(--dtk-primary); background:var(--dtk-primary-soft); }
.pkg-card:has(.pkg-radio:checked){ border-color:var(--dtk-primary); background:#EAF2FE; box-shadow:0 0 0 1px var(--dtk-primary) inset; }
.pkg-card:has(.pkg-radio:focus-visible){ outline:2px solid var(--dtk-primary); outline-offset:3px; }
.pkg-card.is-current{ background:var(--dtk-panel); border-style:dashed; }
.pkg-card.is-current:hover{ border-color:var(--dtk-border); background:var(--dtk-panel); }

/* keep the native radio for the form, but hide it visually */
.pkg-radio{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }

/* clickable area that selects the plan */
.pkg-select{ display:block; position:relative; padding-left:2em; cursor:pointer; }
.pkg-dot{
  position:absolute; left:0; top:.25em;
  width:18px; height:18px;
  border:2px solid #c4ccd6; border-radius:50%; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pkg-card:has(.pkg-radio:checked) .pkg-dot{ border-color:var(--dtk-primary); box-shadow:inset 0 0 0 4px var(--dtk-primary); }

.pkg-head{ display:flex; justify-content:space-between; align-items:baseline; gap:.4em 1.2em; flex-wrap:wrap; }
.pkg-name{ font-weight:600; font-size:1.12em; color:#333336; }
.pkg-price{ text-align:right; white-space:nowrap; font-weight:600; font-size:1.05em; color:var(--dtk-primary); }
.pkg-price small{ display:block; font-weight:400; font-size:0.7738em; color:#6E6F6F; letter-spacing:.02em; }
.pkg-install{ margin-top:0.3429em; font-size:.875em; color:#6E6F6F; display:block; }
.pkg-meta{ display:flex; flex-wrap:wrap; gap:0.2273em 1.8182em; margin-top:0.625em; font-size:.88em; color:#6E6F6F; }
.pkg-meta strong{ color:#374151; font-weight:600; }

/* current-package usage panel (hosting_change) */
.pkg-usage{ margin-top:0.6857em; font-size:.875em; color:#374151; }
.pkg-usage .pkg-usage-head{ font-weight:600; color:#333336; margin-bottom:0.2286em; }
.pkg-usage div{ padding:0.0914em 0; }

/* collapsible feature list -- pages without features simply omit it */
.pkg-details{ margin-top:.8em; }
.pkg-select ~ .pkg-details,
.pkg-card .pkg-select + .pkg-details{ padding-left:2em; }
.pkg-details summary{
  color:var(--dtk-primary); font-weight:500; font-size:.9em; cursor:pointer;
  list-style:none; display:inline-flex; align-items:center; gap:.4em;
}
.pkg-details summary::-webkit-details-marker{ display:none; }
.pkg-details summary::before{
  content:""; width:0; height:0;
  border-left:5px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .15s ease;
}
.pkg-details[open] summary::before{ transform:rotate(90deg); }
.pkg-feats{
  margin-top:0.8em;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
  gap:0.4em 1.2571em;
  font-size:.875em;
  color:#555;
}
.pkg-feats span{ position:relative; padding-left:1.35em; }
.pkg-feats span::before{ content:"\2713"; position:absolute; left:0; color:var(--dtk-primary); font-weight:700; }

.pkg-terms{ font-size:.92em; color:#374151; line-height:1.6; margin:1.3043em auto; max-width:760px; text-align:center; }

/* actions */
.pkg-submit{ text-align:center; margin-top:1.8em; }
#content .pkg-submit input[type="submit"],
#content .pkg-submit button[type="submit"]{
  background:var(--dtk-primary); color:#fff; border:none; border-radius:999px;
  padding:0.7059em 2.4471em; font-size:17px; letter-spacing:.3px; cursor:pointer;
  transition:background .2s ease;
}
#content .pkg-submit input[type="submit"]:hover,
#content .pkg-submit button[type="submit"]:hover{ background:var(--dtk-primary-hover); }
#content .pkg-submit button[type="submit"][disabled]{ background:#b9c3d1; cursor:not-allowed; }
#content .pkg-submit input[type="button"],
#content .pkg-submit button[type="button"]{
  background:#fff; color:#333336; border:1px solid var(--dtk-border); border-radius:999px;
  padding:0.8em 2.0267em; font-size:15px; cursor:pointer; margin-left:0.5333em;
  transition:background .2s ease, border-color .2s ease;
}
#content .pkg-submit input[type="button"]:hover,
#content .pkg-submit button[type="button"]:hover{ background:#f1f3f5; border-color:#c4ccd6; }

/* (The former inline #order_statusbar hosting stepper now renders through the
   ORDER_STEPPER function / .dtn-stepper -- see section 13.) */

@media (max-width:640px){
  .pkg-card{ padding:1em 1.1em; }
  .pkg-price{ text-align:left; white-space:normal; }
  #content .pkg-submit input[type="submit"], #content .pkg-submit button[type="submit"],
  #content .pkg-submit input[type="button"], #content .pkg-submit button[type="button"]{ width:100%; }
  /* stacked-button top gap per font-size context (submit 17px, button 15px) */
  #content .pkg-submit input[type="submit"], #content .pkg-submit button[type="submit"]{ margin:0.3765em 0 0; }
  #content .pkg-submit input[type="button"], #content .pkg-submit button[type="button"]{ margin:0.4267em 0 0; }
}

/* ============================================================
   11. Notice card (.dtn-notice) -- success / info / confirm pages
   ============================================================ */
.dtn-notice{
  max-width:560px;
  margin:3em auto;
  text-align:center;
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:2.5em 2em;
  line-height:1.6;
}
.dtn-notice .dtn-check{
  width:54px; height:54px;
  border-radius:50%;
  background:#EAF2FE;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1em;
}
.dtn-notice .dtn-check svg{ width:28px; height:28px; fill:var(--dtk-primary); }
#content .dtn-notice h2{ font-size:20px; font-weight:600; margin:0 0 .5em; color:#333336; letter-spacing:normal; }
.dtn-notice p{ margin:0 0 .5em; }
#content .dtn-notice a{ color:var(--dtk-primary); font-weight:600; }
.dtn-notice b{ word-break:break-word; }
/* error variant (e.g. domain registered to another account) */
.dtn-notice.dtn-notice--error{ border-color:#f0c2c2; background:#fdf4f4; color:#8a1f1f; }
#content .dtn-notice.dtn-notice--error b{ color:#8a1f1f; }
.dtn-notice form{ margin-top:1.2em; }
#content .dtn-notice .dtn-btn{
  display:inline-block;
  margin-top:1.2em;
  background:var(--dtk-primary);
  color:#fff;
  border-radius:999px;
  padding:.7em 2.2em;
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease;
}
#content .dtn-notice .dtn-btn:hover{ background:var(--dtk-primary-hover); }
/* compact confirm buttons inside notices */
#content .dtn-notice input[type="submit"]{
  padding:.62em 2.2em;
  font-size:16px;
  letter-spacing:.3px;
  background:var(--dtk-primary);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
}
#content .dtn-notice input[type="submit"]:hover,
#content .dtn-notice input[type="submit"]:active{ background:var(--dtk-primary-hover); }
#content .dtn-notice input[type="button"]{
  padding:.62em 1.7em;
  font-size:15px;
  background:#fff;
  color:#333336;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  cursor:pointer;
  margin-left:.4em;
  transition:background .2s ease, border-color .2s ease;
}
#content .dtn-notice input[type="button"]:hover{ background:#f1f3f5; border-color:#c4ccd6; }

/* ============================================================
   12. Small form card (.dtn-form-card) -- forwarding/email forms
   ============================================================ */
#content .dtn-form-card{
  max-width:640px;
  margin:1.5em auto;
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:1.8em 2.2em;
  line-height:1.9;
}
#content .dtn-form-card h3{ margin-top:0; font-size:1.3em; font-weight:600; color:var(--dtk-primary); word-break:break-word; }
#content .dtn-form-card a{ color:var(--dtk-primary); }
#content .dtn-form-card input:not([type]),
#content .dtn-form-card input[type="text"]{ margin:.15em 0; }
#content .dtn-form-card input[type="submit"]{
  padding:.62em 2.2em;
  font-size:16px;
  margin-top:.5em;
}
#content .dtn-form-card input[type="button"]{
  padding:.62em 1.7em;
  font-size:15px;
  margin-top:.5em;
}
#content .dtn-form-card table td{ padding:4px 8px 4px 0; }

/* ============================================================
   13. Order stepper (.dtn-stepper) -- emitted by the ORDER_STEPPER smarty
       function (see inc/smarty_init.inc). Compact, responsive progress bar.
   ============================================================ */
.dtn-stepper{ max-width:640px; margin:0 auto; padding:.25em 0; }
.dtn-stepper-list{ display:flex; align-items:flex-start; list-style:none; padding:0; margin:0; }
.dtn-step{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5em; }
/* connector line running from the previous dot into this one; it turns blue
   once this step is reached, so the bar fills contiguously up to "current". */
.dtn-step:not(:first-child)::before{
  content:''; position:absolute; top:14px; height:2px; z-index:0;
  left:calc(-50% + 19px); right:calc(50% + 19px);
  background:var(--dtk-border);
}
.dtn-step-fill:not(:first-child)::before{ background:var(--dtk-primary); }
/* the numbered / checked dot */
.dtn-step-dot{
  position:relative; z-index:1; box-sizing:border-box;
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.8125em; font-weight:700; line-height:1;
  background:#fff; border:2px solid var(--dtk-border-strong); color:var(--dtk-muted);
}
.dtn-step-dot svg{ width:16px; height:16px; display:block; }
.dtn-step-done .dtn-step-dot{ background:var(--dtk-primary); border-color:var(--dtk-primary); color:#fff; }
.dtn-step-current .dtn-step-dot{ border-color:var(--dtk-primary); color:var(--dtk-primary); box-shadow:var(--dtk-focus); }
/* label under the dot */
.dtn-step-label{ font-size:.875em; font-weight:600; color:var(--dtk-muted); line-height:1.25; }
.dtn-step-label a{ color:inherit; text-decoration:none; }
.dtn-step-label a:hover{ text-decoration:underline; }
.dtn-step-done .dtn-step-label{ color:var(--dtk-ink); }
.dtn-step-done .dtn-step-label a{ color:var(--dtk-primary); }
.dtn-step-current .dtn-step-label{ color:var(--dtk-primary); }
/* full-width caption naming the current step; only used on narrow screens */
.dtn-stepper-current{ display:none; }
.dtn-stepper-info{ max-width:640px; margin:1.1429em auto 1.7143em; padding:0.8571em 1.1429em; background:var(--dtk-panel); border-radius:var(--dtk-r-sm); font-size:.875em; color:var(--dtk-ink); text-align:center; }

/* Mobile: keep the row of dots, drop the per-step labels, and name the active
   step once beneath the row -- so the bar stays short vertically. */
@media (max-width:600px){
  .dtn-step{ gap:.35em; }
  .dtn-step-dot{ width:26px; height:26px; flex-basis:26px; font-size:.8125em; }
  .dtn-step-dot svg{ width:14px; height:14px; }
  .dtn-step:not(:first-child)::before{ top:12px; left:calc(-50% + 17px); right:calc(50% + 17px); }
  .dtn-step-label{ display:none; }
  .dtn-stepper-current{ display:block; margin-top:0.5714em; text-align:center; font-size:.875em; font-weight:600; color:var(--dtk-primary); }
}

/* ============================================================
   14. Domain manager (domain/templates/main.html + list.html)
   ============================================================ */
/* shared page wrapper (domain manager, invoice list) */
div:has(> .dtn-wrap){ width:100%; }
#content .dtn-wrap{
  /* fill the (forced-full-width) shared content wrapper up to 1100px and stay
     centered. The parent is display:inline-block (shrink-to-fit) but the rule
     above forces it to width:100%, so 100% here is the real available width --
     #content is a fixed ~1000px column, NOT the viewport, so a vw-based cap
     would overflow it and push the box off-centre. */
  width:min(1100px, 100%);
  box-sizing:border-box;
  /* no top margin: the header chrome already provides the breathing room, and
     the extra 2em made these two pages start visibly lower than every other
     page (home, account, order flows all start at the top of #content) */
  margin:0 auto 2em;
  background:#fff;
  border-radius:16px;
  padding:1em;
  color:#333336;
}

/* filter bar */
.dtn-filter{
  background:#f6f7f9;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  padding:1em 1.1em;
  margin-bottom:1.75em;
}
.dtn-search{
  position:relative;
  display:flex;
  align-items:center;
}
.dtn-search .dtn-search-icon{
  position:absolute;
  left:14px;
  width:18px;
  height:18px;
  color:#9aa0a6;
  pointer-events:none;
}
#content .dtn-search input{
  width:100%;
  box-sizing:border-box;
  padding:12px 40px 12px 42px;
  font-size:16px;
  border:1px solid #d9dde2;
  border-radius:12px;
  background:#fff;
  color:#333336;
  transition:border-color .15s, box-shadow .15s;
}
#content .dtn-search input:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.15);
}
.dtn-clear{
  position:absolute;
  right:8px;
  border:none;
  background:transparent;
  color:#9aa0a6;
  font-size:22px;
  line-height:1;
  width:28px;
  height:28px;
  border-radius:50%;
  cursor:pointer;
}
.dtn-clear:hover{ background:#eceef1; color:#555; }

.dtn-filter-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75em;
  margin-top:.9em;
}
.dtn-adv{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6em;
}
#content .dtn-adv input[type="text"]{
  padding:9px 11px;
  font-size:15px;
  border:1px solid #d9dde2;
  border-radius:8px;
  background:#fff;
  color:#333336;
  width:200px;
  box-sizing:border-box;
}
#content .dtn-adv input[type="text"]:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.15);
}
#content .dtn-adv select{
  padding:9px 11px;
  font-size:15px;
  border:1px solid #d9dde2;
  border-radius:8px;
  background:#fff;
  color:#333336;
  cursor:pointer;
}
.dtn-search-btn{
  padding:9px 18px;
  background:var(--dtk-primary);
  color:#fff;
  border:1px solid var(--dtk-primary);
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.dtn-search-btn:hover{ filter:brightness(.92); }
.dtn-expire-link{
  font-size:14px;
  color:var(--dtk-primary);
  white-space:nowrap;
}
#domain-list{ position:relative; }
#domain-list > *{ transition:opacity .12s; }
/* while an AJAX filter request is in flight: dim the stale results (children
   only, so the spinner keeps full opacity) and overlay a spinner */
#domain-list.is-loading{ pointer-events:none; min-height:90px; }
#domain-list.is-loading > *{ opacity:.45; }
#domain-list.is-loading::after{
  content:"";
  position:absolute;
  top:28px;
  left:50%;
  width:26px;
  height:26px;
  margin-left:-13px;
  border:3px solid rgba(15,101,213,.2);
  border-top-color:var(--dtk-primary);
  border-radius:50%;
  animation:dtn-spin .7s linear infinite;
}
@keyframes dtn-spin{ to{ transform:rotate(360deg); } }

/* active-filter summary bar between the filter box and the results */
.dtn-active-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5em .6em;
  margin:-1em 0 1.25em;
  padding:.55em .9em;
  background:#eef4fc;
  border:1px solid rgba(15,101,213,.25);
  border-radius:12px;
  font-size:14px;
  color:#333336;
}
.dtn-active-filter[hidden]{ display:none; }
.dtn-active-filter-label{ font-weight:600; }
.dtn-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:.3em;
  background:#fff;
  border:1px solid #d9dde2;
  border-radius:999px;
  padding:.2em .75em;
  font-size:13.5px;
}
.dtn-filter-chip[hidden]{ display:none; }
.dtn-filter-chip b{ font-weight:600; word-break:break-all; }
.dtn-filter-reset{
  margin-left:auto;
  border:none;
  background:transparent;
  color:var(--dtk-primary);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  padding:.2em .3em;
}
.dtn-filter-reset:hover{ text-decoration:underline; }
.domain-empty{
  text-align:center;
  color:#6b7280;
  padding:2.6667em 1.0667em;
  font-size:15px;
}

/* results table (CSS grid rows) */
.domain-table{
  border:1px solid var(--dtk-border);
  border-radius:16px;
  overflow:hidden;
}
.domain-table-head{
  display:grid;
  grid-template-columns:1fr 100px 100px 80px;
  gap:15px;
  background:var(--dtk-panel);
  font-weight:bold;
  padding:20px 10px;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  border-bottom:1px solid var(--dtk-border);
}
.domain-group{ padding:1em; }
.domain-group.group-odd{ background:var(--dtk-zebra); }
.domain-row{
  display:grid;
  grid-template-columns:1fr 100px 100px 80px;
  gap:15px;
  padding:6px 0;
}
.domain-col{ font-size:15px; }
.domain-info > *:first-child{ font-size:1.2em; }
.domain-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding-left:4px;
  justify-content:space-between;
}
.domain-extra{
  margin-block:10px;
  display:flex;
  justify-content:space-between;
  padding-left:20px;
  gap:15px;
}
.domain-action-links{
  display:flex;
  gap:10px;
}
.domain-table a{
  font-weight:normal;
  text-decoration:underline;
}
.hosting-row{
  display:flex;
  justify-content:space-between;
}
/* additional-service (opackage) rows: one per service, sitting under their
   hosting package with a small connector so the hierarchy reads clearly */
.opackage-info{ position:relative; padding-left:18px; }
.opackage-info::before{
  content:"";
  position:absolute;
  left:3px; top:.45em;
  width:8px; height:8px;
  border-left:1.5px solid var(--dtk-border-strong);
  border-bottom:1.5px solid var(--dtk-border-strong);
  border-bottom-left-radius:2px;
}
.opackage-info .opackage-name{ font-size:15px; color:var(--dtk-ink); }
/* revoke: danger ghost button (currently commented out in the template) */
#content .btn.btn-revoke{
  background:#fff;
  border:1px solid #e2b6b6;
  color:#c0392b;
}
#content .btn.btn-revoke:hover{ background:#fdecec; border-color:#c0392b; }
span.gap{
  display:flex;
  gap:10px;
  margin-top:5px;
}

.pagination{
  margin-top:2.2857em;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pagination > div:first-child{ min-width:30%; }
.pagination a{ margin:0 4px; cursor:pointer; }
.dtn-wrap button:hover{ filter:brightness(0.8); }

@media (max-width:640px){
  .dtn-filter-controls{ align-items:stretch; }
  #content .dtn-adv input[type="text"]{ width:100%; }
}

/* ============================================================
   15. Invoice list (invoice/templates/main.html + list.html)
   ============================================================ */
#invoice-main h2{ color:#333336; margin-top:0; }
/* invoice filter reuses the domain-list search kit (.dtn-filter/.dtn-search/...) */
#invoice-main .invoice-note{ margin-top:2.2857em; text-align:center; }
#invoice-main .invoice-empty{ padding:1em 0; }
/* amount columns: right-aligned tabular figures, bold gross total */
#invoice-main table.invoice-table th.num,
#invoice-main table.invoice-table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#invoice-main table.invoice-table td.num.total{ font-weight:600; }
/* credit notes (negative gross) are money back to the customer -> green, not red */
#invoice-main table.invoice-table tr.credit td.num.total{ color:var(--dtk-success); }
/* compact right-aligned row actions (PDF / XML) */
#invoice-main table.invoice-table td.row-actions{ text-align:right; white-space:nowrap; }
#invoice-main table.invoice-table td.row-actions .btn + .btn{ margin-left:6px; }
#invoice-main table.invoice-table tbody tr:hover td{ background:var(--dtk-primary-soft); }
@media (max-width:720px){
  #invoice-main.dtn-wrap{ padding:.5em; }
  #invoice-main table.dtn-table thead th,
  #invoice-main table.dtn-table thead td,
  #invoice-main table.dtn-table tbody td{ padding:8px 6px; }
}

/* ============================================================
   16. TLD landing/application pages (shared kit)
   ============================================================ */
/* page wrappers */
#domain-dottirol{ max-width:860px; margin:1.5em auto; color:#333336; }
#domain-dottirollr{ max-width:860px; margin:1.5em auto; color:#333336; }
#domain-dotme{ max-width:860px; margin:1.5em auto; color:#333336; }
#domain-dotasia{ max-width:760px; margin:1.5em auto; color:#333336; }
#domain-dotat{ max-width:760px; margin:1.5em auto; color:#333336; }
#domain-doteulr2{ max-width:760px; margin:1.5em auto; color:#333336; }
#domain-dottirol1{ max-width:760px; margin:1.5em auto; color:#333336; }
#domain-dottirol2{ max-width:760px; margin:1.5em auto; color:#333336; }
#domain-dotwien2{ max-width:760px; margin:1.5em auto; color:#333336; }
#domain-doteu{ max-width:1100px; margin:1.5em auto; color:#333336; }
#domain-doteu_editcc{ max-width:1100px; margin:1.5em auto; color:#333336; }
#domain-idn{ max-width:1000px; margin:1.5em auto; color:#333336; }
#domain-doteu_idn{ max-width:1000px; margin:1.5em auto; color:#333336; line-height:1.5; }

/* shared bits: banner, intro, thanks, prices, domain heading, check input */
#content .tld-banner,
#content .dotwien2-banner{ text-align:center; margin-bottom:1em; }
#content .tld-banner img,
#content .dotwien2-banner img{ border:none; max-width:100%; }
#content .tld-intro,
#content .dotat-intro,
#content .doteulr2-intro,
#content .dotwien2-intro{ line-height:1.5; margin:1em 0 1.5em; }
#content .tld-thanks,
#content .dotwien2-thanks{ text-align:center; color:var(--dtk-success); margin-bottom:1em; }
#content .tld-prices,
#content .idn-prices,
#content .doteu-prices,
#content .editcc-prices{ margin-top:1.5em; }
#content .tld-domain,
#content .dotwien2-domain{ font-size:1.35em; font-weight:600; color:var(--dtk-primary); word-break:break-word; }
#content .tld-card,
#content .dotwien2-card{ text-align:center; }
#content .tld-claims,
#content .dotwien2-claims{ margin:1em auto; text-align:left; }
#content .tld-checkinput,
#content .dotwien2-checkinput{ display:inline-block; width:auto; }

/* the sunrise application t-data tables are simple left-aligned tables,
   not the card form skin */
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) table.t-data{
  border:none; border-radius:0; box-shadow:none; background:transparent;
  border-collapse:collapse; text-align:left; margin-top:1em; overflow:visible;
}
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) table.t-data td{ padding:9px 10px; vertical-align:top; }
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) .t-head{
  background:var(--dtk-panel);
  color:#333336;
  font-weight:600;
  letter-spacing:.2px;
  padding:9px 10px !important;
  border-top:1px solid var(--dtk-border-soft);
  border-bottom:1px solid var(--dtk-border-soft);
  border-left:none;
}
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) input:not([type]),
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) input[type="text"],
:is(#domain-dottirol1, #domain-dottirol2) textarea{ width:100%; }
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) select{ width:100%; }
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) input[type="checkbox"]{ width:auto; }
:is(#domain-dottirol1, #domain-dottirol2, #domain-dotwien2) input[type="submit"]{ width:auto; }

/* bulk-entry textareas / inputs fill the card */
:is(#domain-dottirol, #domain-dottirollr, #domain-dotasia, #domain-dotat, #domain-doteulr2, #domain-doteu) textarea,
:is(#domain-dottirol, #domain-dottirollr, #domain-doteu) input[type="text"]{ width:100%; }

/* two-column layouts */
#domain-doteu .doteu-main,
#domain-doteu_editcc .editcc-main,
#domain-idn .idn-main,
#domain-doteu_idn .idn-head{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
#domain-doteu .doteu-form-col{ flex:2 1 460px; min-width:0; line-height:1.5; }
#domain-doteu .doteu-side{ flex:1 1 240px; line-height:1.5; }
#domain-doteu .doteu-side a{ color:var(--dtk-primary); font-weight:600; }
#domain-doteu_editcc .editcc-form-col{ flex:2 1 460px; min-width:0; }
#domain-doteu_editcc .editcc-side{ flex:1 1 240px; line-height:1.5; }
#domain-doteu_editcc .editcc-side a{ color:var(--dtk-primary); font-weight:600; }
#domain-doteu_editcc table.editcc-table td{ padding:9px 18px; vertical-align:top; }
#domain-idn .idn-form-col{ flex:1 1 460px; min-width:0; line-height:1.5; }
#domain-idn .idn-prices-col{ flex:1 1 300px; min-width:0; }
#domain-idn .idn-list,
#domain-doteu_idn .idn-list{
  margin-top:1.5em;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:1.2em 1.6em;
}
#domain-doteu_idn .idn-info{ flex:1 1 460px; min-width:0; }
#domain-doteu_idn .idn-logo{ flex:0 0 auto; }

/* TLD chips (bulk lookup form) */
#domain_lookup{ color:#333336; }
#domain_lookup .bulk-lookup-card{
  max-width:560px;
  margin:1.5em auto;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  overflow:hidden;
  text-align:center;
}
#domain_lookup .bulk-lookup-head{
  background:var(--dtk-panel);
  border-bottom:1px solid var(--dtk-border-soft);
  padding:14px 18px;
  font-weight:600;
  font-size:1.05em;
  letter-spacing:.2px;
}
#domain_lookup .bulk-lookup-body{ padding:18px 22px 24px; }
#domain_lookup textarea{ width:100%; }
#domain_lookup .bulk-lookup-tlds{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:1.2em 0;
}
#domain_lookup .tld-chip{
  position:relative;
  display:inline-block;
  padding:.45em 1em;
  border:1px solid var(--dtk-border);
  border-radius:22px;
  background:#fff;
  cursor:pointer;
  font-size:.92em;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
#domain_lookup .tld-chip:hover{ background:var(--dtk-primary-soft); border-color:var(--dtk-primary); }
#domain_lookup .tld-chip input{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  cursor:pointer;
}
#domain_lookup .tld-chip:has(input:checked){
  color:var(--dtk-primary);
  border-color:var(--dtk-primary);
  background:#EAF2FE;
  font-weight:600;
}
#domain_lookup .tld-chip:has(input:focus-visible){
  outline:2px solid var(--dtk-primary);
  outline-offset:3px;
}

/* ============================================================
   17. Selected-domains order page (dtn-* order UI)
   ============================================================ */
.flex-column{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#content h2.title{
  font-size:30px;
  font-weight:500;
  color:#333336;
  letter-spacing:.2px;
  text-align:center;
}
#content .domain-card-wrapper hr{
  display:block;
  background-color:var(--dtk-border);
  margin-block:2em;
  border:none;
  height:1px;
}
.domain-card-wrapper > *:not(hr){ padding-inline:40px; }
.domain-card-wrapper{ padding-top:15px; }
.domain-card-wrapper > :last-child{ padding-bottom:35px; }
.domain-card-wrapper{
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  margin-bottom:2em;
  box-shadow:var(--dtk-shadow-xs);
}
div.sticky-domain-name{
  position:sticky;
  top:0;
  padding-inline:0;
  background:#fff;
  z-index:2;
}
.sticky-domain-name h2{ padding-inline:40px; }
.domain-details{ font-size:23px; }
.fee-offer{
  color:#6E6F6F;
  font-size:0.875em;
}
.domain-header h2{ margin-block:unset; font-weight:600; }
.domain-header h2 + .text-muted{ text-transform:capitalize; padding-bottom:0; }
.domain-header{
  display:flex;
  justify-content:space-between;
  align-items:top;
}
@media screen and (max-width:800px){
  .domain-header{ flex-direction:column; }
}
.domain-name{ color:var(--dtk-primary); word-break:break-word; }

/* ===== Two-column layout: domain cards + sticky order summary ===== */
.sd-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:start;
  gap:26px;
  max-width:1180px;
  margin:0 auto;
}
.sd-main{ min-width:0; }
@media (max-width:900px){
  .sd-page{ grid-template-columns:1fr; }
}

/* card head: domain + savings badge left, price right */
.sd-cardhead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px 24px;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:10px;
}
.sd-cardhead__l{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sd-cardhead .domain-name{ margin:0; font-size:30px; font-weight:600; }
.sd-badge{
  display:inline-block;
  background:#f7c68b;
  color:#363639;
  font-size:14px;
  font-weight:600;
  padding:5px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.sd-cardprice{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.sd-cardprice__row{ display:flex; align-items:baseline; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.sd-cardprice__old{ color:var(--dtk-muted); text-decoration:line-through; font-size:16px; }
.sd-cardprice__now{ font-size:30px; font-weight:700; color:#333336; }
.sd-cardprice__per{ font-size:14px; color:var(--dtk-muted); }
.sd-cardprice__sub{ font-size:14px; color:var(--dtk-muted); }

/* (i) info tooltip carrying the promo note */
.sd-info{ position:relative; display:inline-flex; align-self:center; cursor:help; }
.sd-info__i{
  width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--dtk-primary-weak); color:var(--dtk-primary);
  font-size:11px; font-weight:700; font-style:normal; line-height:1;
}
.sd-tooltip{
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:#333336; color:#fff; font-size:13.5px; font-weight:400; line-height:1.4;
  padding:7px 10px; border-radius:8px; width:max-content; max-width:200px;
  text-align:center; white-space:normal;
  opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:5; pointer-events:none;
}
.sd-tooltip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#333336;
}
.sd-info:hover .sd-tooltip, .sd-info:focus .sd-tooltip, .sd-info:focus-within .sd-tooltip{
  opacity:1; visibility:visible;
}

#content h3.sd-choose{ font-size:21px; font-weight:600; margin:0 0 16px; letter-spacing:.2px; border:none; }

/* category pills (JS driven) */
.sd-cats{
  display:flex;
  flex-wrap:wrap;
  margin:0 0 18px;
  gap:10px;
}
.sd-cat{
  border:1px solid var(--dtk-border);
  border-radius:999px;
  background:#fff;
  color:#333336;
  font:inherit;
  font-weight:500;
  padding:0.7em 1.3em;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sd-cat:hover{ background:var(--dtk-elev); }
.sd-cat.is-active{
  color:var(--dtk-primary);
  border-color:var(--dtk-primary);
  background-color:#EAF2FE;
}
.sd-cat:focus-visible{ outline:2px solid var(--dtk-primary); outline-offset:3px; }

/* 30-days money-back badge: first flex item inside .plan-selection so it gets
   exactly the plan-card width; shown by showCat() on the hosting/wordpress/
   email categories, normal customers only ($show_moneyback) */
#content .sd-moneyback{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin:0;
  padding:9px 14px;
  border-radius:12px;
  background:#e8f6ee;
  border:1px solid #bfe5cf;
  color:#15703d;
  font-size:14px;
  font-weight:500;
  box-sizing:border-box;
}
#content .sd-moneyback[hidden]{ display:none; }
#content .sd-moneyback svg{ width:18px; height:18px; flex:none; }

/* plan cards (visibility toggled by JS via inline display) */
.plan-selection{ display:flex; flex-wrap:wrap; gap:1em; }
.plan-card{
  border:1px solid var(--dtk-border);
  border-radius:16px;
  padding:1em;
  background:#fff;
  transition:0.2s ease;
  cursor:pointer;
  width:100%;
  gap:9px;
  display:none;
  position:relative; /* for the plan-radio overlay */
}
.plan-card input.plan-radio{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.plan-card:has(input.plan-radio:focus-visible){
  outline:2px solid var(--dtk-primary);
  outline-offset:3px;
}
.plan-card input{ margin:0; }
.plan-card:hover{ border-color:var(--dtk-border-strong); background:var(--dtk-elev); }
/* selected row like the website configurator: soft blue fill + 2px accent ring */
.plan-card:has(input:checked){
  border-color:var(--dtk-primary);
  background:var(--dtk-primary-weak);
  box-shadow:inset 0 0 0 1px var(--dtk-primary);
}
.plan-content{
  display:flex;
  width:100%;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.plan-name{
  display:flex;
  align-items:center;
  font-weight:500;
  font-size:0.9em;
}
.plan-name::before{
  content:"";
  width:8px;
  height:8px;
  border:1px solid var(--dtk-primary);
  border-radius:100%;
  display:block;
  margin-right:1em;
}
.plan-card:has(input:checked) .plan-name::before{ background:var(--dtk-primary); }
/* package price: struck-through list price clearly separated from the promo
   price (was two same-styled numbers glued together) */
.plan-fee{
  padding-left:5px;
  white-space:nowrap;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.plan-fee__old{
  color:var(--dtk-muted);
  font-size:.875em;
  font-weight:400;
}
.plan-fee__now{
  font-size:1.08em;
  font-weight:600;
  color:var(--dtk-ink);
}
.text-muted{ color:#6E6F6F; letter-spacing:normal; }
p.text-muted{ font-size:14px; }
.sd-planhint{ width:100%; margin:0; }

/* advanced settings -- behaves like the website lookup accordion
   (dt-acc: bordered card, full-width header, rotating chevron,
   sliding panel), so the collapsibles feel identical to the
   /domain-lookup page the user just came from */
.domain-card-wrapper > .advanced-settings{
  padding:0;
  margin:0 40px 35px;
}
:is(.advanced-settings, .du-whois, details.du-collapse){
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  background:#fff;
  overflow:hidden;
}
:is(.advanced-settings, .du-whois, details.du-collapse) summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 22px;
  font-size:17px;
  font-weight:600;
  color:var(--dtk-ink);
  text-align:left;
  cursor:pointer;
  transition:background .15s;
}
:is(.advanced-settings, .du-whois, details.du-collapse) summary::-webkit-details-marker{ display:none; }
:is(.advanced-settings, .du-whois, details.du-collapse) summary:hover{ background:var(--dtk-elev); }
:is(.advanced-settings, .du-whois, details.du-collapse)[open] summary{ border-bottom:1px solid var(--dtk-border); }
:is(.advanced-settings, .du-whois, details.du-collapse) summary::after{
  content:"";
  flex-shrink:0;
  width:14px;
  height:9px;
  background:var(--dtk-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .25s ease;
}
:is(.advanced-settings, .du-whois, details.du-collapse)[open] summary::after{ transform:rotate(180deg); }
/* slide the panel open/closed like the website accordion
   (progressive enhancement; older engines just snap) */
:is(.advanced-settings, .du-whois, details.du-collapse){ interpolate-size:allow-keywords; }
:is(.advanced-settings, .du-whois, details.du-collapse)::details-content{
  block-size:0;
  overflow:hidden;
  transition:block-size .28s ease, content-visibility .28s allow-discrete;
}
:is(.advanced-settings, .du-whois, details.du-collapse)[open]::details-content{ block-size:auto; }
@media (prefers-reduced-motion: reduce){
  :is(.advanced-settings, .du-whois, details.du-collapse) summary::after{ transition:none; }
  :is(.advanced-settings, .du-whois, details.du-collapse)::details-content{ transition:none; }
}
/* the "Erweiterte Einstellungen" details already lives inside the domain card,
   so drop its card chrome (border/background/radius) -- it should read as a
   section of the card, not a card within a card */
.domain-card-wrapper > .advanced-settings{
  border:none;
  border-radius:0;
  background:transparent;
  overflow:visible;
  margin:0 40px 24px;
}
.domain-card-wrapper > .advanced-settings summary{
  padding:8px 0;
  font-size:16px;
}
.domain-card-wrapper > .advanced-settings summary:hover{ background:transparent; color:var(--dtk-primary); }
.domain-card-wrapper > .advanced-settings[open] summary{ border-bottom:none; }
.domain-card-wrapper > .advanced-settings .advanced-settings-grid{ padding:6px 0 4px; }

.advanced-settings-grid{
  display:flex;
  flex-wrap:wrap;
  padding:6px 10px 12px;
}
.advanced-settings-grid > div{ padding:20px; }
.advanced-settings-grid > div:empty{
  padding:0;
  flex:1 0 100%;
}
.radio-option{ margin:0.5em 0; }
/* "change period" submit button styled as the link it used to be */
.sd-periodlink{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:var(--dtk-primary);
  text-decoration:underline;
  cursor:pointer;
}
.sd-periodlink:hover{ text-decoration:none; }

/* left-column footer notes */
.sd-coupon{ color:var(--dtk-primary); font-weight:500; }
.sd-legal{ font-size:.9em; color:var(--dtk-muted); margin:0 0 2em; }

/* ===== Order overview sidebar (domain/templates/selected_domains.html) ===== */
.sd-summary{
  position:sticky;
  top:16px;
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-sm);
  padding:1.5em 1.4em;
  display:flex;
  flex-direction:column;
  gap:1em;
}
@media (max-width:900px){ .sd-summary{ position:static; } }
.sd-summary__title{ margin:0; font-size:1.35em; font-weight:600; color:#333336; }
.sd-summary__items{ display:flex; flex-direction:column; }
.sd-item{ padding:14px 0; border-top:1px solid var(--dtk-border); }
.sd-item:first-child{ border-top:none; padding-top:0; }
.sd-item__main{ display:flex; align-items:baseline; gap:8px; }
.sd-item__name{ font-weight:600; word-break:break-word; flex:1 1 auto; }
.sd-item__price{ white-space:nowrap; text-align:right; }
.sd-item__price s{ color:var(--dtk-muted); font-size:.875em; margin-right:4px; }
.sd-item__price b{ font-weight:600; }
.sd-item__del{
  /* also used as a <button> (form submit that saves the card form first) */
  border:0; padding:0; -webkit-appearance:none; appearance:none;
  flex:0 0 auto; width:20px; height:20px; align-self:center;
  background:var(--dtk-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3v1H4v2h16V4h-5V3H9zM6 8v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6zm3 2h2v9H9v-9zm4 0h2v9h-2v-9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3v1H4v2h16V4h-5V3H9zM6 8v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6zm3 2h2v9H9v-9zm4 0h2v9h-2v-9z'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor:pointer; transition:background .15s ease;
}
.sd-item__del:hover{ background:#c0392b; }
.sd-item__meta{ font-size:.875em; color:var(--dtk-muted); margin-top:4px; line-height:1.4; }
.sd-sub{ margin-top:12px; padding-left:14px; position:relative; }
.sd-sub[hidden], .sd-save[hidden], .sd-sub__meta[hidden]{ display:none; }
.sd-sub::before{
  content:""; position:absolute; left:2px; top:5px; width:8px; height:12px;
  border-left:1px solid var(--dtk-border-strong); border-bottom:1px solid var(--dtk-border-strong);
  border-bottom-left-radius:4px;
}
.sd-sub__main{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.sd-sub__name{ font-weight:600; }
.sd-sub__price{ white-space:nowrap; text-align:right; }
.sd-sub__price s{ color:var(--dtk-muted); font-size:.875em; margin-right:4px; }
.sd-sub__price b{ font-weight:600; }
.sd-sub__meta{ font-size:.875em; color:var(--dtk-muted); margin-top:4px; line-height:1.4; }

.sd-save{
  display:flex; justify-content:center; gap:6px;
  background:#dffed3; color:#3c9e00; font-weight:600; font-size:.9em;
  padding:9px 12px; border-radius:999px;
}
.sd-total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:1.4em; font-weight:700; color:#333336;
}
.sd-vat{ margin:-0.4571em 0 0; font-size:.875em; color:var(--dtk-muted); text-align:right; }

/* ===== Checkout / customer gate (now inside the sidebar) =====
   Logged-in users just get the button; logged-out users pick existing/new,
   log in inline, then continue. */
.dtn-checkout{ display:flex; flex-direction:column; gap:1em; }
.dtn-checkout__title{ margin:0; text-align:center; font-size:1.05em; font-weight:600; color:#333336; }
.dtn-visually-hidden,
.sd-visually-hidden{
  position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%);
  height:1px; width:1px; overflow:hidden; white-space:nowrap;
}

/* existing vs. new customer choice */
.dtn-radio-group{ display:flex; gap:.6em; border:none; padding:0; margin:0; flex-wrap:wrap; }
.dtn-radio-group input[type="radio"]{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.dtn-radio-label{
  flex:1 1 0; min-width:110px; text-align:center; cursor:pointer;
  padding:.6em .8em; border-radius:12px; font-size:.95em; font-weight:600;
  border:1px solid var(--dtk-border); background:#fff; color:#333336;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.dtn-radio-group input:not(:checked) + .dtn-radio-label:hover{
  background:var(--dtk-primary-soft); border-color:var(--dtk-border-strong);
}
.dtn-radio-group input:checked + .dtn-radio-label{
  background:var(--dtk-primary-weak); border-color:var(--dtk-primary); color:var(--dtk-primary);
  box-shadow:inset 0 0 0 1px var(--dtk-primary);
}
.dtn-radio-group input:focus-visible + .dtn-radio-label{ outline:2px solid var(--dtk-primary); outline-offset:2px; }

/* inline login, shown only when "existing customer" is selected */
.dtn-existing-fields{ display:none; animation:dtnFadeIn .3s ease; }
fieldset.dtn-radio-group:has(#dtn-existing-customer:checked) + .dtn-existing-fields{
  display:flex; flex-direction:column; gap:.9em;
}
.dtn-input-group{ display:flex; flex-direction:column; gap:.3em; }
.dtn-label{ font-size:.9em; font-weight:600; color:#333336; }
#content input.dtn-input,
#content .dtn-input{
  width:100%; padding:.7em .8em; font-size:1em;
  border:1px solid var(--dtk-input-border); border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#content input.dtn-input:focus,
#content .dtn-input:focus{
  outline:none; border-color:var(--dtk-primary); box-shadow:0 0 0 3px rgba(15,101,213,.18);
}
.sd-summary .dtn-remind{ text-align:right; margin:-0.4444em 0 0; font-size:.9em; }
#content .sd-summary .dtn-remind a{
  color:var(--dtk-primary); text-decoration:none; border-bottom:1px dashed var(--dtk-primary);
  transition:color .2s;
}
#content .sd-summary .dtn-remind a:hover{ color:var(--dtk-primary-hover); border-color:var(--dtk-primary-hover); }

/* primary continue button -- global appearance (also used on register.html);
   full-width inside the sidebar checkout */
.dtn-btn-submit{
  padding:.85em 2em; font-size:1.05em; font-weight:600;
  background-color:var(--dtk-primary); color:#fff; border:none; border-radius:999px;
  cursor:pointer; text-wrap:nowrap; text-align:center;
  transition:background-color .2s ease;
}
.dtn-btn-submit:hover, .dtn-btn-submit:active{ background-color:var(--dtk-primary-hover); }
.sd-summary .dtn-btn-submit{ width:100%; }

@keyframes dtnFadeIn{
  from{ opacity:0; transform:translateY(-0.4em); }
  to{ opacity:1; transform:translateY(0); }
}
/* transfer / hosting-for-existing-domain cards (lookup_form2.html) */
#content #domain-lookup_form.flex-container{
  font-family:inherit;
  font-size:1em;
  padding:0;
  gap:16px;
}
#content #domain-lookup_form.flex-container .flex-item{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#content #domain-lookup_form.flex-container .flex-item > div{ padding:12px 16px; }
#content #domain-lookup_form.flex-container .flex-item > div:first-child{
  background:var(--dtk-panel);
  border-bottom:1px solid var(--dtk-border-soft);
  font-weight:600;
}
/* body cell fills the equal-height card and pins the form to the bottom, so both
   cards' submit buttons align with the same comfortable gap to the card edge
   regardless of how far the header text wraps (otherwise the taller-header card's
   button sits tight against the rounded bottom edge). */
#content #domain-lookup_form.flex-container .flex-item > div:last-child{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px 16px 18px;
}
#content #domain-lookup_form.flex-container .flex-item form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
#content #domain-lookup_form.flex-container .flex-item form input[name="domain"]{ flex:1 1 160px; }
#content #domain-lookup_form.flex-container .flex-item form input[type="submit"]{
  padding:.5em 1.6em;
  font-size:15px;
}

/* ============================================================
   18. Transfer pages (transfer.html, transfer_at.html)
   ============================================================ */
/* hide the transfer form only while the hosting-only/transfer choice
   (present when only_hosting is offered) has transfer unchecked */
body:has(input[id="transfer"]:not(:checked)) #transferoptions{ display:none; }
body:has(input[id="transfer"]:checked) #transferoptions{ display:block; }
#onlyhostingoptions{
  margin:2em 0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  padding:1.5em;
}
#onlyhostingoptions fieldset{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1em;
  border:none;
  margin:0;
}
#onlyhostingoptions input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
#onlyhostingoptions label{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:#F9FAFB;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  padding:1em;
  cursor:pointer;
  transition:all 0.2s ease-in-out;
  min-height:120px;
}
#onlyhostingoptions label .dtn-card-title{
  font-size:1.125em;
  font-weight:600;
  color:#111827;
  margin-bottom:0.4444em;
}
#onlyhostingoptions label .dtn-card-info{
  font-size:0.95em;
  color:#6B7280;
}
#onlyhostingoptions label:hover{
  border-color:#1D4ED8;
  background:#EFF6FF;
}
#onlyhostingoptions input:checked + label{
  background:#EFF6FF;
  border-color:#1D4ED8;
  box-shadow:0 2px 6px rgba(29,78,216,0.2);
}
.dtn-submit-btn{
  display:none;
  width:100%;
  max-width:300px;
  margin:1.7778em auto 0;
  padding:0.8889em;
  font-size:1.125em;
  font-weight:600;
  color:#fff;
  background:var(--dtk-primary);
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.2s;
}
.dtn-submit-btn:hover{ filter:brightness(0.8); }
body:has(input#onlyhosting:checked) .dtn-submit-btn{ display:block; }

/* ============================================================
   19. Page sections
   ============================================================ */

/* ---- customer login (login.html / main.html / logout.html, all include
        login_form.html): one centered card, standard login layout.
        Width is vw-based because the #content inner wrapper is a
        shrink-wrapping inline-block. ---- */
#content .lg-page{
  width:min(400px, 92vw);
  margin:1.2em auto 2.5em;
}
#content .lg-page .lg-banner{
  border-radius:var(--dtk-r-md);
  padding:12px 16px;
  margin-bottom:16px;
  line-height:1.5;
  text-align:left;
}
#content .lg-page .lg-banner.lg-ok{
  color:#1a7f37;
  background:#e9f7ee;
  border:1px solid #b7e0c4;
}
#content .lg-page .lg-banner.lg-err{
  color:var(--dtk-error);
  background:var(--dtk-error-weak);
  border:1px solid #f5c2cb;
}
/* PRINT_ALL_ERRORS emits legacy <font color="red"> lines + trailing <br>s */
#content .lg-page .lg-banner.lg-err font{ color:var(--dtk-error); }
#content .lg-page .lg-banner.lg-err br:last-child{ display:none; }
#content .lg-card{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  box-shadow:var(--dtk-shadow-sm);
  padding:30px 28px 22px;
  text-align:center;
}
#content .lg-card .lg-ico{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 10px;
  border-radius:16px;
  background:linear-gradient(135deg, var(--dtk-primary) 0%, #3E8DEC 100%);
  color:#fff;
  box-shadow:0 6px 14px rgba(15,101,213,.25);
}
#content .lg-card .lg-ico svg{ width:26px; height:26px; display:block; }
#content .lg-card .lg-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 22px;
}
#content .lg-card form{ text-align:left; }
#content .lg-card .lg-btn{
  width:100%;
  margin-top:2px;
  padding:12px 18px;
  border:none;
  border-radius:999px;
  background:var(--dtk-primary);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition:background .15s, box-shadow .15s;
}
#content .lg-card .lg-btn:hover{ background:var(--dtk-primary-hover); }
#content .lg-card .lg-btn:active{ background:var(--dtk-primary-active); }
#content .lg-card .lg-btn:focus-visible{ outline:none; box-shadow:var(--dtk-focus); }
#content .lg-card .lg-forgot{ margin-top:16px; font-size:14px; }
#content .lg-register{
  margin-top:18px;
  text-align:center;
  font-size:15px;
  color:var(--dtk-muted);
}
/* quiet secondary links under the card (logout: reseller / affiliate) */
#content .lg-extra{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:26px;
  padding-top:14px;
  border-top:1px solid var(--dtk-border-soft);
  font-size:14px;
}
#content .lg-extra a{ color:var(--dtk-muted); font-weight:400; }
#content .lg-extra a:hover{ color:var(--dtk-primary); }

/* ---- customer/templates/successful_login.html (dashboard) ----
   Fixed sidebar + a fluid cards column. Using grid (not flex-wrap) so the
   cards NEVER wrap underneath the sidebar on mid-width windows -- the card
   column just gets narrower and its inner grid reflows 2->1 columns. Only
   genuinely narrow (mobile) screens stack the sidebar on top. */
/* the shared #content wrapper is an inline-block (shrink-to-fit); on this page
   let it fill #content so the grid below gets the full width to work with --
   otherwise it collapses to content width and shows a single card column */
#content > div:has(> #customer-successfull_login){ display:block !important; }
#customer-successfull_login{
  display:grid;
  grid-template-columns:300px minmax(0, 1fr);
  align-items:start;
  gap:24px;
}
/* the sidemenu sits on the left; the action cards fill the space to its right */
#customer-successfull_login > .home-main{
  min-width:0;
  display:flex;
  grid-column:2;
}
/* the waiting-documents card is a direct child of the page grid (DOM-first so
   mobile shows it BEFORE the sidemenu); on wide screens it tops the cards
   column and the sidemenu runs alongside both rows */
#customer-successfull_login > .home-card--notice{ grid-column:2; grid-row:1; }
#customer-successfull_login:has(> .home-card--notice) > #sidemenu{ grid-column:1; grid-row:1 / span 2; }
@media (max-width:640px){
  #customer-successfull_login{ grid-template-columns:1fr; }
  /* single column: notice card, then sidemenu, then cards (DOM order) */
  #customer-successfull_login > .home-card--notice,
  #customer-successfull_login > .home-main{ grid-column:1; grid-row:auto; }
  #customer-successfull_login:has(> .home-card--notice) > #sidemenu{ grid-column:1; grid-row:auto; }
}

/* ---- modern side navigation ---------------------------------------------
   Replaces the old bordered menu: a clean white card, small-caps section
   labels (NO legacy H3 blue underline), and quiet rows that light up with a
   soft primary pill + a masked, recoloured icon chip on hover. */
#sidemenu{
  flex:1 1 260px;
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  padding:14px 12px;
  color:var(--dtk-ink);
  box-shadow:var(--dtk-shadow-xs);
}
@media screen and (min-width:640px){
  #sidemenu{ flex:0 0 300px; max-width:300px; }
}
#sidemenu .menu-groups{ display:flex; flex-direction:column; gap:20px; }
#sidemenu .menu-group{ margin:0; }
/* section label -- override the legacy `H3{border-bottom:#197cb9}` + h1dot bg */
#content #sidemenu .menu-group__title{
  margin:0 0 6px;
  padding:0 10px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--dtk-muted);
  background:none;
  border:none;
}
/* scoped under #sidemenu: the site header nav (ledl styles.css) also uses
   .menu-item / .menu-list class names -- these rules must not leak there */
#sidemenu .menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
/* no per-item divider borders anymore -- the hover pill carries the structure */
#sidemenu .menu-item{
  display:block;
  margin:0;
  border:none;
  background:none;
}
#content #sidemenu .menu-item a{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--dtk-ink);
  font-weight:500;
  transition:background .15s ease;
}
#content #sidemenu .menu-item a:hover{
  background:var(--dtk-primary-weak);
  text-decoration:none;
}
/* icon chip: soft tile + a mask painted with the primary colour (glyph via --mi) */
#sidemenu .menu-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--dtk-primary-weak);
  transition:background .15s ease;
}
#sidemenu .menu-icon::before{
  content:"";
  width:20px;
  height:20px;
  background:var(--dtk-primary);
  -webkit-mask:var(--mi) center / contain no-repeat;
          mask:var(--mi) center / contain no-repeat;
  transition:background .15s ease;
}
#content #sidemenu .menu-item a:hover .menu-icon{ background:var(--dtk-primary); }
#content #sidemenu .menu-item a:hover .menu-icon::before{ background:#fff; }
#sidemenu .menu-text{
  min-width:0;
  font-size:14px;
  line-height:1.35;
  font-weight:400;
  color:var(--dtk-muted);
}
#sidemenu .menu-text b{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--dtk-ink);
  margin-bottom:1px;
  transition:color .15s ease;
}
#content #sidemenu .menu-item a:hover .menu-text b{ color:var(--dtk-primary); }
/* ---- home action cards (customer/templates/successful_login.html) ----
   A responsive 2-up grid of equal-height cards in the shared card language:
   register (lookup), transfer, external-domain hosting, and the affiliate
   join banner. Every card is icon-on-top with the copy in the body and the
   action (domain field + full-width button, or CTA) pinned to a common
   baseline; the grid collapses to one column on narrow viewports. */
.home-cards{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  align-content:start;
  scroll-margin-top:16px; /* #bestellen anchor target (header "Bestellen" with empty cart) */
}
.home-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 24px;
  border:none;
  border-radius:var(--dtk-r-xl);
  background:var(--dtk-panel);
  box-shadow:none;
  color:var(--dtk-ink);
}
.home-card__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:14px;
  background:var(--dtk-primary);
  color:#fff;
}
.home-card__icon svg{ width:24px; height:24px; display:block; }
.home-card__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.home-card__title{
  margin:0;
  font-size:16px;
  font-weight:600;
  letter-spacing:.1px;
  color:var(--dtk-ink);
}
.home-card__text{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:var(--dtk-muted);
}
/* action row: a domain input group stacked over a full-width button, pinned
   to the bottom so every card's button lands on the same baseline */
.home-card__form{
  margin-top:auto;
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.home-card__form .hc-input{
  display:flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:var(--dtk-r-pill);
  background:#fff;
  box-shadow:var(--dtk-shadow-xs);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.home-card__form .hc-input:focus-within{
  border-color:var(--dtk-primary);
  box-shadow:var(--dtk-focus);
}
.home-card__form .hc-prefix{
  padding:0 2px 0 16px;
  font-size:15px;
  color:var(--dtk-muted);
}
/* #content-scoped: must beat the global `#content input:not([type])` skin
   (the card inputs carry no type attribute) -- the pill wrapper .hc-input
   is the only visible box, the input itself stays chromeless */
#content .home-card__form input[name="domain"]{
  flex:1 1 auto;
  min-width:0;
  padding:11px 16px 11px 4px;
  border:none;
  border-radius:var(--dtk-r-pill);
  background:transparent;
  box-shadow:none;
  color:var(--dtk-ink);
  font-size:15px;
}
#content .home-card__form input[name="domain"]:focus{
  outline:none;
  border:none;
  box-shadow:none;
}
.home-card__form button{
  width:100%;
  padding:11px 16px;
  border:none;
  border-radius:var(--dtk-r-pill);
  background:var(--dtk-primary);
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  transition:background .15s ease;
}
.home-card__form button:hover{
  background:var(--dtk-primary-hover);
}

/* affiliate card: promotional blue-tinted shell + a full-width pill CTA */
#content a.home-card--affiliate{
  text-decoration:none;
  background:linear-gradient(135deg, var(--dtk-primary-weak) 0%, #F8FBFF 100%);
  transition:box-shadow .15s ease, transform .15s ease;
}
#content a.home-card--affiliate:hover{
  box-shadow:var(--dtk-shadow-md);
  transform:translateY(-2px);
}
.home-card--affiliate .home-card__cta{
  margin-top:auto;
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:11px 16px;
  border-radius:var(--dtk-r-pill);
  background:var(--dtk-primary);
  color:#fff;
  font-size:15px;
  font-weight:600;
  text-align:center;
  transition:background .15s ease;
}
#content a.home-card--affiliate:hover .home-card__cta{
  background:var(--dtk-primary-hover);
}

/* waiting/missing documents card (red) -- same shell as the action cards;
   grid placement lives in the successful_login layout section above */
#content .home-card--notice{
  background:var(--dtk-error-weak);
}
.home-card--notice .home-card__icon{
  background:#fff;
  color:var(--dtk-error);
  box-shadow:0 4px 10px rgba(220,43,69,.15);
}
.home-card--notice .home-card__title{
  color:var(--dtk-error);
  font-size:16px;
}
/* second section inside the notice card (e.g. pending 3D Secure payments) */
.home-card__title--sep{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #f2c4ca;
}
.home-card__docs{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.6286em;
  font-size:14px;
  line-height:1.45;
}
.home-card__docs li{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:0.6286em;
  border-bottom:1px solid #f2c4ca;
}
.home-card__docs li:last-child{ border-bottom:none; padding-bottom:0; }
.home-card__docs .hcd-domain{ font-weight:600; color:var(--dtk-ink); word-break:break-word; }
.home-card__docs .hcd-form img{ vertical-align:middle; margin-right:2px; }
#content .home-card--notice a{ color:var(--dtk-error); font-weight:600; }
#content .home-card--notice a:hover{ color:var(--dtk-error-dark, #b42318); }

/* narrow viewports: a touch less padding (grid already drops to one column) */
@media (max-width:560px){
  .home-card{ padding:18px; }
}

/* ---- customer/templates/partner_zone.html (affiliate zone) ----
   Banner-less redesign: hero + copyable referral links, how-it-works steps,
   commission rates and a quiet manage row. Reuses the ce-page/ce-card shell. */
/* the shared #content wrapper is shrink-to-fit; let it fill on this page
   (same trick as the dashboard) so the grids below get a definite width */
#content > div:has(> #customer-partner-zone){ display:block !important; }
#customer-partner-zone{ max-width:960px; margin:0 auto; }
#content #customer-partner-zone .ce-card{ margin-bottom:16px; }

.pz-hero{ margin:4px 0 20px; }
.pz-sub{ margin:6px 0 14px; font-size:15px; color:var(--dtk-muted); line-height:1.5; }
.pz-id{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  font-size:14px;
  color:var(--dtk-muted);
  box-shadow:var(--dtk-shadow-xs);
}
.pz-id b{ color:var(--dtk-ink); font-size:15px; letter-spacing:.3px; }

.pz-note{ margin:0 0 16px; font-size:14px; color:var(--dtk-muted); line-height:1.5; }

/* live stat tiles */
.pz-tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.pz-tile{
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:14px;
  box-shadow:var(--dtk-shadow-xs);
}
.pz-tile b{
  display:block;
  font-size:24px;
  font-weight:700;
  color:var(--dtk-ink);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.pz-tile span{ font-size:13px; color:var(--dtk-muted); }
/* money tiles: smaller so "EUR 12.345,67" fits the narrow tile */
.pz-tile--money b{ font-size:18px; color:var(--dtk-primary); white-space:nowrap; }
/* elements that carry an explanatory native tooltip (title=) */
.pz-tip{ cursor:help; }
.pz-info{ width:13px; height:13px; vertical-align:-2px; margin-left:2px; color:var(--dtk-muted); opacity:.75; }

/* share buttons under the personal link */
.pz-share{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#content .pz-share-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:var(--dtk-ink);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
#content .pz-share-btn svg{ width:15px; height:15px; }
#content .pz-share-btn:hover{
  border-color:var(--dtk-primary);
  color:var(--dtk-primary);
  background:var(--dtk-primary-weak);
  text-decoration:none;
}

/* referral list: one expandable <details> per referred customer */
.pz-empty{ margin:0; font-size:14px; color:var(--dtk-muted); line-height:1.5; }
.pz-reflist{ max-height:440px; overflow-y:auto; }
.pz-ref{ border-bottom:1px solid var(--dtk-border-soft); }
.pz-ref:last-child{ border-bottom:none; }
.pz-ref-sum{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 2px;
  cursor:pointer;
  list-style:none;
  -webkit-user-select:none;
  user-select:none;
}
.pz-ref-sum::-webkit-details-marker{ display:none; }
.pz-ref-caret{ flex:0 0 auto; display:inline-flex; color:var(--dtk-muted); transition:transform .15s ease; }
.pz-ref-caret svg{ width:18px; height:18px; display:block; }
.pz-ref[open] .pz-ref-caret{ transform:rotate(180deg); color:var(--dtk-primary); }
.pz-ref-id{ font-weight:600; font-size:14px; color:var(--dtk-ink); font-variant-numeric:tabular-nums; }
.pz-ref-date{ font-size:13px; color:var(--dtk-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* per-year group header + commission subtotal, between the referral groups */
.pz-year{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding:0 2px 7px;
  border-bottom:1px solid var(--dtk-border);
}
.pz-reflist > .pz-year:first-child{ margin-top:0; }
.pz-ref-sum:hover .pz-ref-id{ color:var(--dtk-primary); }
.pz-ref-orders{ font-size:13px; color:var(--dtk-muted); font-variant-numeric:tabular-nums; }
.pz-ref-amt{ margin-left:auto; font-weight:600; color:var(--dtk-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* per-order commission entries (partner_account) inside the expanded row */
.pz-acct{ padding:2px 2px 12px 32px; display:flex; flex-direction:column; gap:8px; }
.pz-acct-row{ display:flex; align-items:baseline; gap:10px; font-size:14px; }
.pz-acct-oid{ flex:0 0 auto; font-weight:600; color:var(--dtk-ink); white-space:nowrap; }
.pz-acct-date{ flex:1 1 auto; min-width:0; font-size:13px; color:var(--dtk-muted); font-variant-numeric:tabular-nums; }
.pz-acct-amt{ flex:0 0 auto; min-width:78px; text-align:right; font-weight:600; color:var(--dtk-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pz-acct-row > .pz-chip{ flex:0 0 auto; min-width:74px; text-align:center; }
.pz-acct-row--canceled .pz-acct-amt{ text-decoration:line-through; color:var(--dtk-muted); font-weight:500; }
.pz-acct-row--canceled .pz-acct-oid{ color:var(--dtk-muted); font-weight:500; }
/* per-customer overall state row (customer contract) above the product lines */
.pz-acct-contract{ padding-bottom:9px; margin-bottom:2px; border-bottom:1px solid var(--dtk-border-soft); }
.pz-acct-contract .pz-acct-oid{ color:var(--dtk-muted); font-weight:600; }
.pz-chip{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  font-size:13px;
  font-weight:600;
  color:var(--dtk-muted);
  white-space:nowrap;
}
.pz-chip--ok{ background:#e7f6ec; border-color:#bfe5cb; color:#1a7f37; }
.pz-chip--wait{ background:#fff5e0; border-color:#f2dfae; color:#9a6700; }
.pz-chip--bad{ background:var(--dtk-error-weak); border-color:#f2b8bf; color:var(--dtk-error); }

/* payout panel */
.pz-payout-sum{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 4px; }
.pz-payout-label{ font-size:14px; font-weight:600; color:var(--dtk-muted); }
.pz-payout-amt{ font-size:22px; font-weight:800; color:var(--dtk-primary); font-variant-numeric:tabular-nums; }
.pz-payout-sum--pending{ margin-top:2px; }
.pz-payout-sum--pending .pz-payout-amt{ font-size:18px; font-weight:700; color:#9a6700; }
.pz-payout-note{ margin:3px 0 14px; font-size:13.5px; color:var(--dtk-muted); }
.pz-bank{
  margin:0 0 14px;
  padding:10px 14px;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
  font-size:14px;
  font-weight:600;
  color:var(--dtk-ink);
  font-variant-numeric:tabular-nums;
}
#content .pz-manage-link--primary{
  background:var(--dtk-primary);
  border-color:var(--dtk-primary);
  color:#fff;
}
#content .pz-manage-link--primary:hover{
  background:var(--dtk-primary-hover);
  border-color:var(--dtk-primary-hover);
  color:#fff;
}

/* featured personal link + copy button */
.pz-main-label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--dtk-muted);
}
.pz-copy{ display:flex; gap:8px; }
#content .pz-copy input{
  flex:1 1 auto;
  min-width:0;
  padding:11px 14px;
  font-size:15px;
  color:var(--dtk-ink);
  background:var(--dtk-primary-weak);
  border:1px solid #cfe0fb;
  border-radius:var(--dtk-r-md);
}
#content .pz-copy input:focus{ outline:none; border-color:var(--dtk-primary); box-shadow:var(--dtk-focus); }
#content .pz-copybtn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 20px;
  border:1px solid var(--dtk-primary);
  border-radius:var(--dtk-r-md);
  background:var(--dtk-primary);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
#content .pz-copybtn:hover{ background:var(--dtk-primary-hover); border-color:var(--dtk-primary-hover); }
#content .pz-copybtn.is-copied{ background:#1a7f37; border-color:#1a7f37; }

/* deep links: label | url | small copy icon-button */
.pz-deep{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.pz-deep-row{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.pz-deep-label{ font-size:14px; font-weight:600; color:var(--dtk-ink); }
#content .pz-deep-row input{
  min-width:0;
  padding:8px 12px;
  font-size:14px;
  color:var(--dtk-muted);
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
}
#content .pz-deep-row input:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:var(--dtk-focus);
  color:var(--dtk-ink);
}
#content .pz-copybtn--sm{ padding:8px 10px; background:#fff; border:1px solid var(--dtk-border); color:var(--dtk-muted); }
#content .pz-copybtn--sm:hover{ background:var(--dtk-primary-weak); border-color:var(--dtk-primary); color:var(--dtk-primary); }
#content .pz-copybtn--sm.is-copied{ background:#e7f6ec; border-color:#1a7f37; color:#1a7f37; }
.pz-copybtn--sm svg{ width:16px; height:16px; display:block; }

/* two-up: how it works | commissions */
.pz-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }

.pz-step{ display:flex; gap:12px; margin-bottom:14px; }
#content .ce-card .pz-step:last-of-type{ margin-bottom:0; }
.pz-step-num{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
  font-weight:700;
  font-size:14px;
}
.pz-step b{ display:block; font-size:14px; color:var(--dtk-ink); margin:4px 0 3px; }
.pz-step p{ margin:0; font-size:14px; line-height:1.5; color:var(--dtk-muted); }

.pz-rate-row{ display:flex; gap:14px; margin-bottom:14px; }
.pz-rate{
  flex:0 0 auto;
  min-width:58px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
  font-weight:800;
  font-size:17px;
  text-align:center;
  align-self:flex-start;
}
.pz-rate-row b{ display:block; font-size:14px; color:var(--dtk-ink); margin:2px 0 3px; }
.pz-rate-row p{ margin:0; font-size:14px; line-height:1.5; color:var(--dtk-muted); }
.pz-rate-row small{ font-size:13px; color:var(--dtk-muted); opacity:.85; }
.pz-fineprint{
  margin:4px 0 0;
  padding-top:12px;
  border-top:1px solid var(--dtk-border-soft);
  font-size:13.5px;
  color:var(--dtk-muted);
}

/* manage row: stats / bank data / cancel */
.pz-manage{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 8px; }
#content .pz-manage-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:var(--dtk-ink);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
#content .pz-manage-link svg{ width:16px; height:16px; }
#content .pz-manage-link:hover{
  border-color:var(--dtk-primary);
  color:var(--dtk-primary);
  background:var(--dtk-primary-weak);
  text-decoration:none;
}
#content .pz-manage-link--danger{ color:var(--dtk-error); }
#content .pz-manage-link--danger:hover{
  border-color:var(--dtk-error);
  color:var(--dtk-error);
  background:var(--dtk-error-weak);
}

@media (max-width:720px){
  .pz-grid{ grid-template-columns:1fr; }
  .pz-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pz-copy{ flex-wrap:wrap; }
  #content .pz-copybtn{ width:100%; }
  .pz-deep-row{ grid-template-columns:minmax(0,1fr) auto; }
  .pz-deep-label{ grid-column:1 / -1; margin-bottom:-2px; }
}

/* affiliate stats line on the dashboard card (successful_login.html) */
.home-card__stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:8px;
  font-size:13.5px;
  color:var(--dtk-muted);
}
.home-card__stats b{
  color:var(--dtk-primary);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* small referral hint under the order-success notice (domain/hosting/rootserver) */
.dtn-aff-hint{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:9px;
  max-width:560px;
  margin:18px auto 0;
  padding:12px 16px;
  background:var(--dtk-primary-weak);
  border:1px solid #cfe0fb;
  border-radius:12px;
  font-size:14px;
  line-height:1.5;
  color:var(--dtk-ink);
  text-align:left;
}
.dtn-aff-hint svg{ flex:0 0 auto; width:18px; height:18px; margin-top:1px; color:var(--dtk-primary); }
#content .dtn-aff-hint a{ color:var(--dtk-primary); font-weight:600; }

/* ---- customer/templates/remind.html ---- */
.dtn-remind{ max-width:560px; margin:1.5em auto; color:#333336; text-align:center; }
#content .dtn-remind h2{ font-size:22px; font-weight:600; color:#333336; margin:0 0 .4em; }
.dtn-remind p{ color:#6E6F6F; line-height:1.5; }
.dtn-remind .dtn-card{
  padding:1.5em;
  margin:1.5em 0;
  text-align:left;
}
.dtn-remind label{ font-weight:600; display:block; margin-bottom:.4em; }
#content .dtn-remind input[name="email"]{ width:100%; padding:.6em .8em; }
.dtn-remind .dtn-err{ color:var(--dtk-error); font-size:.88em; margin-top:.4em; }
#content .dtn-remind input[type="submit"]{ margin-top:1em; padding:.7em 2.4em; }
#content .dtn-remind a{ color:var(--dtk-primary); }

/* ---- customer/templates/req_pass_change.html ---- */
#content form[name="main"].pass-change{ max-width:520px; margin:1.5em auto; color:#333336; }
#content form[name="main"].pass-change .t-label{ white-space:nowrap; }
#content form[name="main"].pass-change input[type="submit"]{ margin-top:.4em; padding:.7em 2.4em; }

/* ---- customer/templates/req_pass_change_list.html ---- */
#content .pass-list-wrap{ max-width:760px; margin:1.5em auto; color:#333336; line-height:1.6; }
#content .pass-list-wrap table{ width:100%; margin:1em 0; }
#content .pass-list-wrap table th{
  background:var(--dtk-panel);
  font-weight:600;
  font-size:.95em;
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--dtk-border);
}
#content .pass-list-wrap a{ color:var(--dtk-primary); }

/* ---- customer/templates/access.html ---- */
#content .t-data.access-table{ margin-bottom:1.2em; }
#content .t-data.access-table td{ padding:12px 18px; color:#374151; line-height:1.5; }
#content .t-data.access-table .t-error td{ color:var(--dtk-error); }
#content .t-data.access-table input[type="radio"]{ transform:scale(1.1); margin-right:.5em; }
/* divider between MFA option blocks: every option is a <tbody>; draw a hairline
   above each option after the first so its description/button reads as one unit
   and doesn't blur into the next choice. */
#content .access-table tbody:has(.t-head input[type="radio"]) + tbody:has(.t-head input[type="radio"]) .t-head{
  border-top:1px solid #e9edf3;
  padding-top:24px !important;
}
/* shade the whole selected option (header + its description rows), not just the
   header, so the active choice groups visibly with its own text. */
#content .access-table tbody:has(.t-head input[type="radio"]:checked) td{ background:#EAF2FE; }
#content .t-data a{ color:var(--dtk-primary); }
/* small inline action buttons (toggle / send code) */
#content .t-data button{
  background:var(--dtk-primary);
  color:#fff;
  border:none;
  border-radius:22px;
  padding:.45em 1.3em;
  font-size:.9em;
  cursor:pointer;
  transition:background .2s ease;
}
#content .t-data button:hover{ background:var(--dtk-primary-hover); }

/* ---- customer/templates/edit.html ---- */
#content .t-head a{ font-size:.9em; }

/* ---- customer/templates/partner_edit.html / partner_create.html ---- */
#content form[name="main"].partner-form{ max-width:760px; margin:0 auto; display:block; color:#333336; }
#content form[name="main"].partner-form input[type="submit"]{ margin-top:1em; }
#content form[name="main"].partner-form input[type="button"]{ margin-top:1em; }
#content form[name="main"].partner-form a{ color:var(--dtk-primary); }
#content .aff-wrap{ max-width:760px; margin:0 auto; color:#1f2733; }
#content .aff-wrap .reg-hero h1{ margin:0; font-size:1.6em; }
#content .aff-help{ display:block; margin-top:1.2222em; color:var(--dtk-primary); font-size:.9em; }

/* ---- customer/templates/partner_list.html ---- */
#content table.partner-list-table{
  width:100%;
  max-width:800px;
  margin:1.5em auto;
  color:#333336;
}
#content table.partner-list-table td{ padding:10px 16px; }
#content table.partner-list-table .partner-domaintechnik{ padding:0; }
#content table.partner-list-table .partner-domaintechnik img{ max-width:100%; display:block; }
#content table.partner-list-table .partner-header{
  background:var(--dtk-panel);
  border-bottom:1px solid var(--dtk-border);
}
#content table.partner-list-table .partner-header h1{
  margin:0;
  font-size:1.05em;
  font-weight:600;
  color:#333336;
}
#content table.partner-list-table .partner-body,
#content table.partner-list-table .partner-body-desc{ border-bottom:1px solid var(--dtk-border-soft); }
#content table.partner-list-table .partner-body a,
#content table.partner-list-table .partner-body-desc a{
  color:var(--dtk-primary);
  text-decoration:none;
  word-break:break-word;
}
#content table.partner-list-table .partner-body a:hover,
#content table.partner-list-table .partner-body-desc a:hover{ text-decoration:underline; }
#content table.partner-list-table .partner-footer{
  background:var(--dtk-panel);
  border-top:1px solid var(--dtk-border-soft);
  font-size:.9em;
  color:#6E6F6F;
}

/* ---- customer/templates/partner_stats.html ---- */
#content .partner-stats-card{ max-width:640px; margin:1.5em auto; line-height:1.6; }
#content .partner-stats-card h2{ margin-top:0; }
#content .partner-stats-card h3{ font-weight:600; color:#374151; }
#content .partner-stats-card table{ border-collapse:collapse; min-width:60%; }
#content .partner-stats-card table td{
  padding:8px 14px 8px 0;
  border-bottom:1px solid var(--dtk-border-soft);
}
#content .partner-stats-card a{ color:var(--dtk-primary); }

/* ---- customer/templates/partner_new.html ---- */
#content .partner-new-card{ max-width:760px; margin:1.5em auto; line-height:1.6; }
#content .partner-new-card h2{ margin-top:0; }

/* ---- customer/templates/successful_register.html ----
   "registered" confirmation + the send-the-signed-contract steps card
   (reuses the ce-page/ce-card kit + the pz-step number rows). Replaced
   the old .messagecontainer/.message kit -- this page was its last
   user. The success note deliberately does NOT claim "all functions
   available"; the contract card carries the actual state: orders are
   processed once the signed customer contract has arrived. */
#content #customer-successful-register{ margin:1.5em auto; }
/* green confirmation header card */
#content .ce-page .ce-card.srg-done{
  display:flex;
  align-items:center;
  gap:16px;
  background:#e8f6ee;
  border-color:#bfe5cf;
}
#content .srg-check{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:#1F9D57;
  color:#fff;
}
#content .srg-check svg{ width:22px; height:22px; }
#content .srg-title{
  margin:0 0 4px;
  padding:0;
  font-size:22px;
  font-weight:600;
  color:var(--dtk-ink);
  background:none;
  border:none;
}
#content .srg-sub{ margin:0; color:var(--dtk-body); line-height:1.55; }
/* contract steps card */
#content .srg-lead{ margin:0 0 16px; color:var(--dtk-body); line-height:1.6; }
/* the address sits inline in the step text (.pz-step b is display:block) */
#content .srg-mail{
  display:inline;
  font-size:inherit;
  margin:0;
  word-break:break-all;
  color:var(--dtk-ink);
}
#content .srg-cta{ margin-top:18px; }
#content .srg-note{
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--dtk-border-soft);
  font-size:14px;
  color:var(--dtk-muted);
}
/* While the signed contract is still missing the page must not read as
   "all done": .srg-muted shrinks the green confirmation to a slim neutral
   note, and the contract card carries the visual weight instead (amber
   border + icon + "still outstanding" badge). */
#content .ce-page .ce-card.srg-done.srg-muted{
  background:#fff;
  border-color:var(--dtk-border);
  padding:12px 20px;
}
#content .srg-muted .srg-check{ width:30px; height:30px; background:var(--dtk-success-weak); color:var(--dtk-success); }
#content .srg-muted .srg-check svg{ width:15px; height:15px; }
#content .srg-muted .srg-title{ font-size:16px; margin:0; }
#content .srg-muted .srg-sub{ font-size:14px; color:var(--dtk-muted); }
/* "only once" callout -- deliberately a full info box, not small print */
#content .srg-once{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:18px;
  padding:12px 14px;
  background:var(--dtk-info-weak);
  border-radius:var(--dtk-r-sm);
}
#content .srg-once svg{ width:20px; height:20px; flex:none; color:var(--dtk-info); margin-top:1px; }
#content .srg-once b{ display:block; font-size:14px; color:var(--dtk-ink); margin-bottom:2px; }
#content .srg-once p{ margin:0; font-size:14px; line-height:1.5; color:var(--dtk-body); }
#content .ce-page .ce-card.srg-contract{
  position:relative;
  border:2px solid var(--dtk-warning);
  box-shadow:0 12px 32px rgba(247,131,45,.14);
}
/* badge is pinned to the card's top-right corner so it never joins the head's
   flex row (which would wrap and shove the heading down) */
#content .srg-contract .ce-card-head h3{ padding-right:120px; }
#content .srg-contract .srg-badge{
  position:absolute;
  top:24px;
  right:24px;
}
@media (max-width:640px){
  #content .ce-page .ce-card.srg-done{ flex-direction:column; text-align:center; }
  #content .ce-page .ce-card.srg-done.srg-muted{ flex-direction:row; text-align:left; }
  #content .srg-contract .srg-badge{ top:-1em; right:16px; }
}

/* ---- customer/templates/product_list.html ---- */
#content table.product-list-outer{
  width:100%;
  max-width:1000px;
  border:none;
  color:#333336;
}
#content #product-tabs{ display:flex; flex-wrap:wrap; gap:10px; }
#content #product-tabs .tab{
  display:block;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:22px;
  padding:.7em 1.4em;
  cursor:pointer;
  text-align:center;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
#content #product-tabs .tab.hover{ background:var(--dtk-primary-soft); border-color:var(--dtk-primary); }
#content #product-tabs .tab.selected{
  background:#EAF2FE;
  border:1px solid var(--dtk-primary);
  color:var(--dtk-primary);
  font-weight:600;
}
#content #product-tab-content{ border:none; padding:1.2em 0 0; }
#content .product-list{ width:100%; }
#content .product-list thead th{
  background:var(--dtk-panel);
  color:#374151;
  font-weight:600;
  text-align:left;
  font-size:.92em;
  padding:14px 16px;
  border-bottom:1px solid var(--dtk-border);
}
#content .product-list tbody td{ padding:8px 16px; border-bottom:none; }
#content .product-list tbody td hr{
  border:none;
  border-top:1px solid #eef1f5;
  margin:0;
  height:auto;
  background:none;
}

/* ---- customer/templates/ssl_order.html + hosting/templates/package_order.html
       + hosting/templates/confirm_opackage_order.html (order summary) ---- */
#content .product-list.order-summary{ max-width:1000px; margin:0 auto; color:#333336; }
#content .product-list.order-summary tbody td{ padding:14px 16px; }
#content .product-list.order-summary tbody td > div{ display:none; }
#content .product-list.order-summary tfoot td{ padding:10px 16px; border-top:1px solid #eef1f5; }
#content .product-list.order-summary tfoot tr:last-child td{ font-weight:bold; color:var(--dtk-primary); }
#content .agb h3{ font-size:1.05em; color:#333336; }
#content .agb button[type="submit"]{
  background:var(--dtk-primary);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:.72em 2.2em;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease;
}
#content .agb button[type="submit"]:hover{ background:var(--dtk-primary-hover); }
#content .agb button[type="button"]{
  background:#fff;
  color:#333336;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  padding:.72em 1.6em;
  font-size:15px;
  cursor:pointer;
  margin-left:.4em;
  transition:background .2s ease, border-color .2s ease;
}
#content .agb button[type="button"]:hover{ background:#f1f3f5; border-color:#c4ccd6; }
#content .t-input textarea#customer-ssl_order-csr_data{ font-family:monospace; }

/* ---- hosting/templates/hosting_manage.html ---- */
#content table.hosting-manage-card{
  max-width:760px;
  margin:1.5em auto;
  border-collapse:collapse;
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--dtk-shadow-xs);
  line-height:1.7;
}
#content table.hosting-manage-card td{ padding:10px 22px; }
#content table.hosting-manage-card h3{
  margin:.4em 0 0;
  font-size:1.3em;
  font-weight:600;
  color:var(--dtk-primary);
  word-break:break-word;
}
#content table.hosting-manage-card a{ color:var(--dtk-primary); }

/* ---- domain/templates/ze.html (zone editor) ---- */
#domain-ze{ max-width:1000px; margin:0 auto 1.5em; color:#333336; }
#domain-ze h2{ color:var(--dtk-primary); word-break:break-word; }
#domain-ze table.ze-table{ width:100%; margin-bottom:1.5em; }
#domain-ze table.ze-table th{ padding:12px 14px; }
#domain-ze table.ze-table td{
  padding:9px 14px;
  border-bottom:1px solid var(--dtk-border-soft);
  vertical-align:middle;
}
#domain-ze table.ze-table tr:last-child td{ border-bottom:none; }
#domain-ze input:not([type]),
#domain-ze input[type="text"]{ padding:.45em .65em; }
#domain-ze select{ padding:.4em .6em; }
#domain-ze input[type="submit"]{
  padding:.55em 1.6em;
  font-size:15px;
  white-space:nowrap;
}
#domain-ze input[type="submit"][name="delete"]{
  background:#fff;
  color:#333336;
  border:1px solid var(--dtk-border);
}
#domain-ze input[type="submit"][name="delete"]:hover{
  background:#f1f3f5;
  border-color:#c4ccd6;
}

/* ---- domain/templates/expire.html ---- */
#domain-expire{ max-width:1100px; margin:1.5em auto; color:#333336; }
#domain-expire .expire-filter{
  margin-bottom:1.7143em;
  text-align:right;
}
#domain-expire .expire-filter input[type="text"]{
  padding:.4em .6em;
  border:1px solid #ccc;
  border-radius:8px;
}
#domain-expire .expire-filter input[type="submit"]{
  padding:6px 16px;
  font-size:inherit;
  letter-spacing:normal;
}
#domain-expire table.expire-table{ width:100%; border:1px solid var(--dtk-border); }
#domain-expire table.expire-table td{ padding:10px 14px; }
#domain-expire table.expire-table tr.expire-head td{
  background:var(--dtk-panel);
  font-weight:bold;
  border-bottom:1px solid var(--dtk-border);
}
#domain-expire table.expire-table tr:not(.expire-head) td{ border-top:1px solid var(--dtk-border-soft); }
#domain-expire table.expire-table tr:not(.expire-head):hover td{ background:var(--dtk-primary-soft); }
#domain-expire table.expire-table a{ color:var(--dtk-primary); }
#domain-expire .expire-pagination{
  margin-top:1.5em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5em;
}
#domain-expire .expire-pagination a{ margin:0 4px; color:var(--dtk-primary); }

/* ---- expire export panel (domain/templates/expire.html) ---- */
#domain-expire .expire-export{
  background:#f6f7f9;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  padding:1.1em 1.25em;
  margin-bottom:1.25em;
}
#domain-expire .expire-export fieldset{
  border:1px solid var(--dtk-border-soft);
  border-radius:12px;
  padding:.7em .9em 1em;
  margin:0;
  background:#fff;
  transition:opacity .12s;
}
#domain-expire .expire-export legend{
  font-weight:700;
  font-size:14px;
  color:#5b5c60;
  padding:0 .4em;
  text-transform:uppercase;
  letter-spacing:.03em;
}
#domain-expire .ex-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:1em;
  margin-bottom:1em;
}
#domain-expire .ex-what label,
#domain-expire .ex-cols label{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin:0.1714em 1.2571em 0.1714em 0;
  cursor:pointer;
  font-size:14px;
}
#domain-expire .ex-what input,
#domain-expire .ex-cols input{ accent-color:var(--dtk-primary); }
/* domain details are grayed out when "Domains" is unticked */
#domain-expire .ex-cols.is-disabled{ opacity:.45; }
#domain-expire .ex-cols.is-disabled label{ cursor:not-allowed; }
#domain-expire .ex-actions{ display:flex; }
#domain-expire .ex-actions .dtn-search-btn{
  display:inline-flex;
  align-items:center;
  padding:10px 20px;
}
#domain-expire .expire-perpage{
  font-size:14px;
  color:#5b5c60;
  text-align:right;
  margin-bottom:0.6857em;
}
#domain-expire .expire-perpage select{
  padding:6px 10px;
  border:1px solid #d9dde2;
  border-radius:8px;
  background:#fff;
  color:#333336;
  margin-left:.3em;
  cursor:pointer;
}
#domain-expire td.expire-empty{
  text-align:center;
  color:#6b7280;
  padding:2.5143em 1.1429em;
}
@media(max-width:720px){
  #domain-expire .ex-grid{ grid-template-columns:1fr; }
}

/* ---- domain/templates/lookup2.html ---- */
#domain-lookup2{ color:#333336; }
#domain-lookup2 .lookup-note{ font-size:0.9em; color:#6E6F6F; }
#domain-lookup2 table.lookup-table{ margin:0 auto; }
#domain-lookup2 table.lookup-table th{ padding:14px 16px; }
#domain-lookup2 table.lookup-table td{ vertical-align:middle; }
#domain-lookup2 table.lookup-table tr.lookup-row:hover td{ background:var(--dtk-primary-soft); }
#domain-lookup2 table.lookup-table label{ cursor:pointer; }
#domain-lookup2 select{ padding:.35em .6em; }
#domain-lookup2 a{ color:var(--dtk-primary); }

/* ---- domain/templates/lookup_js.html ---- */
#lookup_domains{ margin:0 auto; color:#333336; }
#lookup_domains th{ padding:14px 16px; }
#lookup_domains td{ vertical-align:middle; }
#lookup_domains tr[id]:hover td{ background:var(--dtk-primary-soft); }
#lookup_domains select{ padding:.35em .6em; }

/* ---- domain/templates/calculate_prices.html ---- */
#domain-calculate_prices{ color:#333336; }
#domain-calculate_prices table.price-table{ margin:1.5em auto; }
#domain-calculate_prices table.price-table th{
  background:var(--dtk-panel);
  font-weight:600;
  font-size:.95em;
  padding:14px 16px;
  border-bottom:1px solid var(--dtk-border);
}
#domain-calculate_prices table.price-table td{
  padding:10px 16px;
  border-bottom:1px solid var(--dtk-border-soft);
  vertical-align:top;
}
#domain-calculate_prices table.price-table tbody tr:hover td{ background:var(--dtk-primary-soft); }
#domain-calculate_prices table.price-table tfoot td{
  background:#F9FAFB;
  border-bottom:none;
  border-top:1px solid var(--dtk-border);
}
#domain-calculate_prices table.price-table tfoot tr.price-total td{
  background:#EAF2FE;
  font-weight:bold;
  color:var(--dtk-primary);
}
#domain-calculate_prices .price-form{ text-align:center; margin:1.5em 0; }
#domain-calculate_prices .price-form label{ display:block; margin-bottom:1em; cursor:pointer; }

/* ---- domain/templates/order_confirm.html ----
   Final order summary (step 5). Card per domain in the .ce-card design
   language: header (globe icon + domain + controls), one .oc-item row per
   booked product (registration / hosting package) with a right-aligned
   price stack, followed by a totals card, the FAGG withdrawal <details>
   accordion and the consent checkboxes. */
.domain-spaced{
  font-size:17px;
  font-weight:bold;
  color:var(--dtk-primary);
  letter-spacing:0.03em;
  word-break:break-all;
}
#content form.order-confirm-form{ display:block; width:100%; }
.oc-page{ width:min(920px,94vw); margin:1.5em auto; color:#333336; text-align:left; }

/* compact single costs table (line items -> totals -> savings/free setup).
   No per-item controls: changes are made by going back to selected_domains. */
.oc-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  overflow:hidden;
  font-size:15px;
}
.oc-table thead th{
  background:var(--dtk-panel);
  border-bottom:1px solid var(--dtk-border);
  color:#4a5568;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding:12px 16px;
  text-align:right;
  white-space:nowrap;
}
.oc-table thead th.oc-th-name,
.oc-table thead th.oc-th-period{ text-align:left; }
.oc-table td{ padding:12px 16px; vertical-align:top; }
/* a domain group starts on its registration row (border above);
   the hosting sub-row underneath has no divider, so they read as a unit */
.oc-row-first > td{ border-top:1px solid #eef1f5; }
.oc-table tbody tr:first-child > td{ border-top:none; }
.oc-name{ line-height:1.35; }
.oc-dom{
  display:block;
  font-size:15px;
  font-weight:600;
  color:#1c2c47;
  letter-spacing:.02em;
  word-break:break-all;
}
.oc-svc{ font-size:14px; color:#8a93a3; }
.oc-svc-pkg{
  display:inline-block;
  padding-left:18px;
  position:relative;
  color:#4a5568;
  font-weight:500;
}
.oc-svc-pkg::before{
  content:"";
  position:absolute;
  left:2px; top:.15em;
  width:9px; height:9px;
  border-left:1.5px solid #c4ccd6;
  border-bottom:1.5px solid #c4ccd6;
  border-bottom-left-radius:2px;
}
.oc-period{ white-space:nowrap; color:#4a5568; }
.oc-num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.oc-val{ display:inline-block; }
.oc-num-total{ font-weight:600; color:#1c2c47; }
.oc-star{ color:#c0392b; }
.oc-badge{
  display:inline-block;
  background:#FEF3C7;
  color:#92400E;
  border-radius:999px;
  padding:1px 8px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
}
#content a.oc-claim{
  color:#b45309;
  font-weight:600;
  text-decoration:underline;
}
.oc-offer{ display:block; font-size:13px; color:#d97706; line-height:1.3; margin-bottom:1px; }
/* the offer HTML arrives from the action with an inline red line-through span
   and (for TLD promos) a link around the promo name */
.oc-offer span{ color:#9AA3B2 !important; }
#content .oc-offer a{ color:#d97706; text-decoration:none; font-weight:600; }
#content .oc-offer a:hover{ text-decoration:underline; }

/* totals live in the same table's tfoot */
.oc-table tfoot td{ padding:9px 16px; }
.oc-table tfoot .oc-foot-label{ text-align:right; color:#4a5568; }
.oc-sum td{ border-top:1px solid #eef1f5; }
.oc-sum:first-child td{ border-top:1px solid var(--dtk-border); }
.oc-grand td{
  background:#EAF2FE;
  border-top:1px solid #cfe0fb;
  font-size:16px;
  font-weight:bold;
  color:var(--dtk-primary);
  padding:12px 16px;
}
/* green "good news" chips below the table (savings / free setup).
   Deliberately NOT rows in the totals column: aligned under the grand total they
   read as another subtraction and make the order look free. */
.oc-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:14px auto 0;
}
.oc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--dtk-success-weak);
  border:1px solid #BDE5CE;
  border-radius:999px;
  padding:8px 16px;
  font-size:14px;
  font-weight:600;
  color:#15803D;
  line-height:1.35;
  text-align:left;
}
.oc-chip svg{ width:16px; height:16px; flex:0 0 auto; }
.oc-chip-note{ font-weight:400; font-size:13.5px; color:#3f7a56; }
.oc-notes{
  margin:1.4em auto;
  text-align:center;
  font-size:14px;
  color:#6E6F6F;
  line-height:1.7;
}

/* hosting checkout only: set-your-hosting-password card above the costs table */
.oc-passcard{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  max-width:820px;
  margin:0 auto 22px;
  padding:22px 24px;
  text-align:left;
}
.oc-passcard-title{ font-size:16px; font-weight:600; color:#1c2c47; margin:0 0 4px; }
.oc-passcard-desc{ font-size:14px; color:#6E6F6F; line-height:1.55; margin:0 0 16px; }
.oc-field{ margin-bottom:14px; }
.oc-field:last-child{ margin-bottom:0; }
.oc-field label{ display:block; font-size:14px; font-weight:600; color:#1c2c47; margin-bottom:6px; }
#content .oc-passcard input[type="password"]{ width:100%; box-sizing:border-box; }

.oc-legal{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  max-width:820px;
  margin:0 auto;
  padding:22px 24px 26px;
  text-align:left;
}
.oc-widerruf{
  border:1px solid var(--dtk-border);
  border-radius:12px;
  background:var(--dtk-panel);
  margin-bottom:18px;
  overflow:hidden;
}
.oc-widerruf summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  color:#1c2c47;
  list-style:none;
  -webkit-user-select:none;
  user-select:none;
  transition:background .15s ease;
}
.oc-widerruf summary::-webkit-details-marker{ display:none; }
.oc-widerruf summary:hover{ background:var(--dtk-primary-soft); }
.oc-wid-ico{ display:inline-flex; color:var(--dtk-primary); flex:0 0 auto; }
.oc-wid-ico svg{ width:18px; height:18px; }
.oc-wid-title{ flex:1 1 auto; min-width:0; }
.oc-wid-chevron{
  display:inline-flex;
  color:#8a93a3;
  flex:0 0 auto;
  transition:transform .2s ease;
}
.oc-wid-chevron svg{ width:18px; height:18px; }
.oc-widerruf[open] .oc-wid-chevron{ transform:rotate(180deg); }
.oc-wid-body{
  background:#fff;
  border-top:1px solid var(--dtk-border-soft);
  padding:14px 18px;
  font-size:14px;
  line-height:1.6;
  color:#333336;
}
.oc-wid-body p{ margin:0; }
.oc-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--dtk-border-soft);
  border-radius:12px;
  background:#fff;
  margin-bottom:12px;
  cursor:pointer;
  font-size:14px;
  line-height:1.55;
  transition:border-color .15s ease, background .15s ease;
}
.oc-consent:hover{ border-color:#c4ccd6; }
.oc-consent:has(input:checked){ background:#F4F8FE; border-color:#cfe0fb; }
#content .oc-consent input[type="checkbox"]{
  width:16px;
  height:16px;
  flex:0 0 auto;
  margin:2px 0 0;
  accent-color:var(--dtk-primary);
}
.oc-consent-note{
  font-size:13.5px;
  color:#6E6F6F;
  line-height:1.55;
  padding:0 14px;
  margin:-4px 0 14px;
}
.oc-consent-error{
  color:var(--dtk-error);
  font-size:13.5px;
  font-weight:600;
  padding:0 14px;
  margin:0 0 6px;
}
.oc-submit{ text-align:center; margin-top:20px; }
/* opackage checkout: secondary "back to selection" / "cancel" buttons under the
   primary order button. .btn base sizing only covers a.btn, so size them here */
.oc-altactions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:14px; }
#content .oc-altactions .btn{
  padding:9px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
}
/* opackage SSL-cert hostname picker arrives as pre-styled inline HTML; just give
   it the card frame and contain its floats */
.oc-ssl-host{ overflow:hidden; }
.oc-ssl-host label{ font-size:14px; font-weight:600; color:#1c2c47; }
@media (max-width:920px){
  /* stack the table into cards: hide the head, turn each price cell into a
     label:value line via its data-label */
  .oc-table thead{ display:none; }
  .oc-table, .oc-table tbody, .oc-table tfoot, .oc-table tr, .oc-table td{ display:block; }
  .oc-table{ border-radius:16px; }
  .oc-row-first > td{ border-top:none; }
  .oc-row-first{ border-top:1px solid var(--dtk-border); padding-top:6px; }
  .oc-table tbody tr:first-child{ border-top:none; }
  .oc-name{ padding-bottom:4px; }
  .oc-period, .oc-num{
    position:relative;
    text-align:right;
    white-space:normal;
    padding:4px 14px 4px 140px;
    min-height:1.6em;
  }
  .oc-period::before, .oc-num::before{
    content:attr(data-label);
    position:absolute;
    left:14px; top:4px;
    width:118px;
    color:#8a93a3;
    font-size:12.5px;
    font-weight:500;
    text-align:left;
    text-transform:none;
    letter-spacing:0;
    line-height:1.25;
  }
  .oc-val{ white-space:nowrap; }
  .oc-table tfoot tr{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  .oc-table tfoot td{ padding:10px 16px; }
  .oc-foot-label{ text-align:left; }
  /* the tfoot rows are flex here, so the per-cell backgrounds/borders of the
     sum/total/highlight rows only paint each shrunk cell (background looked
     "cut off" between label and value) -- carry them on the row instead */
  .oc-sum{ border-top:1px solid #eef1f5; }
  .oc-sum:first-child{ border-top:1px solid var(--dtk-border); }
  .oc-sum td{ border-top:none; }
  .oc-grand{ background:#EAF2FE; border-top:1px solid #cfe0fb; }
  .oc-grand td{ background:none; border-top:none; }
  .oc-badges{ flex-direction:column; align-items:stretch; }
  .oc-chip{ border-radius:14px; }
  .oc-legal{ padding:16px 14px 20px; }
}
#content form.order-confirm-form button[type="submit"]{
  background-color:var(--dtk-primary);
  color:#fff;
  border:none;
  padding:0.75em 2.4em;
  border-radius:999px;
  font-size:1.2308em;
  font-weight:bold;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,101,213,.25);
  transition:background-color 0.3s ease;
}
#content form.order-confirm-form button[type="submit"]:hover,
#content form.order-confirm-form button[type="submit"]:active{ background-color:var(--dtk-primary-hover); }

/* ---- domain/templates/order_contacts.html ----
   Each contact block (owner / admin / tech / zone / nameservers / redirection)
   is an accordion card: a header fused to its .t-data table. Secondary blocks
   start collapsed to cut the initial wall of fields; a block auto-expands when
   it contains a validation error (see the template's inline script). */
#domain-order_contacts{ max-width:840px; margin:2em auto; color:#333336; }
#domain-order_contacts form{ display:flex; flex-direction:column; }
#content #domain-order_contacts input[type="submit"]{
  align-self:center;
  font-weight:600;
  border-radius:999px;
  padding:.8em 2.4em;
  box-shadow:0 4px 12px rgba(15,101,213,.25);
}

#content #domain-order_contacts input[type="submit"]:nth-last-child(1 of input[type="submit"]) {
  margin-top:2em;
}

/* accordion header, visually welded to the table below it */
#domain-order_contacts .contacts-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  color:#1c2c47;
  padding:16px 20px 14px;
  margin:1.3889em 0 0;
  border:1px solid var(--dtk-border);
  border-bottom:1px solid #e9edf3;
  border-radius:16px 16px 0 0;
  box-shadow:var(--dtk-shadow-xs);
  font-size:1.08em;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  transition:background .15s ease;
}
#domain-order_contacts .contacts-toggle:hover{ background:var(--dtk-primary-soft); }
#domain-order_contacts .contacts-toggle.collapsed{ border-radius:16px; border-bottom:1px solid var(--dtk-border); }
#domain-order_contacts .contacts-toggle .cs-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--dtk-primary);
}
#domain-order_contacts .contacts-toggle .cs-icon svg{ width:20px; height:20px; }
#domain-order_contacts .contacts-toggle .cs-heading{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
}
#domain-order_contacts .contacts-toggle .cs-title{ line-height:1.2; }
#domain-order_contacts .contacts-toggle .cs-sub{
  font-size:.72em;
  font-weight:400;
  color:#6E6F6F;
  letter-spacing:normal;
  margin-top:2px;
}
#domain-order_contacts .contacts-toggle .cs-chevron{
  flex:0 0 auto;
  display:inline-flex;
  color:#8a93a3;
  transition:transform .2s ease;
}
#domain-order_contacts .contacts-toggle .cs-chevron svg{ width:18px; height:18px; }
#domain-order_contacts .contacts-toggle.collapsed .cs-chevron{ transform:rotate(-90deg); }
/* collapsed toggles show a compact preview of the entered contact data
   instead of the descriptive sub line */
#domain-order_contacts .contacts-toggle .cs-preview{
  display:none;
  font-size:0.8102em;
  font-weight:400;
  color:var(--dtk-muted);
  overflow:hidden;
  text-overflow:ellipsis;
}
#domain-order_contacts .contacts-toggle.collapsed .cs-preview:not(:empty){ display:block; }
#domain-order_contacts .contacts-toggle.collapsed .cs-preview:not(:empty) ~ .cs-sub,
#domain-order_contacts .contacts-toggle.collapsed .cs-sub:has(~ .cs-preview:not(:empty)){ display:none; }

/* the accordion body, fused under its header (square top, rounded bottom).
   Holds inline-label .ce-field rows (same design as the account forms). */
#domain-order_contacts .cs-body{
  margin:0;
  padding:18px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-shadow:var(--dtk-shadow-xs);
}
#domain-order_contacts .contacts-toggle.collapsed + .cs-body{ display:none; }
#domain-order_contacts .cs-body > .ce-field:last-child,
#domain-order_contacts .cs-body > .ce-cols:last-child{ margin-bottom:0; }

/* in-body action bar: "copy from" dropdown / nameserver preset links */
#domain-order_contacts .cs-actions{
  margin:-18px -18px 16px;
  padding:10px 18px;
  min-height:1.4em;
  background:#fbfcfe;
  border-bottom:1px solid #eef1f6;
  font-size:.95em;
}
#domain-order_contacts .cs-actions::after{ content:""; display:table; clear:both; }
#domain-order_contacts .cs-actions select{ width:auto; font-size:1em; }
#domain-order_contacts small{ display:block; color:#6E6F6F; margin-top:0.3em; }

/* Collapse empty nameserver fields (mirrors the #ZE-NS-Table rule on the DNS
   screens): show every filled field plus the first empty one, hide each empty
   field after it. Here the rows are .ce-field wrappers holding name="ns[..]"
   inputs (all carry placeholder=" ", so :placeholder-shown detects empty). */
#domain-order_contacts #ns_data > .ce-field:has(input[name^="ns["]:placeholder-shown):not(:has(~ .ce-field input[name^="ns["]:not(:placeholder-shown))) ~ .ce-field {
  display: none;
}

/* ---- TLD-specific requirement/options blocks (tld/<x>/functions.inc *_options) ----
   The 89 *_options functions all emit the same legacy table markup we must NOT edit
   (a bgcolor header cell + a `#options_data` body table). We wrap their output in
   `.tld-options` (order_contacts / domain_update / transfer) and reskin it here into
   the modern collapsible card used by the contact blocks around it. */
.tld-options{ max-width:100%; margin:26px 0 10px; color:#333336; }
.tld-options #domain-options{ margin:0; }        /* .es wraps its block in this div */
.tld-options br, .tld-options hr{ display:none; }  /* legacy <br>/<hr> spacers */
/* de-table the layout so label/field pairs stack like .ce-field */
.tld-options table{ display:block; width:100%; margin:0; border:none; border-collapse:collapse; }
.tld-options tbody{ display:block; }
.tld-options tr{ display:block; }
.tld-options td{ display:block; padding:0; }

/* clickable header bar (".APP Anforderungen" ...) -- the bgcolor cell */
.tld-options td[bgcolor]{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--dtk-primary-weak);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg) var(--dtk-r-lg) 0 0;
  padding:15px 20px;
  color:var(--dtk-ink);
  cursor:pointer;
}
.tld-options td[bgcolor] font{ font:inherit; }
.tld-options td[bgcolor] b{ flex:1 1 auto; font-weight:600; }
.tld-options td[bgcolor] big{ font-size:17px; font-weight:600; }
.tld-options td[bgcolor]::after{
  content:""; flex:0 0 auto; width:14px; height:9px; background:var(--dtk-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .2s ease;
}
.tld-options:has(#options_data[style*="display: none"]) td[bgcolor]::after{ transform:rotate(-90deg); }

/* body card (`#options_data`) */
.tld-options #options_data{
  border:1px solid var(--dtk-border);
  border-top:none;
  border-radius:0 0 var(--dtk-r-lg) var(--dtk-r-lg);
  background:#fff;
  padding:18px 20px 20px;
  box-shadow:var(--dtk-shadow-xs);
}
.tld-options #options_data > tbody > tr{ margin-top:16px; }
.tld-options #options_data > tbody > tr:first-child{ margin-top:0; }
/* plain explanatory text rows (no control / no checkbox) */
.tld-options #options_data tr:not(:has(input, select)) td{
  color:var(--dtk-muted); font-size:.92em; line-height:1.55;
}
/* field rows: label above, control below (like .ce-field) */
.tld-options #options_data tr:has(select, input:not([type="checkbox"])) > td:first-child{
  color:var(--dtk-ink); font-size:14px; font-weight:600; margin-bottom:6px;
}
.tld-options #options_data select,
.tld-options #options_data input:not([type="checkbox"]):not([type="submit"]){
  width:100%; padding:11px 14px; font-size:1em; color:#333336;
  border:1px solid var(--dtk-input-border); border-radius:12px; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tld-options #options_data select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6F6F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px; padding-right:36px;
}
.tld-options #options_data select:focus,
.tld-options #options_data input:not([type="checkbox"]):focus{
  outline:none; border-color:var(--dtk-primary); box-shadow:0 0 0 3px rgba(20,98,197,.18);
}
/* the small helper text under an input */
.tld-options #options_data td > div{
  margin-top:6px; color:var(--dtk-muted); font-size:.875em!important; line-height:1.5;
}
/* checkbox agreement row (.app) */
.tld-options #options_data label:has(input[type="checkbox"]){
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:12px 14px; border:1px solid var(--dtk-border); border-radius:12px;
  background:var(--dtk-elev); line-height:1.5;
}
.tld-options #options_data input[type="checkbox"]{ width:auto; flex:0 0 auto; margin:2px 0 0; }
/* errors: recolor legacy red font, drop the empty spacer cell */
.tld-options #options_data tr:has(font[color="red"]){ margin-top:6px; }
.tld-options #options_data tr:has(font[color="red"]) > td:first-child:not(:last-child){ display:none; }
.tld-options font[color="red"]{ color:var(--dtk-error)!important; font-weight:500; }

/* ---- domain/templates/domain_renew_promotion.html ---- */
#domain-renew-promotion{
  max-width:560px;
  margin:3em auto;
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:2em 2.2em;
  line-height:1.6;
}
#domain-renew-promotion h4{
  margin:0 0 1em;
  font-size:1.25em;
  font-weight:600;
  letter-spacing:.2px;
  color:#333336;
}
#domain-renew-promotion .renew-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1em;
  flex-wrap:wrap;
  margin:1em 0;
}
#domain-renew-promotion .renew-domain{ font-weight:bold; word-break:break-word; }
#domain-renew-promotion .renew-period{ text-align:right; }
#domain-renew-promotion .renew-agb{
  margin-top:1.5em;
  text-align:center;
}
#domain-renew-promotion input[type="checkbox"]{ margin-right:.4em; }
#domain-renew-promotion button[type="submit"]{
  padding:.72em 2.4em;
  font-size:16px;
  letter-spacing:.3px;
  background:var(--dtk-primary);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
}
#domain-renew-promotion button[type="submit"]:hover,
#domain-renew-promotion button[type="submit"]:active{ background:var(--dtk-primary-hover); }
#domain-renew-promotion .renew-error{ color:var(--dtk-error); font-size:.9em; }

/* ---- domain/templates/whois.html ---- */
#domain-whois{
  max-width:760px;
  margin:1.5em auto;
  color:#333336;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  overflow:hidden;
}
#domain-whois h3{
  margin:0;
  padding:16px 22px;
  background:var(--dtk-panel);
  border-bottom:1px solid var(--dtk-border-soft);
  font-size:1.15em;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--dtk-primary);
  word-break:break-word;
}
#domain-whois .whois-data{
  padding:16px 22px;
  white-space:pre;
  font-family:monospace;
  overflow-x:auto;
}

/* ---- domain/templates/domain_authinfo.html ---- */
#content .authinfo-card{
  max-width:640px;
  margin:1.5em auto;
  line-height:1.7;
}
#content .authinfo-card b{ word-break:break-word; }
#content .authinfo-card a{ color:var(--dtk-primary); }
#content .authinfo-card input[type="submit"]{
  padding:.62em 2.2em;
  font-size:16px;
}

/* ---- domain/templates/subdomain_add.html / subdomain_list.html ---- */
#content .subdomain-card{
  max-width:640px;
  margin:1.5em auto;
  line-height:1.9;
}
#content .subdomain-card input[type="submit"]{
  padding:.62em 2.2em;
  font-size:16px;
  margin-top:.6em;
}
#content .subdomain-wrap{ max-width:900px; margin:1.5em auto; color:#333336; line-height:1.6; }
#content .subdomain-wrap a{ color:var(--dtk-primary); }
#content .subdomain-wrap table{ width:100%; margin:1em 0; }
#content .subdomain-wrap table td{ word-break:break-word; }

/* ---- domain/templates/domain_update.html / domain_update_at.html and
        transfer.html / transfer_at.html (#domain-transfer) ----
   One centered column of contact cards; the whois dump is collapsed
   into a .du-whois accordion at the bottom. */
/* The shared content wrapper injected into #content is display:inline-block
   (shrink-to-fit), so its width tracks the widest child's preferred size.
   Expanding the .du-whois accordion adds a wide monospace dump, which grew
   the wrapper and dragged every contact card wider with it (layout shift).
   Force the wrapper to the full available width so the column below is a
   definite, content-independent size -- same trick as .dtn-wrap / .ce-page. */
#content > div:has(#domain-domain_update),
#content > div:has(#domain-transfer){ width:100%; }
#content :is(#domain-domain_update, #domain-transfer){
  display:block;
  max-width:980px; margin:1.5em auto;
  text-align:left;
}
#content #domain-domain_update > .flex-item{ float:none; width:auto; max-width:none; }
#content :is(#domain-domain_update, #domain-transfer) .du-whois{ clear:both; }
#domain-domain_update .t-data{ width:100%; }
#domain-domain_update .t-iact{
  font-size:.875em; color:#6E6F6F; background:var(--dtk-primary-soft);
  padding:8px 18px; border-bottom:1px solid var(--dtk-border-soft);
}
#domain-domain_update .t-iact a{ font-weight:600; }
#domain-domain_update hr{ display:none; }
#domain-domain_update form > br{ display:none; }
#domain-domain_update form .t-data + .t-data,
#domain-domain_update form > table{ margin-top:1.4em; }
:is(#domain-domain_update, #domain-transfer) .du-whois{ margin:20px 0; }
/* legacy user_logged.css paints #whois_data lightyellow as a side column --
   the details accordion needs to win that id-level rule */
:is(#domain-domain_update, #domain-transfer) #whois_data{
  background:#fff;
  float:none;
  width:auto;
  max-width:none;
  flex:none;
  padding:0;
}
#content .du-whois summary b{ color:var(--dtk-ink); }
#content .du-whois-body{
  padding:14px 22px 18px;
  overflow-x:auto;
  max-width:100%;
  font-family:Consolas, Menlo, monospace;
  font-size:.8125em; line-height:1.6; color:#4b5563;
  word-break:break-word; overflow-wrap:break-word;
  text-align:left;
}
#domain-domain_update form button,
#domain-transfer button{
  padding:.65em 2em;
  font-size:16px;
  border-radius:999px;
  cursor:pointer;
  margin:0 .25em .5em;
  transition:background .2s ease, border-color .2s ease;
}
#domain-domain_update form button[type="submit"],
#domain-transfer button[type="submit"]{
  background:var(--dtk-primary); color:#fff; border:none;
}
#domain-domain_update form button[type="submit"]:hover,
#domain-transfer button[type="submit"]:hover{ background:var(--dtk-primary-hover); }
#domain-domain_update form button[type="reset"],
#domain-domain_update form button[type="button"],
#domain-transfer button[type="reset"],
#domain-transfer button[type="button"]{
  background:#fff; color:#333336; border:1px solid var(--dtk-border-strong);
}
#domain-domain_update form button[type="reset"]:hover,
#domain-domain_update form button[type="button"]:hover,
#domain-transfer button[type="reset"]:hover,
#domain-transfer button[type="button"]:hover{ background:#f1f3f5; border-color:#c4ccd6; }
/* transfer page helpers */
:is(#domain-domain_update, #domain-transfer) .du-intro{
  font-size:18px; margin:0 0 18px; color:var(--dtk-ink);
}
#content .du-note{ margin:0 0 14px; font-size:14px; color:var(--dtk-muted); }
#domain-transfer .du-choice{ display:flex; gap:1.5em; margin:0 0 18px; flex-wrap:wrap; }
#domain-transfer .du-choice label{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; font-weight:500; color:var(--dtk-ink);
}
/* owner block only appears when "change owner" is selected (jQuery
   toggles ui-state-disabled + disables the inputs) */
#domain_owner.ui-state-disabled{ display:none; }
:is(#domain-domain_update, #domain-transfer) .du-actions{ text-align:center; margin:18px 0 8px; }

/* ---- domain/templates/domain_cancel.html ---- */
#content .domain-cancel-card{
  max-width:760px;
  margin:1.5em auto;
  line-height:1.7;
}
#content .domain-cancel-card .cancel-head{ text-align:center; margin-bottom:1em; }
#content .domain-cancel-card .cancel-foot{ text-align:center; margin-top:1em; }

/* ---- domain/templates/claim_info.html / claim_verify.html ---- */
#content .claim-card{ max-width:960px; margin:1.5em auto; }
#content .claim-card h2{ margin:0 0 .6em; }
#content .claim-card .domain-spaced{ color:var(--dtk-primary); word-break:break-word; }
#content .claim-card p.domain-spaced{
  font-size:1.35em;
  font-weight:600;
  margin-top:0;
}
#content .claim-card input[type="submit"]{ font-weight:600; }
#content .claim-card .claim-decline{
  display:inline-block;
  padding:.72em 1.9em;
  background:#fff;
  color:#333336;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
#content .claim-card .claim-decline:hover{ background:#f1f3f5; border-color:#c4ccd6; }

/* ---- domain/templates/dotwienlr.html ---- */
#content .dtn-info-card{
  max-width:760px;
  margin:1.5em auto;
  line-height:1.5;
}

/* ---- rootserver/templates/order_rootserver.html ---- */
#rootserver-order{ max-width:960px; margin:1.5em auto; color:#333336; }
#rootserver-order table.rs-table{ width:100%; }
#rootserver-order table.rs-table th{
  background:var(--dtk-panel);
  font-weight:600;
  font-size:1.05em;
  letter-spacing:.2px;
  padding:14px 18px;
  border-bottom:1px solid var(--dtk-border-soft);
}
#rootserver-order table.rs-table td{ padding:9px 18px; vertical-align:top; border-bottom:none; }
#rootserver-order .rs-error{ color:var(--dtk-error); }
#rootserver-order a{ color:var(--dtk-primary); }
#rootserver-order input[type="checkbox"]{ margin-right:.4em; }
#rootserver-order label{ cursor:pointer; }
#rootserver-order input[type="submit"]{ font-weight:bold; }
#rootserver-order td.rs-vat{ font-size:.9em; text-align:center; padding:1em; }
#rootserver-order .rs-editlink{ text-align:center; margin:1.5em 0; }

/* ============================================================
   20. Shared domain lookup widget (inc/dtapi/lookup.php,
       rendered via PRINT_DTAPI_LOOKUP on successful_login,
       lookup2, lookup_js, selected_domains)
   ------------------------------------------------------------
   The widget ships its own scoped <style> block that appears
   AFTER modern.css in the document, so every rule here carries
   the #content id prefix to win specificity.
   ============================================================ */

/* card instead of blue gradient */
#content form.dt-lookup-form{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  margin:0 0 1.2em;
  padding:1.3em 1.5em 1em;
  color:#333336;
}

/* the mode/style toggle pane no longer overlays a hero banner. Use flex so it
   keeps its own height (its children were collapsing it to 0 and overlapping
   the title) and so the toggles wrap instead of crowding on narrow screens. */
#content form.dt-lookup-form > div.dt-buttonpane{
  position:static;
  height:auto;
  overflow:visible;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:.4em;
  margin-bottom:.6em;
}
#content form.dt-lookup-form > div.dt-buttonpane > *{ float:none; margin:0; }

/* the deeper "Choose all / Deselect all / Toggle choice" pill panes (inside the
   TLD category tabs and the bottom action bar) ship their buttons with
   float:right, which collapses the pane to zero height and lets the pills ride
   up and overlap the category tabs. Render every form buttonpane as a
   self-contained, right-aligned row that clears the tabs above it. */
#content form.dt-lookup-form .dt-buttonpane{
  display:flex;
  flex-wrap:wrap;
  /* the buttons were authored in reverse DOM order to be read right-to-left
     under float:right; row-reverse keeps that intended reading order
     ("Choose all | Deselect all | Toggle") now that they are flex items */
  flex-direction:row-reverse;
  justify-content:flex-start;
  align-items:center;
  gap:6px;
  clear:both;
}
#content form.dt-lookup-form .dt-buttonpane > *{ float:none; margin:0; }

/* widget title */
#content .dt-lookup-title{
  font-size:24px;
  font-weight:600;
  letter-spacing:.3px;
  color:#333336;
  margin:0 0 0.7333em;
  text-align:center;
  text-shadow:none;
  background:none;
  border:none;
}


/* search row */
#content form.dt-lookup-form .dt-lookup-domain label{
  color:#6E6F6F;
  font-size:1.25em;
}
#content form.dt-lookup-form .dt-lookup-domain input[type="text"]{
  border:1px solid var(--dtk-input-border);
  border-radius:12px;
  background:#fff;
  color:#333336;
  padding:.45em .7em;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#content form.dt-lookup-form .dt-lookup-domain input[type="text"]:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.18);
}

/* sticky search bar (scrolled state) */
#content form.dt-lookup-form .dt-lookup-domain.dt-lookup-domain-fixed > div:last-child > *{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  align-items:center;   /* line up the "www." label, input and button */
  gap:8px;              /* and give them breathing room */
}
/* the "www." label defaults to align-self:flex-end (rs-flex__i--end) + a
   3px margin -- neutralize so everything sits on one centered baseline */
#content form.dt-lookup-form .dt-lookup-domain.dt-lookup-domain-fixed > div:last-child > * > *{
  margin:0;
  align-self:center;
}

/* floating "Add to cart" bar (result, scrolled state): the widget wraps the
   pill button in a light-blue, square-cornered backing (#cfe4f1) whose corners
   poke out around the pill -> make the backing transparent so only the pill and
   its soft white halo show. */
#content form.dt-lookup-result .dt-buttonpane-submit-fixed > div > div{
  background:transparent none;
  border-radius:999px;
}

/* primary action buttons -> brand pill */
#content form.dt-lookup-form button.ui-priority-primary,
#content form.dt-lookup-result button.ui-priority-primary{
  background:var(--dtk-primary) none;
  color:#fff;
  border:1px solid var(--dtk-primary);
  border-radius:999px;
  padding:.55em 1.9em;
  cursor:pointer;
  box-shadow:none;
  text-shadow:none;
  font-weight:normal;
  transition:background .2s ease;
}
#content form.dt-lookup-form button.ui-priority-primary:hover,
#content form.dt-lookup-form button.ui-priority-primary.ui-state-hover,
#content form.dt-lookup-result button.ui-priority-primary:hover,
#content form.dt-lookup-result button.ui-priority-primary.ui-state-hover{
  background:var(--dtk-primary-hover) none;
  border-color:var(--dtk-primary-hover);
  color:#fff;
}
#content form.dt-lookup-form button.ui-priority-primary .ui-button-text,
#content form.dt-lookup-result button.ui-priority-primary .ui-button-text{
  padding:0;
}

/* secondary/utility buttons and mode links -> ghost chips */
#content form.dt-lookup-form .ui-priority-secondary,
#content form.dt-lookup-result .ui-priority-secondary,
#content form.dt-lookup-form a.dt-toggle-mode{
  background:#fff none;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  color:#333336;
  opacity:1;
  filter:none;
  font-weight:normal;
  text-decoration:none;
  text-shadow:none;
  box-shadow:none;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
/* result-side secondary chips keep a subtle tinted hover */
#content form.dt-lookup-result .ui-priority-secondary:hover,
#content form.dt-lookup-result .ui-priority-secondary.ui-state-hover{
  background:var(--dtk-primary-soft) none;
  border-color:#9db9dd;
  color:#333336;
}
/* form-side secondary chips: no hover effect (per request) -- keep base look */
#content form.dt-lookup-form .ui-priority-secondary:hover,
#content form.dt-lookup-form .ui-priority-secondary.ui-state-hover,
#content form.dt-lookup-form a.dt-toggle-mode:hover{
  background:#fff none;
  border-color:var(--dtk-border);
  color:#333336;
}
#content form.dt-lookup-form button.ui-priority-secondary,
#content form.dt-lookup-result button.ui-priority-secondary{
  padding:.3em .95em;
}
#content form.dt-lookup-form a.dt-toggle-mode{ padding:.3em .95em .3em .6em; }
#content form.dt-lookup-form .ui-priority-secondary .ui-button-text,
#content form.dt-lookup-result .ui-priority-secondary .ui-button-text{ padding:0; }
/* icon buttons (Choose all / none / toggle): leave room so the jQuery-UI
   sprite icon doesn't sit on top of the label -- needed on the result too */
#content form.dt-lookup-form .ui-button-text-icon-primary .ui-button-text,
#content form.dt-lookup-result .ui-button-text-icon-primary .ui-button-text{ padding:0 0 0 1.4em; }

/* category tabs */
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav{
  background:none;
  border:none;
  padding:0;
  margin:0 0 .4em;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li{
  background:#fff none;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  margin:0;
  float:none;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease;
}
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li a{
  float:none;
  display:block;
  color:#333336;
  text-decoration:none;
  font-weight:normal;
  padding:.35em 1em;
}
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li:hover{
  background:var(--dtk-primary-soft) none;
  border-color:#9db9dd;
}
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li.ui-tabs-active,
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li.ui-state-active{
  background:#EAF2FE none;
  border-color:var(--dtk-primary);
}
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li.ui-tabs-active a,
#content :is(form.dt-lookup-form, form.dt-lookup-result) .ui-tabs-nav li.ui-state-active a{
  color:var(--dtk-primary);
  font-weight:600;
}

/* ------------------------------------------------------------
   TLD category accordion (the widget auto-switches from tabs to
   accordion below 500px form width). The jQuery-UI sprite icon
   used to sit underneath the category name; replace it with a
   masked chevron and give the header a flex layout with a
   selected-count pill + total-TLD-count badge on the right.
   ------------------------------------------------------------ */
#content form.dt-lookup-form .dt-tld-group legend a,
#content form.dt-lookup-form .ui-accordion-header a{
  color:#333336;
  text-decoration:none;
  font-weight:600;
}
#content form.dt-lookup-form .dt-tld-group legend a{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
}
#content form.dt-lookup-form .dt-tld-group .dt-tld-gname{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:break-word;
}
#content form.dt-lookup-form .ui-accordion-header{
  background:var(--dtk-panel) none;
  border:1px solid var(--dtk-border-soft);
  border-radius:12px;
  text-shadow:none;
}
#content form.dt-lookup-form .dt-tld-group legend.ui-accordion-header{
  position:relative;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:12px 14px 12px 40px;
  font-size:15px;
}
#content form.dt-lookup-form .ui-accordion-header.ui-state-active{
  background:#EAF2FE none;
  border-color:var(--dtk-primary);
}
/* the jQuery-UI sprite triangle -> masked chevron, vertically centered
   in the reserved 40px left padding instead of underneath the label */
#content form.dt-lookup-form .ui-accordion-header .ui-icon{
  position:absolute;
  left:13px;
  top:50%;
  width:16px;
  height:16px;
  margin:0;
  transform:translateY(-50%);
  background:#6E6F6F none;
  background-image:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .18s ease;
}
#content form.dt-lookup-form .ui-accordion-header.ui-state-active .ui-icon{
  transform:translateY(-50%) rotate(90deg);
  background-color:var(--dtk-primary);
}
/* total number of TLDs in the category (server-rendered, static) */
#content form.dt-lookup-form .dt-tld-group .dt-tld-count{
  flex:none;
  font-size:12.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--dtk-muted);
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  padding:1px 9px;
  white-space:nowrap;
  float:none;
}
/* selected-count pill: the widget JS writes the number of checked TLDs
   (empty when none). It must keep a layout box even when empty --
   jQuery's :visible guard skips zero-sized markers and the counter
   would never update again -- so hide it via visibility, not display. */
#content form.dt-lookup-form .dt-tld-group .dt-tld-marked{
  flex:none;
  display:inline-block;
  min-width:4px;
  min-height:4px;
  visibility:hidden;
  font-size:12.5px;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
  float:none;
}
#content form.dt-lookup-form .dt-tld-group .dt-tld-marked:not(:empty){
  visibility:visible;
  background:var(--dtk-primary);
  color:#fff;
  border-radius:999px;
  padding:1px 9px;
}
#content form.dt-lookup-form .dt-tld-group .dt-tld-marked:not(:empty)::before{
  content:"\2713\00a0";
  font-size:11px;
}
/* accordion content panel: full-width card body under the header */
#content form.dt-lookup-form .ui-widget-content.ui-accordion-content{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:14px 6px 6px;
  overflow:visible;
}

/* TLD checkbox items: the widget lays them out as floated 5em blocks,
   which collides and mis-wraps on narrow screens -- use a responsive
   grid of checkbox chips instead */
#content form.dt-lookup-form .dt-tld-line{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:2px 8px;
  margin:0;
  clear:both;
}
#content form.dt-lookup-form .dt-tld{
  float:none;
  width:auto;
  margin:0;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:10px;
  padding:6px 9px;
  white-space:nowrap;
  box-sizing:border-box;
}
#content form.dt-lookup-form .dt-tld:hover{ background:var(--dtk-primary-soft); }
#content form.dt-lookup-form .dt-tld label{
  cursor:pointer;
  color:#333336;
  margin:0;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
}
#content form.dt-lookup-form .dt-tld input[type="checkbox"],
#content form.dt-lookup-form .dt-tld input[type="radio"]{
  accent-color:var(--dtk-primary);
  margin:0;
  flex:none;
  width:16px;
  height:16px;
}
/* alphabet section dividers inside big TLD groups span the whole grid */
#content form.dt-lookup-form .dt-tld-section,
#content form.dt-lookup-form .dt-tld-section1{
  grid-column:1 / -1;
  position:static;
  top:auto;
  margin:10px 2px 0;
  padding:4px 2px 0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-align:left;
  color:#6E6F6F;
}
#content form.dt-lookup-form .dt-tld-section1{
  border:none;
  margin:0 2px;
  padding:0 2px;
}

/* error / warning notices inside the widget */
#content form.dt-lookup-form .ui-state-error,
#content form.dt-lookup-result .ui-state-error{
  background:#fdecec none;
  border:1px solid #f5c2c7;
  color:#b42318;
  border-radius:12px;
  padding:.6em .9em;
  text-shadow:none;
}
#content form.dt-lookup-form .ui-state-highlight,
#content form.dt-lookup-result .ui-state-highlight{
  background:#EAF2FE none;
  border:1px solid #cfe0fb;
  color:#333336;
  border-radius:12px;
  padding:.6em .9em;
  text-shadow:none;
}

/* bottom action bar of the normal form */
#content form.dt-lookup-form .dt-actionbar{
  border-top:1px solid var(--dtk-border-soft);
  margin-top:1em;
  padding:.6em .3em .3em;
}
/* the primary submit wrapper takes its own full-width row so the
   button stays centered under the chip row */
#content form.dt-lookup-form .dt-actionbar > div{ flex:1 1 100%; }

/* result panel */
#content form.dt-lookup-result{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:1em 1.3em;
  margin:1.2em 0;
  color:#333336;
}
#content form.dt-lookup-result .dt-result-info{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5em 1.5em;
  align-items:center;
  margin:.4em 0 .8em;
}
#content form.dt-lookup-result .dt-result-info a{ color:var(--dtk-primary); }
#content form.dt-lookup-result .dt-filterpane{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:.8em;
}

/* lookup_js.html polling table */
#content #lookup_domains{
  width:min(900px, 100%);
  margin:0 auto;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--dtk-shadow-xs);
}
#content #lookup_domains th{
  background:var(--dtk-panel);
  text-align:left;
  font-weight:600;
  padding:12px 16px;
  border-bottom:1px solid var(--dtk-border-soft);
}
#content #lookup_domains td{
  padding:10px 16px;
  border-top:1px solid var(--dtk-border-soft);
}

/* widget scoped-css fixes: it paints .ui-button-text white and actives green */
#content form.dt-lookup-form .ui-button .ui-button-text,
#content form.dt-lookup-result .ui-button .ui-button-text{ color:inherit; }
#content form.dt-lookup-form .ui-icon,
#content form.dt-lookup-result .ui-icon{ background-image:url("images/ui-icons_222222_256x240.png"); }
#content form.dt-lookup-form .ui-priority-primary .ui-icon,
#content form.dt-lookup-result .ui-priority-primary .ui-icon{ background-image:url("images/ui-icons_ffffff_256x240.png"); }

/* TLD buttonset mode (labels as toggle chips) */
#content form.dt-lookup-form .dt-tld label.ui-button{
  background:#fff none;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  color:#333336;
  text-shadow:none;
  box-shadow:none;
}
#content form.dt-lookup-form .dt-tld label.ui-button.ui-state-hover{ background:var(--dtk-primary-soft) none; border-color:#9db9dd; color:#333336; }
#content form.dt-lookup-form .dt-tld label.ui-button.ui-state-active{ background:#EAF2FE none; border-color:var(--dtk-primary); color:var(--dtk-primary); }
#content form.dt-lookup-form .dt-tld .ui-button.ui-state-active .ui-button-text{ color:var(--dtk-primary); }

/* alphabet divider lines inside big TLD groups */
#content form.dt-lookup-form .dt-tld-section{ border-top:1px solid var(--dtk-border-soft); color:#6E6F6F; }

/* result tabs container + header band -> flat */
#content form.dt-lookup-result .dt-result-tabs{
  background:none;
  border:none;
  padding:0;
}
#content form.dt-lookup-result .dt-result-tabs > ul{
  background:none;
  border:none;
  margin-bottom:.6em;
}
/* "new lookup" link -> ghost chip */
#content form.dt-lookup-result a.dt-goto-lookupform{
  background:#fff none;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  color:var(--dtk-primary);
  padding:.35em 1em;
  font-weight:normal;
  text-decoration:none;
  text-shadow:none;
  box-shadow:none;
  transition:background .2s ease, border-color .2s ease;
}
#content form.dt-lookup-result a.dt-goto-lookupform:hover{
  background:var(--dtk-primary-soft) none;
  border-color:#9db9dd;
}
/* result table skin on top of rs-table.css */
#content form.dt-lookup-result table.rs-table{
  border:1px solid var(--dtk-border);
  border-radius:16px;
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
#content form.dt-lookup-result table.rs-table thead tr{ background:var(--dtk-panel); }
#content form.dt-lookup-result table.rs-table thead td,
#content form.dt-lookup-result table.rs-table thead th{
  background:var(--dtk-panel);
  border-bottom:1px solid var(--dtk-border);
  color:#333336;
  padding:12px 10px;
}

/* promo prices: the API rows ship a red inline-styled price span and a bare
   "Aktion" link -- restyle to the live-site language (orange pill + muted
   strikethrough + calm bold price) */
#content form.dt-lookup-result span[style*="color:red"]{
  color:#333336 !important;
  font-weight:600;
}
#content form.dt-lookup-result table.rs-table .rs-table__element--hide > a,
#content form.dt-lookup-result table.rs-table td.is-text-align-right > a{
  display:inline-block;
  background:#f7832d;
  color:#fff !important;
  text-decoration:none;
  border-radius:999px;
  padding:1px 10px;
  font-size:13px;
  font-weight:600;
  line-height:1.7;
  white-space:nowrap;
}
#content form.dt-lookup-result table.rs-table .rs-table__element--hide > a:hover,
#content form.dt-lookup-result table.rs-table td.is-text-align-right > a:hover{ background:#e2701f; }
#content form.dt-lookup-result table.rs-table .rs-table__element--hide > a + span,
#content form.dt-lookup-result table.rs-table td.is-text-align-right > a + span{ color:#8b8e93; }

/* ============================================================
   restructured lookup result rows (name | price | action).
   The widget's own scoped <style> still carries absolute cell
   positioning + nth-child rules for the retired 8-column layout;
   these #content-prefixed rules win and lay the 3 cells out plainly.
   ============================================================ */
#content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > th,
#content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > td{
  position:static;
  order:0;
  align-self:auto;
  vertical-align:middle;
  padding:11px 12px;
}
#content form.dt-lookup-result .dt-c-name{
  text-align:left;
  font-weight:600;
  font-size:1.05em;
  word-break:break-word;
}
#content form.dt-lookup-result .dt-c-name label{ cursor:pointer; }
#content form.dt-lookup-result .dt-c-price{
  text-align:right;
  white-space:nowrap;
  line-height:1.3;
  width:1%;
}
#content form.dt-lookup-result .dt-price-annual{ display:block; font-weight:600; color:var(--dtk-ink); }
/* "/Jahr" on normal prices, "1. Jahr" on promo prices; !important beats the
   restyled red inline span above */
#content form.dt-lookup-result .dt-price-per{
  font-size:.875em;
  font-weight:400;
  color:var(--dtk-muted) !important;
}
#content form.dt-lookup-result .dt-price-setup{ display:block; font-size:.875em; color:var(--dtk-muted); }
#content form.dt-lookup-result .dt-price-setup:empty{ display:none; }
/* offer line above the promo price: struck-through normal price + "Aktion" tag */
#content form.dt-lookup-result .dt-price-offer{
  display:block;
  font-size:.875em;
  font-weight:400;
  color:var(--dtk-muted);
}
#content form.dt-lookup-result .dt-price-offer:empty{ display:none; }
#content form.dt-lookup-result .dt-price-offer span[style*="line-through"]{ color:var(--dtk-muted); }
#content form.dt-lookup-result .dt-price-offer > a{
  display:inline-block;
  background:#f7832d;
  color:#fff !important;
  text-decoration:none;
  border-radius:999px;
  padding:0 8px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.7;
  white-space:nowrap;
  vertical-align:1px;
}
#content form.dt-lookup-result .dt-price-offer > a:hover{ background:#e2701f; }
#content form.dt-lookup-result .dt-c-action{ text-align:right; }
/* registration period: stays hidden when the TLD only allows one period (the
   select still submits period[domain]); TLDs with a real choice (.com etc.)
   get a visible labelled select next to the "Select" pill */
#content form.dt-lookup-result .dt-period-hidden{ display:none; }
#content form.dt-lookup-result .dt-period-hidden:has(option:nth-child(2)){
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:12px;
}
#content form.dt-lookup-result .dt-period-label{ color:var(--dtk-muted); font-size:14px; }
#content form.dt-lookup-result .dt-period-hidden select{
  border:1px solid var(--dtk-input-border);
  border-radius:10px;
  background:#fff;
  color:#333336;
  padding:5px 8px;
  font-size:14px;
  max-width:180px;
}
#content form.dt-lookup-result .dt-period-hidden select:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.18);
}

/* rs-table.css zeroes the borders of :empty cells, which cut the row line at
   the price column of rows without a price (reserved/error) -- restore it */
#content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > td:empty{
  border-width:1px 0;
}

/* favoured/A-Z separator: quiet divider instead of the old blue bar */
#content form.dt-lookup-result .rs-table > tbody > .dt-separator > :first-child{
  background:var(--dtk-panel);
  color:var(--dtk-muted);
  font-size:12.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:4px 16px;
}
#content form.dt-lookup-result .rs-table > tbody > .dt-separator > * > span{ color:var(--dtk-muted); }

/* the tabs/accordion style switcher chip is developer chrome -- hide it */
#content form.dt-lookup-form .dt-toggle-style{ display:none !important; }

/* available -> explicit cart toggle; the label flips a visually-hidden
   checkbox (kept :visible for the widget's select-all counting).
   Three unmistakable states:
     off      "+ Add to cart"       blue outline pill
     in cart  "check In cart"       green filled pill
     hover on an in-cart row -> "x Remove from cart" red outline pill */
#content form.dt-lookup-result .dt-select-cb{
  position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none;
}
#content form.dt-lookup-result .dt-select-btn{
  display:inline-block;
  padding:7px 18px;
  border:1px solid var(--dtk-primary);
  border-radius:999px;
  background:#fff;
  color:var(--dtk-primary);
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
#content form.dt-lookup-result .dt-select-btn > span{
  display:none;
  align-items:center;
  gap:7px;
}
#content form.dt-lookup-result .dt-select-btn svg{ width:14px; height:14px; flex:0 0 auto; }
#content form.dt-lookup-result .dt-select-btn .dt-sel-off{ display:inline-flex; }
#content form.dt-lookup-result .dt-select-btn:hover{ background:var(--dtk-primary-weak); }
/* in the cart: green + check, no ambiguity with a mere highlight */
#content form.dt-lookup-result tr.dt-checked .dt-select-btn{
  background:var(--dtk-success);
  border-color:var(--dtk-success);
  color:#fff;
}
#content form.dt-lookup-result tr.dt-checked .dt-select-btn .dt-sel-off{ display:none; }
#content form.dt-lookup-result tr.dt-checked .dt-select-btn .dt-sel-on{ display:inline-flex; }
/* hovering an in-cart row's button announces the remove action */
#content form.dt-lookup-result tr.dt-checked .dt-select-btn:hover{
  background:#fff;
  border-color:#DC2626;
  color:#DC2626;
}
#content form.dt-lookup-result tr.dt-checked .dt-select-btn:hover .dt-sel-on{ display:none; }
#content form.dt-lookup-result tr.dt-checked .dt-select-btn:hover .dt-sel-rm{ display:inline-flex; }

/* taken -> ownership prompt + direct transfer link for that domain */
#content form.dt-lookup-result .dt-taken-txt{ color:var(--dtk-muted); font-size:.95em; }
#content form.dt-lookup-result a.dt-transfer-link{
  color:var(--dtk-primary);
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
}
#content form.dt-lookup-result a.dt-transfer-link:hover{ text-decoration:underline; }

/* reserved / error -> "Not available" with an info marker whose title holds
   the registry comment (native tooltip) */
#content form.dt-lookup-result .dt-unavail{ color:var(--dtk-muted); font-weight:500; }
#content form.dt-lookup-result .dt-unavail .dt-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:3px;
  border-radius:999px;
  background:var(--dtk-border-strong);
  color:#fff;
  font-size:13px; font-weight:700; font-style:normal;
  line-height:1;
  cursor:help;
  vertical-align:middle;
}

/* ============================================================
   Lookup on narrow screens. Below 40em the rs-table switches to
   its flex "block" mode, which collided with the desktop column
   styling above (1%-wide nowrap price cells were painted over by
   the following cell -> clipped prices, overlapping promo pills).
   Lay each result row out as a self-contained card grid instead.
   ============================================================ */
@media (max-width:39.9375em){
  #content form.dt-lookup-form{ padding:1em .9em .8em; }
  #content .dt-lookup-title{ font-size:20px; margin:0 0 0.88em; }
  #content form.dt-lookup-result{ padding:.9em .8em; }

  #content form.dt-lookup-result table.rs-table,
  #content form.dt-lookup-result table.rs-table > thead,
  #content form.dt-lookup-result table.rs-table > tbody,
  #content form.dt-lookup-result table.rs-table > tfoot{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    float:none;
  }
  #content form.dt-lookup-result table.rs-table{
    border:1px solid var(--dtk-border);
    border-radius:14px;
    overflow:hidden;
  }
  /* the column-name header row and the empty spacer row make no
     sense in card mode */
  #content form.dt-lookup-result table.rs-table > thead > tr.rs-table__row--col-names,
  #content form.dt-lookup-result table.rs-table > tbody > tr:not(.dt-domain):not(.dt-separator){
    display:none;
  }
  #content form.dt-lookup-result table.rs-table > thead > tr,
  #content form.dt-lookup-result table.rs-table > tfoot > tr{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 14px;
    float:none;
  }
  #content form.dt-lookup-result table.rs-table > thead > tr{ background:var(--dtk-panel); }
  #content form.dt-lookup-result table.rs-table > tfoot > tr{ border-top:1px solid var(--dtk-border-soft); }
  #content form.dt-lookup-result table.rs-table > thead > tr > th,
  #content form.dt-lookup-result table.rs-table > thead > tr > td,
  #content form.dt-lookup-result table.rs-table > tfoot > tr > td{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:0;
    border:none;
    background:transparent;
    float:none;
    overflow:visible;
    text-align:left;
  }
  /* the VAT notice and the select-all chip pane ship inline floats */
  #content form.dt-lookup-result table.rs-table > thead td > .ui-state-highlight,
  #content form.dt-lookup-result table.rs-table > tfoot td > .ui-state-highlight{
    float:none !important;
    display:block;
    margin-top:8px;
  }
  #content form.dt-lookup-result table.rs-table > tfoot td > .dt-buttonpane{
    float:none !important;
  }

  /* result rows -> cards: domain name on top, price below it,
     action (period + select pill) to the right; the action drops
     to its own right-aligned line when it doesn't fit next to the
     price (a grid auto column starved the price track instead) */
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 12px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    margin:0;
    background:#fff;
    border:none;
    border-top:1px solid var(--dtk-border-soft);
    float:none;
  }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain.dt-checked{ background:#EAF2FE; }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > th,
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > td{
    display:block;
    width:auto;
    max-width:100%;
    min-width:0;
    flex:0 1 auto;
    padding:0;
    border:none;
    background:transparent;
    overflow:visible;
    float:none;
    margin:0;
  }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > .dt-c-name{
    flex:1 1 100%;
    font-size:16px;
    line-height:1.35;
    word-break:break-word;
  }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > .dt-c-price{
    flex:0 1 auto;
    width:auto;
    text-align:left;
    white-space:normal;
    word-break:normal;
  }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > .dt-c-price:empty{ display:none; }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-domain > .dt-c-action{
    flex:0 1 auto;
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:8px 10px;
    text-align:right;
  }
  #content form.dt-lookup-result tr.dt-domain .dt-period-hidden:has(option:nth-child(2)){ margin-right:0; }
  /* taken / not-available explanations need the full card width */
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-taken > .dt-c-action,
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-error > .dt-c-action{
    flex:1 1 100%;
    margin-left:0;
    justify-content:flex-start;
    text-align:left;
  }

  /* favoured/A-Z separator band */
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-separator{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:0;
    margin:0;
    border-top:1px solid var(--dtk-border-soft);
    float:none;
  }
  #content form.dt-lookup-result table.rs-table > tbody > tr.dt-separator > td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    width:100%;
    box-sizing:border-box;
    border:none;
    float:none;
  }

  /* centered add-to-cart bar */
  #content form.dt-lookup-result .dt-buttonpane-submit{ text-align:center; }
}

/* ------------------------------------------------------------
   Cart overview sidebar on the lookup page (.has-cart-panel).
   Desktop: sticky right column via a 2-col grid on the widget
   wrapper (children stay in col 1, the aside spans col 2).
   Mobile: fixed bottom bar, collapsible via .dt-cart-open.
   ------------------------------------------------------------ */
/* with JS active the sidebar owns "Zum Warenkorb" -- hide the in-form submit
   (the .dt-cart-js class is set by JS, so no-JS users keep the old button) */
#content .dt-lookup-fullscreen.dt-cart-js form.dt-lookup-result .dt-buttonpane-submit{ display:none; }
#content .dt-cart-panel{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  text-align:left;
  overflow:hidden;
}
#content .dt-cart-panel .dt-cart-head{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  background:none;
  border:none;
  font:inherit;
  font-size:16px;
  font-weight:600;
  color:#1c2c47;
  text-align:left;
  cursor:default;
}
#content .dt-cart-panel .dt-cart-ico{ display:inline-flex; color:var(--dtk-primary); }
#content .dt-cart-panel .dt-cart-ico svg{ width:19px; height:19px; }
#content .dt-cart-panel .dt-cart-title{ flex:1 1 auto; }
#content .dt-cart-panel .dt-cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  box-sizing:border-box;
  border-radius:999px;
  background:var(--dtk-primary);
  color:#fff;
  font-size:13px;
  font-weight:700;
}
#content .dt-cart-panel.dt-cart-empty .dt-cart-count{ background:var(--dtk-border-strong); }
#content .dt-cart-panel .dt-cart-caret{ display:none; color:var(--dtk-muted); }
#content .dt-cart-panel .dt-cart-caret svg{ width:16px; height:16px; transition:transform .2s; }
#content .dt-cart-panel .dt-cart-body{ padding:0 16px 16px; }
#content .dt-cart-panel .dt-cart-list{
  list-style:none;
  margin:0 0 12px;
  padding:0;
}
#content .dt-cart-panel .dt-cart-list li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-top:1px solid #eef1f5;
  font-size:14px;
}
#content .dt-cart-panel .dt-cart-list li:first-child{ border-top:none; }
#content .dt-cart-panel .dt-cart-name{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
  color:#1c2c47;
  word-break:break-all;
}
#content .dt-cart-panel .dt-cart-period{ color:var(--dtk-muted); font-size:13px; white-space:nowrap; }
#content .dt-cart-panel .dt-cart-remove{
  flex:0 0 auto;
  width:24px;
  height:24px;
  padding:0;
  border:none;
  border-radius:999px;
  background:none;
  color:var(--dtk-muted);
  font-size:17px;
  line-height:1;
  cursor:pointer;
}
#content .dt-cart-panel .dt-cart-remove:hover{ background:#FDECEC; color:#DC2626; }
#content .dt-cart-panel .dt-cart-none{
  margin:0 0 12px;
  padding:6px 0;
  color:var(--dtk-muted);
  font-size:14px;
}
#content .dt-cart-panel a.dt-cart-go{
  display:block;
  padding:11px 16px;
  border-radius:999px;
  background:var(--dtk-primary);
  color:#fff;
  font-size:15px;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  letter-spacing:.3px;
}
#content .dt-cart-panel a.dt-cart-go:hover{ background:var(--dtk-primary-hover); color:#fff; }
/* empty cart: no list, no button, just the hint */
#content .dt-cart-panel.dt-cart-empty .dt-cart-list,
#content .dt-cart-panel.dt-cart-empty a.dt-cart-go{ display:none; }
#content .dt-cart-panel:not(.dt-cart-empty) .dt-cart-none{ display:none; }

@media (min-width:56.25em){
  #content .dt-lookup-fullscreen.has-cart-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    column-gap:24px;
    row-gap:0;
    align-items:start;
  }
  /* default: children (esp. the input form) keep the full width ... */
  #content .dt-lookup-fullscreen.has-cart-panel > *{ grid-column:1 / -1; min-width:0; }
  /* ... only the result shares its row with the cart sidebar */
  #content .dt-lookup-fullscreen.has-cart-panel > form.dt-lookup-result{ grid-column:1; }
  #content .dt-lookup-fullscreen.has-cart-panel > .dt-cart-panel{
    grid-column:2;
    grid-row:2 / span 40;/* row 1 = full-width input form; spans the (0-height) implicit rows after it */
    position:sticky;
    top:96px;/* below the fixed site header */
  }
}
@media (max-width:56.24em){
  /* keep space free for the fixed bottom bar */
  #content .dt-lookup-fullscreen.has-cart-panel{ padding-bottom:76px; }
  #content .dt-cart-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:950;
    border-radius:16px 16px 0 0;
    border-bottom:none;
    box-shadow:0 -8px 28px rgba(28,44,71,.16);
  }
  #content .dt-cart-panel.dt-cart-empty{ display:none; }
  #content .dt-cart-panel .dt-cart-head{ cursor:pointer; }
  /* bottom sheet: closed hints "opens upwards", open flips it back down */
  #content .dt-cart-panel .dt-cart-caret{ display:inline-flex; }
  #content .dt-cart-panel .dt-cart-caret svg{ transform:rotate(180deg); }
  #content .dt-cart-panel.dt-cart-open .dt-cart-caret svg{ transform:none; }
  /* collapsed: only the head bar is visible */
  #content .dt-cart-panel .dt-cart-body{ display:none; }
  #content .dt-cart-panel.dt-cart-open .dt-cart-body{
    display:block;
    max-height:50vh;
    overflow:auto;
  }
}

/* rootserver price table arrives as raw HTML from the message DB (id 6);
   neutralize its presentational bgcolor/spacer-img markup */
#rootserver-order td[bgcolor="#ff9900"]{ background:transparent; }
#rootserver-order td[bgcolor="#ff9900"] img{ display:none; }
#rootserver-order td[bgcolor="#add8e6"]{ background:var(--dtk-panel); }
#rootserver-order table table td{ border-top:1px solid var(--dtk-border-soft); padding:12px 14px; vertical-align:top; }
#content #law-fagg{ max-width:720px; margin:0 auto; text-align:left; }
#content #law-fagg .ui-accordion-header{
  background:var(--dtk-panel) none;
  border:1px solid var(--dtk-border-soft);
  border-radius:12px;
  color:#333336;
  text-shadow:none;
}
#content #law-fagg .ui-accordion-header.ui-state-active{ background:#EAF2FE none; border-color:#cfe0fb; }
#content #law-fagg .ui-accordion-content{
  border:1px solid var(--dtk-border-soft);
  border-top:none;
  background:#fff;
  padding:1em 1.2em;
}

/* ============================================================
   21. Reseller module (reseller/templates/*)
   ============================================================ */
/* ---- shared ce-card kit helpers for the reseller pages (reuse section 22) ---- */
/* single-column page widths (the multi-card account form stays at 1120px) */
#content .ce-page.ce-solo{ width:min(760px, 94vw); }
#content .ce-page.ce-solo-wide{ width:min(940px, 94vw); }
/* stack multiple cards inside a solo page with a gap */
#content .ce-page.ce-solo .ce-card,
#content .ce-page.ce-solo-wide .ce-card{ margin-bottom:16px; }
/* muted lead paragraph under a page title (hub / help pages) */
#content .ce-page .ce-lead{ margin:0 0 12px; color:var(--dtk-muted); line-height:1.6; }
#content .ce-page .ce-lead:last-of-type{ margin-bottom:0; }
/* description line directly under a card head */
#content .ce-page .ce-carddesc{ margin:-6px 0 16px; font-size:14px; color:var(--dtk-muted); line-height:1.55; }
#content .ce-page .ce-carddesc a{ color:var(--dtk-primary); }
/* centered support link footer */
#content .ce-page .ce-help{ text-align:center; margin:18px 0 0; }
#content .ce-page .ce-help a{ font-weight:500; }
/* reset button in the reseller action bars (matches the ghost cancel button) */
#content .ce-page.rs-form .ce-actions input[type="reset"]{
  padding:.82em 2.1em;
  font-size:16px;
  font-weight:500;
  border-radius:999px;
  background:#fff;
  color:var(--dtk-primary);
  border:1px solid var(--dtk-border);
  margin-left:.8em;
  cursor:pointer;
}
#content .ce-page.rs-form .ce-actions input[type="reset"]:hover{ background:#f2f7ff; border-color:#9fbde6; }
/* destructive submit (delete confirmations) */
#content .ce-page .ce-actions input[type="submit"].ce-danger{ background:#d92d20; box-shadow:0 4px 12px rgba(217,45,32,.25); }
#content .ce-page .ce-actions input[type="submit"].ce-danger:hover{ background:#b42318; box-shadow:0 6px 16px rgba(180,35,24,.3); }
/* monospace signature preview block (foa / wdap / errp) */
#content .ce-page .ce-sig{
  font-family:Consolas, Menlo, monospace;
  font-size:14px;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
  padding:12px 14px;
  margin:10px 0 0;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--dtk-muted);
}
/* placeholder token chips (wdrp) */
#content .ce-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
#content .ce-legend .ce-token{
  display:inline-block;
  font-family:Consolas, Menlo, monospace;
  font-size:13px;
  padding:5px 11px;
  border-radius:999px;
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
  text-decoration:none;
  border:1px solid transparent;
  transition:border-color .15s;
}
#content .ce-legend .ce-token:hover{ border-color:var(--dtk-primary); }
#content .ce-page .ce-inline-actions{ margin-top:4px; }
/* centered confirm card (file delete) */
#content .ce-page .ce-confirm{ text-align:center; }
#content .ce-page .ce-confirm .ce-confirm-ico{
  display:inline-grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
  margin-bottom:10px;
}
#content .ce-page .ce-confirm .ce-confirm-ico.ce-confirm-danger{ background:#fdecec; color:#d92d20; }
#content .ce-page .ce-confirm .ce-confirm-ico svg{ width:26px; height:26px; }
#content .ce-page .ce-confirm h3{ margin:0 0 6px; font-size:20px; font-weight:600; color:var(--dtk-ink); background:none; border:none; padding:0; }
#content .ce-page .ce-confirm p{ margin:0; color:var(--dtk-body); line-height:1.55; }

/* hub (main.html) -- dashboard of nav cards */
#content #reseller-main .rsm-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.4em 1.2em;
  margin:6px 0 14px;
}
#content #reseller-main .rsm-head h2{ margin:0; font-size:20px; font-weight:600; color:var(--dtk-ink); }
#content #reseller-main .rsm-help{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:500;
  color:var(--dtk-primary);
  text-decoration:none;
  white-space:nowrap;
}
#content #reseller-main .rsm-help svg{ width:17px; height:17px; }
#content #reseller-main .rsm-help:hover{ text-decoration:underline; }
#content #reseller-main .rsm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:12px;
  margin:0 0 8px;
}
#content #reseller-main .rsm-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  text-decoration:none;
  color:var(--dtk-ink);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
#content #reseller-main .rsm-card:hover{
  border-color:var(--dtk-primary);
  box-shadow:var(--dtk-shadow-md);
  transform:translateY(-1px);
}
#content #reseller-main .rsm-ico{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border-radius:var(--dtk-r-md);
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
}
#content #reseller-main .rsm-ico svg{ width:22px; height:22px; }
#content #reseller-main .rsm-label{ flex:1 1 auto; font-size:15px; font-weight:500; line-height:1.35; }
#content #reseller-main .rsm-arrow{ width:18px; height:18px; flex:none; color:var(--dtk-muted); transition:color .15s, transform .15s; }
#content #reseller-main .rsm-card:hover .rsm-arrow{ color:var(--dtk-primary); transform:translateX(2px); }
#content #reseller-main .rsm-dpa{
  margin-top:18px;
  padding:20px 24px;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border-soft);
  border-radius:var(--dtk-r-lg);
}
#content #reseller-main .rsm-dpa-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
#content #reseller-main .rsm-dpa-head svg{ width:20px; height:20px; color:var(--dtk-primary); flex:none; }
#content #reseller-main .rsm-dpa-head h2{ margin:0; font-size:17px; font-weight:600; color:var(--dtk-ink); }
#content #reseller-main .rsm-dpa ul{ margin:0; padding-left:1.2em; color:var(--dtk-muted); line-height:1.8; }

/* ghost row-action button on light card tables (file manager delete link) */
#content table.dtn-table .btn.ghost{ background:#fff; border-color:#c9ced6; }

/* reseller system order success (successful_reseller_system_order.html) */
#reseller-order-success .rso-lead{ font-weight:600; }

/* control panel branding pages -- tree of templates (cp_main, cp_template) */
#content .rscp-tree{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:12px; }
/* the app sets list-style-image:bullet.gif directly on li -- reset it here */
#content .rscp-tree li{ list-style:none; }
#content .rscp-tree > li{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  padding:16px 20px;
}
#content .rscp-tree .rscp-node{ font-size:15px; color:var(--dtk-ink); }
#content .rscp-tree .rscp-node b{ font-family:Consolas, Menlo, monospace; }
#content .rscp-tree .rscp-node-desc{ color:var(--dtk-muted); font-size:14px; margin-left:6px; }
#content .rscp-tree ul{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
#content .rscp-tree ul a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--dtk-primary);
  text-decoration:none;
  font-family:Consolas, Menlo, monospace;
  font-size:14px;
  padding:6px 10px;
  border-radius:var(--dtk-r-sm);
}
#content .rscp-tree ul a:hover{ background:var(--dtk-primary-soft); }
#content .rscp-tree ul a.rscp-active{ background:var(--dtk-primary-weak); font-weight:600; }
#content .rscp-tree .rscp-tag{ font-family:inherit; font-size:13px; color:var(--dtk-muted); }
#content .rscp-links{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }

/* cp_manager -- header/footer example snippets */
#content #reseller-cp-manager .rscp-snippets,
#content #reseller-cp-manager .rscp-snippets tbody,
#content #reseller-cp-manager .rscp-snippets tr,
#content #reseller-cp-manager .rscp-snippets th,
#content #reseller-cp-manager .rscp-snippets td{ display:block; width:auto; }
#content #reseller-cp-manager .rscp-snippets th{ text-align:left; font-weight:600; margin:16px 0 6px; color:var(--dtk-ink); }
#content #reseller-cp-manager .rscp-snippets tr:first-child th{ margin-top:0; }
#content #reseller-cp-manager .rscp-snippets textarea{
  width:100%;
  box-sizing:border-box;
  font-family:Consolas, Menlo, monospace;
  font-size:13px;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
  padding:10px 12px;
  color:var(--dtk-muted);
}

/* cp_template_help -- placeholder reference list */
#content .rscp-help{ text-align:left; margin:0; }
#content .rscp-help dt{ font-weight:600; font-family:Consolas, Menlo, monospace; font-size:14px; color:var(--dtk-ink); margin-top:14px; }
#content .rscp-help dt:first-child{ margin-top:0; }
#content .rscp-help dt.rscp-help-section{ font-family:inherit; margin-top:8px; }
#content .rscp-help dd{ margin:4px 0 0 1.4em; color:var(--dtk-muted); line-height:1.55; }
#content .rscp-help-h2{ font-size:18px; font-weight:600; margin:24px 0 12px; color:var(--dtk-ink); }

/* file manager (cp_fm_list) */
#content #reseller-fm .rsfm-upload{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border-soft);
  border-radius:var(--dtk-r-lg);
  padding:18px 20px;
  margin:0 0 20px;
}
#content #reseller-fm .rsfm-upload-ico{ width:26px; height:26px; color:var(--dtk-primary); flex:none; margin-top:2px; }
#content #reseller-fm .rsfm-upload-body{ flex:1 1 auto; min-width:0; }
#content #reseller-fm .rsfm-upload-note{ font-size:14px; color:var(--dtk-muted); margin-bottom:10px; }
#content #reseller-fm .rsfm-upload-form{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
#content #reseller-fm .rsfm-upload-form input[type="submit"]{ padding:.5em 1.6em; font-size:15px; }
#content #reseller-fm .rsfm-caption{ text-align:left; font-weight:600; margin-bottom:.6em; color:var(--dtk-ink); }
#content #reseller-fm .rsfm-empty{
  padding:22px;
  text-align:center;
  color:var(--dtk-muted);
  background:var(--dtk-panel);
  border:1px dashed var(--dtk-border-strong);
  border-radius:var(--dtk-r-lg);
}
#content #reseller-fm .rsfm-table{ margin:0; }
#content #reseller-fm .rsfm-url{ font-size:.875em; word-break:break-all; }
#content #reseller-fm .rsfm-act{ text-align:right; white-space:nowrap; }
#content #reseller-fm .rsfm-error{
  margin:0 0 1.1em;
  padding:.8em 1.05em;
  background:#fef3f2;
  border:1px solid #f6cecb;
  color:#b42318;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
}

/* cp template editor (cp_template) */
#content #reseller-cp-template .rscp-editor{ padding:20px; }
#content #reseller-cp-template .rscp-editor-title{
  margin:0 0 14px;
  font-size:16px;
  font-weight:600;
  color:var(--dtk-primary);
  font-family:Consolas, Menlo, monospace;
}
#content #reseller-cp-template .rscp-toolbar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
#content #reseller-cp-template .rscp-toolbar button,
#content #reseller-cp-template .rscp-editor-actions button{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-sm);
  padding:.4em .7em;
  cursor:pointer;
  color:var(--dtk-ink);
  font-size:13px;
  font-family:Consolas, Menlo, monospace;
  transition:background .15s ease, border-color .15s ease;
}
#content #reseller-cp-template .rscp-toolbar button:hover,
#content #reseller-cp-template .rscp-editor-actions button:hover{ background:#f1f3f5; border-color:var(--dtk-border-strong); }
#content #reseller-cp-template .rscp-toolbar select{
  font-size:13px;
  font-family:Consolas, Menlo, monospace;
  padding:.35em .5em;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-sm);
}
#content #reseller-cp-template .rscp-toolbar-help{ margin:0 0 12px; font-size:14px; }
#content #reseller-cp-template textarea{
  width:100%;
  box-sizing:border-box;
  font-family:Consolas, Menlo, monospace;
  font-size:13px;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
}
#content #reseller-cp-template .rscp-editor-note{ margin:14px 0 10px; font-weight:600; color:var(--dtk-ink); }
#content #reseller-cp-template .rscp-editor-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#content #reseller-cp-template .rscp-editor-spacer{ flex:1 1 auto; }
#content #reseller-cp-template .rscp-editor-actions button[disabled]{ opacity:.45; cursor:not-allowed; }
#content #reseller-cp-template .rscp-editor-actions button#CM-save{
  background:var(--dtk-primary);
  border-color:var(--dtk-primary);
  color:#fff;
  border-radius:999px;
  padding:.5em 1.7em;
}
#content #reseller-cp-template .rscp-editor-actions button#CM-save:hover{ background:var(--dtk-primary-hover); }
#content #reseller-cp-template .rscp-editor-actions button#CM-save[disabled]{ background:var(--dtk-primary); }

/* NOTE: the reseller settings forms (nameserver, whois, wdrp, foa, wdap, errp,
   cp_settings) and reseller customer_edit now reuse the .ce-page / .ce-card kit
   (section 22 + the .ce-solo helpers above); their old .rs-settings /
   #reseller-customer-edit rules were removed. The dead order-list / product /
   customer-list templates (commented out in reseller_index.php) lost their CSS. */

/* ---- customer/templates/mfa_*.html (2FA pages) ---- */
#content .mfa-page{ max-width:620px; margin:1.5em auto; }
#content .mfa-page .clear{ display:flex; justify-content:center; align-items:center; gap:1em; flex-wrap:wrap; }
#content .mfa-page .clear > div{ float:none !important; padding:0 !important; }

/* info text inside the card (action-generated HTML lands here too) */
#content .mfa-page .mfa-info{ color:var(--dtk-muted); line-height:1.6; }
#content .mfa-page .mfa-info img{ border-radius:10px; border:1px solid var(--dtk-border); }
#content .mfa-page .mfa-info a{ color:var(--dtk-primary); }

/* one-time-code entry: static label + big centered input */
#content .mfa-code{ margin-top:18px; }
#content .mfa-code label{ display:block; font-size:14px; font-weight:600; color:var(--dtk-ink); margin-bottom:6px; }
#content .mfa-code input{
  width:100%;
  box-sizing:border-box;
  font-size:22px;
  letter-spacing:.3em;
  text-align:center;
  padding:.5em .6em;
  border:1px solid var(--dtk-border-strong);
  border-radius:12px;
  background:#fff;
}
#content .mfa-code input:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(15,101,213,.15);
}

/* consequences warning (e-mail reset deletes TOTP tokens etc.) */
#content .mfa-note{
  margin-top:16px;
  background:#fff8e6;
  border:1px solid #f0d48a;
  border-radius:12px;
  padding:12px 16px;
  font-size:14px;
  line-height:1.55;
}
#content .mfa-note ul{ margin:.4em 0 0; padding-left:1.3em; }

/* quiet link row below the card (lost token / cancel) */
#content .mfa-links{ text-align:center; margin-top:14px; font-size:14px; }

/* label: value row (username on mfa_reset, token label on delete) */
#content .mfa-kv{ font-size:15px; margin-bottom:16px; }
#content .mfa-kv > span:first-child{ color:var(--dtk-muted); margin-right:.4em; }

/* numbered wizard steps (authenticator setup) */
#content .mfa-step{ display:flex; gap:14px; margin-top:22px; }
#content .mfa-step-num{
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--dtk-primary);
  color:#fff;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#content .mfa-step-body{ flex:1; min-width:0; }
#content .mfa-step-title{ margin:0 0 12px; padding-top:3px; font-weight:600; color:var(--dtk-ink); line-height:1.5; }
#content .mfa-apps{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}
#content .mfa-apps li{
  list-style:none; /* the legacy li{list-style-image:bullet.gif} rule outspecifies the ul reset */
  padding:.35em .95em;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:999px;
  font-size:14px;
}
#content .mfa-qr{
  text-align:center;
  padding:18px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:12px;
}
#content .mfa-qr a{ display:inline-block; font-weight:normal; font-size:14px; word-break:break-all; overflow-wrap:break-word; }
#content .mfa-qr canvas,
#content .mfa-qr img{ display:block; margin:0 auto; max-width:100%; }
#content .mfa-manual{ margin-top:12px; font-size:14px; }
#content .mfa-manual summary{ cursor:pointer; color:var(--dtk-primary); font-weight:500; }
#content .mfa-manual ul{ margin:10px 0 0; padding-left:1.3em; color:var(--dtk-muted); line-height:1.9; }
#content .mfa-manual code{
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:6px;
  padding:2px 6px;
  font-size:14px;
}

/* ---- domain/templates/nameserver.html (nameserver + zone editor) ---- */
/* The shared #content wrapper is a shrink-to-fit inline-block, so the
   max-width + margin:auto below can only take effect once the wrapper is
   forced to fill #content -- otherwise the page collapses to the width of its
   (narrow) tables and hugs the left. Same trick the domain list (.dtn-wrap)
   and the dashboard use. */
#content > div:has(> #domain-nameserver){ width:100%; }
#domain-nameserver{ max-width:960px; margin:0 auto 1.5em; color:#333336; }
#domain-nameserver > big{
  display:block;
  font-size:20px;
  font-weight:600;
  margin-bottom:.6em;
}
#domain-nameserver h3{
  font-size:18px;
  font-weight:600;
  color:#333336;
  border:none;
  padding:0;
  margin:1.6em 0 .7em;
}
:is(#domain-nameserver, #domain-transfer) #ZE-NS-Table,
:is(#domain-nameserver, #domain-transfer) #ZE-RR-Table{
  width:100%;
  max-width:760px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:10px 14px;
}
:is(#domain-nameserver, #domain-transfer) #ZE-NS-Table td{ padding:4px 6px; }
/* On the nameserver page (not the narrower transfer form) let the tables fill
   the full page width instead of stopping at 760px, and let their inputs grow
   with the cells -- otherwise the fixed-`size` fields leave dead space to the
   right once the cap is lifted. The per-record "Data" cell holds a nested
   per-type table (align=right, fixed-size inputs); stretching that table and
   its text inputs to 100% is what actually makes the record contents scale. */
#domain-nameserver #ZE-NS-Table,
#domain-nameserver #ZE-RR-Table{ max-width:none; }
#domain-nameserver #ZE-NS-Table .ns-inp{ display:block; }
#domain-nameserver #ZE-NS-Table input[name^="ns_name_"],
#domain-nameserver #ZE-NS-Table input[name^="ns_ip_"]{ width:100%; box-sizing:border-box; }
#domain-nameserver #ZE-RR-Table input[name^="rr_host_"]{ width:100%; box-sizing:border-box; }
/* Keep the Subdomain field compact -- a host label ("www", "@", "_dmarc") is
   short, so pin its column to ~half the filled width and let the freed space
   flow into the Data cell (nth-child(2) is the Subdomain column: header th +
   each record row's 2nd cell; the error row's single colspan cell is skipped). */
#domain-nameserver #ZE-RR-Table thead th:nth-child(2),
#domain-nameserver #ZE-RR-Table tbody[id^="ZE-rr_"] > tr > td:nth-child(2){ width:120px; }
#domain-nameserver #ZE-RR-Table td[id^="ZE-rr_option_"] > table{ width:100%; }
#domain-nameserver #ZE-RR-Table td[id^="ZE-rr_option_"] input[type="text"]{ width:100%; box-sizing:border-box; }
/* Line up every record's Data field on one vertical edge: each record's option
   cell is its OWN table, so col1 would otherwise size to that record's longest
   label ("IPv4:" vs "Replacement:") and the inputs would start at different x.
   A fixed first-label-column width makes the first input column start at the
   same x for every record type (labels stay right-aligned + nowrap, hugging the
   input). 110px clears the widest label incl. translations (EN max ~83px). */
#domain-nameserver #ZE-RR-Table td[id^="ZE-rr_option_"] table td:first-child{
  width:110px;
  white-space:nowrap;
}
/* Subtle in-field clear (x) on each nameserver NAME input. The <button> is
   scoped to .ns-clear so it beats the id-level `#domain-transfer button` /
   `#domain-nameserver button` pill styles (1,1,0 > 1,0,1). Clearing calls the
   app's own ZE.showNsIp() so the paired IP field is emptied/hidden too -- no
   new behavior, just a shortcut for what a manual delete + blur already does. */
:is(#domain-nameserver, #domain-transfer) .ns-inp{ position:relative; display:inline-block; }
:is(#domain-nameserver, #domain-transfer) .ns-inp:has(> .ns-clear) > input{ padding-right:26px; }
:is(#domain-nameserver, #domain-transfer) .ns-clear{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0; margin:0;
  border:none; border-radius:50%; background:transparent;
  color:var(--dtk-muted); font-size:16px; line-height:1;
  cursor:pointer; opacity:.5;
  transition:opacity .12s ease, background .12s ease, color .12s ease;
}
:is(#domain-nameserver, #domain-transfer) .ns-clear:hover{
  opacity:1; background:var(--dtk-disabled-bg); color:var(--dtk-ink);
}
/* no x while the field is empty (name inputs carry placeholder=" ") */
:is(#domain-nameserver, #domain-transfer) .ns-inp > input:placeholder-shown + .ns-clear{
  opacity:0; pointer-events:none;
}
/* IP inputs keep their <input> (behavior untouched -- the app fills/toggles
   them from the NS lookup) but read as non-editable via the disabled palette. */
:is(#domain-nameserver, #domain-transfer) input[name^="ns_ip_"]{
  background-color:var(--dtk-disabled-bg);
  color:var(--dtk-disabled-ink);
  border-color:var(--dtk-border);
  cursor:not-allowed;
}
#domain-transfer .error{ color:var(--dtk-error); }
/* Collapse empty nameserver rows: show filled rows plus the first empty one,
   hide every empty row after it (name input carries placeholder=" "). */
#ZE-NS-Table > tbody:has(input[name^="ns_name_"]:placeholder-shown):not(:has(~ tbody input[name^="ns_name_"]:not(:placeholder-shown))) ~ tbody {
  display: none;
}
#domain-nameserver .error{ color:var(--dtk-error); }
#domain-nameserver button{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:8px;
  padding:.4em .9em;
  cursor:pointer;
  color:#333336;
  transition:background .15s ease, border-color .15s ease;
}
#domain-nameserver button:hover{ background:#f1f3f5; border-color:#c4ccd6; }
#domain-nameserver button[disabled]{ opacity:.45; cursor:not-allowed; }
#domain-nameserver button[type="submit"]{
  background:var(--dtk-primary);
  border-color:var(--dtk-primary);
  color:#fff;
  border-radius:999px;
  padding:.55em 1.8em;
}
#domain-nameserver button[type="submit"]:hover{ background:var(--dtk-primary-hover); }

/* ---- narrow centered confirm pages (cp_tfa_reset, revoke_order) ---- */
#content .tfa-page, #content .revoke-page{ max-width:640px; margin:1.5em auto; }

/* bare status/error echoes from module actions (<big>Heading</big><br>text,
   e.g. transfer status, cp_tfa_reset invalid-domain) */
#content > big{
  display:block;
  font-size:20px;
  font-weight:600;
  margin:1.5em 0 .4em;
}

/* legacy section-header rows and whois panes on transfer/contact forms */
#content tr[bgcolor="#dcdcdc"] > td{
  background:#fff;
  color:#1c2c47;
  font-weight:600;
  border-bottom:1px solid #e9edf3;
  padding:19px 14px 14px;
  border-top:1px solid var(--dtk-border-soft);
  border-bottom:1px solid var(--dtk-border-soft);
}
#content td[bgcolor="lightyellow"]{
  background:#f6f7f9;
  border:1px solid var(--dtk-border);
  border-radius:16px;
}
#content td[bgcolor="lightyellow"] p{ color:#4b5563; }


/* ============================================================
   22. Typography -- real Effra weights
   ------------------------------------------------------------
   style.css ("Effra App", logged) and user_normal.css ("Effra
   App H3", logged-out) only declare the regular cut, so bold
   text renders as synthesized faux-bold. Register the semibold
   and bold cuts the live site uses for both family names.
   ============================================================ */
@font-face{
  font-family:"Effra App";
  font-style:normal;
  font-weight:600;
  font-display:fallback;
  src:url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_SBd.ttf') format('truetype');
}
@font-face{
  font-family:"Effra App";
  font-style:normal;
  font-weight:700;
  font-display:fallback;
  src:url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_Bd.ttf') format('truetype');
}
@font-face{
  font-family:"Effra App H3";
  font-style:normal;
  font-weight:600;
  font-display:fallback;
  src:url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_SBd.ttf') format('truetype');
}
@font-face{
  font-family:"Effra App H3";
  font-style:normal;
  font-weight:700;
  font-display:fallback;
  src:url('https://www.domaintechnik.at/wp-content/uploads/fonts/Effra_A_Bd.ttf') format('truetype');
}
/* legacy style.css pins "Lucida Sans Unicode" on #content */
#content{ font-family:inherit; }


/* ============================================================
   22. Account-data card forms (.ce-page)
   customer/templates/edit.html + edit_waiting.html + register.html
   + register_partner.html + register_reseller.html,
   reseller/templates/customer_edit.html
   ============================================================ */
/* the shared content wrapper is display:inline-block (shrink-to-fit); the rule
   below forces it to width:100%, so the page fills the real available width (of
   the fixed ~1000px #content column) up to 1120px -- a vw cap would overflow it
   and push the form off-centre. See .dtn-wrap for the same fix. */
div:has(> .ce-page){ width:100%; }
.ce-page{ width:min(1120px, 100%); max-width:1120px; margin:0 auto; text-align:left; }
#content .ce-page .ce-title{
  font-size:36px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--dtk-ink);
  margin:.4em 0 16px;
  padding:0;
  background:none;
  border-bottom:none;
}
@media (max-width:900px){ #content .ce-page .ce-title{ font-size:28px; } }

/* info notice ("Achtung: ...") -- dt-alert--info from the reference */
.ce-page .ce-notice{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--dtk-info-weak);
  border:1px solid #CFE1FA;
  border-radius:var(--dtk-r-md);
  padding:14px 16px;
  margin-bottom:24px;
  font-size:14px;
  color:var(--dtk-body);
  line-height:1.55;
}
.ce-page .ce-notice b, .ce-page .ce-notice strong{ color:var(--dtk-ink); }
.ce-page .ce-notice > svg{ width:20px; height:20px; fill:var(--dtk-info); flex:none; margin-top:1px; }

/* stack the right-column cards */
#content .ce-page .user-data .flex-item{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* stacked fields (redesign): label above a full-width input at every width.
   The global mobile rules already stack below 720px; this extends the same
   layout to desktop. Rows marked .t-half pair up side by side in a
   two-column field grid (Vorname/Familienname etc.), all other rows span. */
@media (min-width:721px){
  #content .ce-page .t-data{ display:block; }
  #content .ce-page .t-data > tbody{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  #content .ce-page .t-data > tbody > tr{ display:block; grid-column:1 / -1; min-width:0; }
  #content .ce-page .t-data > tbody > tr.t-half{ grid-column:auto; }
  #content .ce-page .t-data th,
  #content .ce-page .t-data td{ display:block; width:auto; }
  #content .ce-page .t-label{ width:auto; padding:12px 18px 4px; }
  #content .ce-page .t-input{ padding:0 18px 12px; }
  #content .ce-page .t-error td{ padding:0 18px 10px; }
}
/* the error rows carry an empty spacer cell from the old two-column table
   layout -- hide it in the stacked design (all widths) */
#content .ce-page .t-error td:first-child:not(:last-child){ display:none; }

/* card section headers: white, icon, hairline below (override gray t-head bar) */
#content .ce-page .t-head.ce-h{
  background:#fff;
  border-left:none;
  border-top:none;
  border-bottom:1px solid #e9edf3;
  color:#1c2c47;
  font-size:1.08em;
  padding:19px 20px 14px !important;
}
#content .ce-page tr:not(:first-child) .t-head.ce-h{ padding-top:30px !important; }
.ce-page .t-head.ce-h::before{
  content:"";
  display:inline-block;
  width:20px;
  height:20px;
  margin-right:.6em;
  vertical-align:-4px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.ce-page .ce-h-company::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/></svg>"); }
.ce-page .ce-h-person::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>"); }
.ce-page .ce-h-login::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>"); }
.ce-page .ce-h-pay::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/></svg>"); }
.ce-page .ce-h-mail::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>"); }
.ce-page .ce-h-misc::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/></svg>"); }

/* "Zugangseinstellungen" link inside the Logindaten header */
#content .ce-page .ce-headlink{
  float:right;
  font-size:.875em;
  font-weight:500;
  color:var(--dtk-primary);
  text-decoration:none;
}
#content .ce-page .ce-headlink:hover{ text-decoration:underline; }

/* payment method option rows (radio list, selected row tinted) */
#content .ce-page .t-head.ce-opt{
  background:#fff;
  border-left:none;
  border-top:none;
  font-size:1em;
  font-weight:500;
  color:#333336;
  padding:13px 20px !important;
}
#content .ce-page tbody:has(.ce-opt input[type="radio"]:checked) .ce-opt{ background:#EAF2FE; }
#content .ce-page .ce-opt label{ font-weight:500; }
.ce-page .ce-opt input[type="radio"]{ margin-right:.65em; vertical-align:-2px; }
.ce-page .ce-opt-desc td{
  padding:6px 20px 16px 20px;
  color:#6b7686;
  font-size:.92em;
  line-height:1.5;
}

/* keep the newsletter checkbox inline (t-data skin stretches inputs to 100%) */
#content .ce-page .t-input input[type="checkbox"]{ width:auto; }

/* no stray error icon in the empty spacer cell of t-error rows */
#content .ce-page .t-error td:first-child::before{ content:none; }

/* credit card expiry: two selects side by side */
#content .ce-page .ce-exp{ white-space:nowrap; }
#content .ce-page .ce-exp select{ width:48.5%; }
#content .ce-page .ce-exp select + select{ margin-left:3%; }

/* breathing room at the bottom of each card */
.ce-page .t-data > tbody > tr:last-child > .t-label,
.ce-page .t-data > tbody > tr:last-child > .t-input,
.ce-page .t-data > tbody > tr:last-child > td{ padding-bottom:18px; }

/* actions card */
.ce-page .ce-actions{
  margin-top:22px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  box-shadow:var(--dtk-shadow-xs);
  padding:1.5em 1.25em;
  text-align:center;
}
#content .ce-page .ce-actions input[type="submit"]{
  padding:.82em 2.3em;
  font-size:16px;
  font-weight:600;
  letter-spacing:.2px;
  border-radius:999px;
  background:var(--dtk-primary);
  box-shadow:0 4px 12px rgba(15,101,213,.25);
}
/* save-disk icon only on the update forms (not the sign-up buttons) */
#content #customer-edit .ce-actions input[type="submit"],
#content #reseller-customer-edit .ce-actions input[type="submit"]{
  padding:.82em 2.2em .82em 3.2em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z'/></svg>");
  background-repeat:no-repeat;
  background-position:1.45em center;
  background-size:16px 16px;
}
#content .ce-page .ce-actions input[type="submit"]:hover,
#content .ce-page .ce-actions input[type="submit"]:active{ background-color:var(--dtk-primary-hover); box-shadow:0 6px 16px rgba(0,56,146,.28); }
#content .ce-page .ce-actions input[type="button"]{
  padding:.82em 2.1em;
  font-size:16px;
  font-weight:500;
  border-radius:999px;
  background:#fff;
  color:var(--dtk-primary);
  border:1px solid var(--dtk-border);
  margin-left:.8em;
}
#content .ce-page .ce-actions input[type="button"]:hover{ background:#f2f7ff; border-color:#9fbde6; }
/* register* and delete confirmations place the secondary button BEFORE the
   submit, so the margin-left the design puts on a trailing button/reset lands
   on the outer edge and the pair sits gapless -- give a submit that directly
   follows a button/reset its own left gap instead. */
#content .ce-page .ce-actions input[type="button"] + input[type="submit"],
#content .ce-page .ce-actions input[type="reset"] + input[type="submit"]{ margin-left:.8em; }
/* the sticky edit bars already space their buttons with flex `gap` */
#content #customer-edit .ce-actions input + input[type="submit"],
#content #reseller-customer-edit .ce-actions input + input[type="submit"]{ margin-left:0; }

/* password security card -- reference: panel-tinted card, no border */
.ce-page .ce-passinfo{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:22px;
  background:var(--dtk-panel);
  border:1px solid transparent;
  border-radius:var(--dtk-r-lg);
  padding:24px;
}
.ce-page .ce-passinfo > svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--dtk-primary); }
.ce-page .ce-passinfo p{ margin:0; color:var(--dtk-muted); line-height:1.6; font-size:14px; }
/* msg 241 starts with its own "Passwortsicherheit" heading line */
.ce-page .ce-passinfo p::first-line{ font-weight:600; font-size:15px; color:var(--dtk-ink); }

@media (max-width:720px){
  #content .ce-page tr:not(:first-child) .t-head.ce-h{ padding-top:26px !important; }
  #content .ce-page .ce-actions input[type="submit"],
  #content .ce-page .ce-actions input[type="button"]{ width:100%; margin:.5em 0 0; }
  /* the sticky edit bars shrink their submit to 15px, so the 8px gap needs
     its own em there (their buttons keep margin:0 from the sticky-bar rules) */
  #content #customer-edit .ce-actions input[type="submit"],
  #content #reseller-customer-edit .ce-actions input[type="submit"]{ margin:0.5333em 0 0; }
  /* stacked full-width buttons drop the desktop left gap */
  #content .ce-page .ce-actions input[type="button"] + input[type="submit"],
  #content .ce-page .ce-actions input[type="reset"] + input[type="submit"]{ margin-left:0; }
  .ce-page .ce-passinfo{ padding:1.1em 1em; }
}

/* ===== Access settings accordions (customer/templates/access.html) =====
   The three settings groups (login details, login notification, MFA) are
   collapsed by default so the page opens as a short list instead of every
   option at once. Reuses the du-collapse accordion component; a group
   auto-opens when its own submit came back with errors. */
#content .acc-page .acc-item{ margin-bottom:14px; }
#content .acc-page .acc-item:last-of-type{ margin-bottom:0; }
#content .acc-page details.du-collapse summary{ font-size:17px; }
#content .acc-page .acc-head{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex-wrap:wrap;
}
#content .acc-page .acc-title{ font-weight:600; color:var(--dtk-ink); }
#content .acc-page .acc-state{ font-weight:400; font-size:14px; color:var(--dtk-muted); }
#content .acc-page .acc-success{
  color:#1a7f37;
  background:#e9f7ee;
  border:1px solid #b7e0c4;
  border-radius:var(--dtk-r-md);
  padding:10px 14px;
  margin-bottom:14px;
}
#content .acc-page .du-collapse-body{ padding:18px 22px 22px; }
#content .acc-page .du-collapse-body .acc-desc{ margin:0 0 10px; color:var(--dtk-muted); line-height:1.6; }
#content .acc-page .du-collapse-body .acc-meta{ margin:0 0 16px; color:var(--dtk-ink); }
#content .acc-page .du-collapse-body .acc-meta span{ margin-right:.35em; }
#content .acc-page .du-collapse-body .access-table{ margin-bottom:0; }
/* the login form's submit sits inside the accordion card already -- drop the
   nested white "actions" card, just leave the pill on the body background */
#content .acc-page .du-collapse-body .ce-actions{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin-top:18px;
  text-align:left;
}
/* secondary pill for the in-body buttons (toggle notify, send access code) */
#content .acc-page .acc-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.6em 1.4em;
  font-size:14px;
  font-weight:500;
  border-radius:999px;
  cursor:pointer;
  background:#fff;
  color:var(--dtk-primary);
  border:1px solid var(--dtk-border);
}
#content .acc-page .acc-btn:hover{ background:#f2f7ff; border-color:#9fbde6; }

/* ------------------------------------------------------------------
   22b. Card-per-section account form (pixel match of the
        redesign-account.html reference; markup = customer edit.html)
   ------------------------------------------------------------------ */
/* two-column page grid (1.15fr / .85fr like the reference form-2col) */
#content .ce-page .ce-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
  align-items:start;
}
#content .ce-page .ce-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
#content .ce-page .ce-col > .ce-passinfo{ margin-top:0; }

/* section card with icon header */
#content .ce-page .ce-card{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  padding:24px;
}
#content .ce-page .ce-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--dtk-border-soft);
}
#content .ce-page .ce-card-head h3{
  margin:0;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--dtk-ink);
  background:none;
  border:none;
  padding:0;
}
#content .ce-page .ce-card-head .ce-headlink{ margin-left:auto; }
#content .ce-page .ce-card-ico{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--dtk-r-sm);
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
  flex:none;
}
#content .ce-page .ce-card-ico svg{ width:18px; height:18px; display:block; }

/* inline floating label: the label sits inside the field as a placeholder and
   floats onto the top border on focus / when the field has a value. Saves the
   separate label row above every input. Needs placeholder=" " on text inputs so
   :placeholder-shown can detect the empty state. */
/* NOTE: the field-level classes below are intentionally NOT scoped to .ce-page
   so the same inline-label field can be reused on other forms (e.g. the domain
   order-contacts accordion). They are unique to the new design. */
#content .ce-field{ position:relative; margin-bottom:16px; }
#content .ce-card > .ce-field:last-child,
#content .ce-paypanel > .ce-field:last-child{ margin-bottom:0; }
#content .ce-label{
  position:absolute;
  left:10px;
  top:12px;
  z-index:1;
  max-width:calc(100% - 28px);
  padding:0 4px;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--dtk-muted);
  background:#fff;
  pointer-events:none;
  transition:top .15s ease, font-size .15s ease, color .15s ease, font-weight .15s ease;
}
#content .ce-label .req{ color:var(--dtk-error); margin-left:2px; }
/* floated position: field focused, filled (placeholder hidden), or holds a select */
#content .ce-field:has(input:focus) .ce-label,
#content .ce-field:has(input:not(:placeholder-shown)) .ce-label,
#content .ce-field:has(textarea:focus) .ce-label,
#content .ce-field:has(textarea:not(:placeholder-shown)) .ce-label,
#content .ce-field:has(select) .ce-label{
  top:-8px;
  font-size:13px;
  font-weight:600;
  color:var(--dtk-ink);
}
#content .ce-field:has(input:focus) .ce-label,
#content .ce-field:has(textarea:focus) .ce-label{ color:var(--dtk-primary); }
/* a floated label overlapping the dashed payment panel matches its background */

#content .ce-paypanel .ce-label:not(:has(~ input:placeholder-shown)),
#content .ce-paypanel .ce-label:has(~ input:focus)
{
  background: linear-gradient( to bottom, var(--dtk-panel) 0%, var(--dtk-panel) 10%, transparent 100% );
}
#content .ce-field input:not([type="checkbox"]):not([type="radio"]),
#content .ce-field select,
#content .ce-field textarea{
  width:100%;
  font-size:16px;
  font-family:inherit;
  color:var(--dtk-ink);
  background:#fff;
  border:1px solid var(--dtk-input-border);
  border-radius:var(--dtk-r-md);
  padding:11px 14px;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
#content .ce-field input:hover,
#content .ce-field select:hover,
#content .ce-field textarea:hover{ border-color:var(--dtk-border-strong); }
#content .ce-field input:focus,
#content .ce-field select:focus,
#content .ce-field textarea:focus{
  outline:none;
  border-color:var(--dtk-primary);
  box-shadow:var(--dtk-focus);
}
#content .ce-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6F6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:38px;
}
#content .ce-hint{ font-size:14px; color:var(--dtk-muted); margin-top:4px; }
#content .ce-err{ font-size:14px; font-weight:500; color:var(--dtk-error); margin-top:4px; }
#content .ce-field:has(.ce-err) input,
#content .ce-field:has(.ce-err) select{ border-color:var(--dtk-error); }

/* two fields side by side (Vorname/Familienname etc.) */
#content .ce-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
#content .ce-cols .ce-field,
#content .ce-field .ce-cols{ margin-bottom:0; }

/* grouped-digit payment inputs (IBAN / BIC / card no.): even, legible spacing */
#content .ce-field input[name="cc_number"],
#content .ce-field input[name="directdebit_iban"],
#content .ce-field input[name="bank_iban"],
#content .ce-field input[name="directdebit_bic"],
#content .ce-field input[name="bank_bic"]{
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}

/* split phone / fax field: country calling code + national number
   (built by iface/js/phone-split.js inside a normal .ce-field) */
#content .ce-field:has(.ps-row) .ce-label{ /* label stays floated: the field is never "empty-looking" */
  top:-8px;
  font-size:13px;
  font-weight:600;
  color:var(--dtk-ink);
}
#content .ps-row{ display:flex; flex-wrap:nowrap; gap:8px; }
#content .ps-prefix{
  display:flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  box-sizing:border-box;
  background:#fff;
  border:1px solid var(--dtk-input-border);
  border-radius:var(--dtk-r-md);
  padding:11px 8px 11px 12px;
  transition:border-color .15s, box-shadow .15s;
}
#content .ps-prefix:hover{ border-color:var(--dtk-border-strong); }
#content .ps-prefix:focus-within{
  border-color:var(--dtk-primary);
  box-shadow:var(--dtk-focus);
}
#content .ps-plus{ color:var(--dtk-muted); font-size:16px; }
#content .ce-field .ps-prefix input.ps-cc{
  width:3.4ch;
  min-width:3.4ch;
  border:none;
  border-radius:0;
  padding:0 2px;
  background:transparent;
  font-size:16px;
}
#content .ce-field .ps-prefix input.ps-cc:hover,
#content .ce-field .ps-prefix input.ps-cc:focus{
  border:none;
  outline:none;
  box-shadow:none;
}
/* fixed-width flag slot: reserved even while empty, so no layout shift */
#content .ps-flag{
  flex:0 0 26px;
  width:26px;
  text-align:center;
  font-size:16px;
  line-height:1;
  overflow:hidden;
}
#content .ps-flag-iso{ /* fallback when the platform has no flag emoji */
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--dtk-muted);
}
/* prefix + number always stay on ONE line (never wrap): the number field
   shrinks to fill whatever the row leaves after the fixed-width prefix box */
#content .ce-field .ps-row .ps-num{ flex:1 1 auto; width:auto; min-width:0; }
/* phone + fax pair up only while the container is wide enough for two
   readable fields; as soon as it gets crushed they break onto their own
   rows. Driven by real container width (auto-fit), not the viewport, so it
   works the same on the narrow register column and the order-contacts
   accordion. ~240px keeps the prefix + number legible before it breaks. */
#content .ce-cols:has(.ps-row){
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
#content .ce-field:has(.ce-err) .ps-prefix{ border-color:var(--dtk-error); }
#content .ce-field:has(.ce-err) .ps-prefix input.ps-cc{ border:none; }
/* autofill hook: browsers apply :-webkit-autofill to the field they fill and
   run this (visually no-op) animation, letting phone-split.js catch the fill
   via "animationstart" and compose the hidden posted value even when no
   input/change event fires (Chrome page-load fill, some iOS flows). */
@keyframes ps-autofill{ from{ /* noop */ } to{ /* noop */ } }
#content .ce-field input.ps-cc:-webkit-autofill,
#content .ce-field input.ps-num:-webkit-autofill{
  animation-name:ps-autofill;
  animation-duration:0.01s;
}

/* small helpers shared by the TLD landrush owner forms (dotwien2/dottirol) */
#content .tld-owner-head{
  font-size:18px;
  font-weight:600;
  margin:4px 0 14px;
  padding:0;
  border:none;
  background:none;
  color:var(--dtk-ink);
  text-align:left;
}
#content .tld-agb{ display:inline-flex; align-items:flex-start; gap:8px; cursor:pointer; }
#content .tld-agb input[type="checkbox"]{ margin-top:2px; accent-color:var(--dtk-primary); }

/* domain_update + transfer: contact-section cards (owner/admin/tech/zone)
   with a copy-from bar */
#content :is(#domain-domain_update, #domain-transfer) .du-card{
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:16px;
  padding:20px;
  margin:0 0 16px;
  box-shadow:var(--dtk-shadow-xs);
  text-align:left;
}
#content :is(#domain-domain_update, #domain-transfer) .du-copyfrom{
  margin:-4px 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--dtk-border-soft);
  font-size:14px;
  color:var(--dtk-muted);
}
#content :is(#domain-domain_update, #domain-transfer) .du-copyfrom a{ font-weight:600; white-space:nowrap; }

/* collapsed contact cards (transfer admin/tech): summary shows a compact
   data preview; the form only appears when expanded */
#content :is(#domain-domain_update, #domain-transfer) .du-card.du-collapse{ padding:0; }
#content .du-sum{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-align:left;
}
#content .du-sum-preview{
  font-size:14px;
  font-weight:400;
  color:var(--dtk-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:64ch;
}
#content details.du-collapse[open] .du-sum-preview{ display:none; }
#content .du-collapse-body{ padding:4px 22px 20px; }
#content .du-collapse-body .du-copyfrom{ margin-top:8px; }

/* inline checkbox row (newsletter) */
#content .ce-page .ce-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--dtk-body);
  cursor:pointer;
  margin:4px 0 16px;
}
#content .ce-page .ce-check input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--dtk-primary);
}

/* payment method: selectable radio card + dashed conditional panel */
#content .ce-page .ce-paygroup{ margin-bottom:16px; }
#content .ce-page .ce-card > .ce-paygroup:last-child{ margin-bottom:0; }
#content .ce-page .ce-paycard{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
#content .ce-page .ce-paycard:hover{ border-color:var(--dtk-primary); background:var(--dtk-primary-soft); }
#content .ce-page .ce-paygroup:has(input[type="radio"]:checked) .ce-paycard{
  border-color:var(--dtk-primary);
  background:var(--dtk-primary-weak);
  box-shadow:inset 0 0 0 1px var(--dtk-primary);
}
#content .ce-page .ce-paycard input[type="radio"]{ margin:3px 0 0; accent-color:var(--dtk-primary); flex:none; }
#content .ce-page .ce-paycard b{ color:var(--dtk-ink); font-weight:600; }
#content .ce-page .ce-paycard .ce-paycard-hint{
  display:block;
  font-size:14px;
  font-weight:400;
  color:var(--dtk-muted);
  margin-top:2px;
}
#content .ce-page .ce-paypanel{
  margin-top:12px;
  padding:16px;
  border:1px dashed var(--dtk-border-strong);
  border-radius:var(--dtk-r-md);
  background:var(--dtk-panel);
}
#content .ce-page .ce-paygroup:has(input[type="radio"]:not(:checked)) .ce-paypanel{ display:none; }

/* password strength meter (passStrengthify) as a full-width rounded bar */
#content .ce-page .ce-pwwrap .passStrengthify{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  margin-top:8px;
  min-width:0 !important;
}
#content .ce-page .ce-pwwrap .passStrengthify > div{
  width:100%;
  order:2;
  margin-top:4px;
}
#content .ce-page .ce-pwwrap .passStrengthify > div span{
  font-size:14px !important;
  color:var(--dtk-muted);
}
#content .ce-page .ce-pwwrap .passStrengthify > span{
  order:1;
  flex:1 1 0;
  width:auto !important;
  height:6px !important;
  max-height:6px !important;
  margin-right:2px !important;
  float:none !important;
}
#content .ce-page .ce-pwwrap .passStrengthify > span:first-of-type{ border-radius:999px 0 0 999px; }
#content .ce-page .ce-pwwrap .passStrengthify > span:last-of-type{ border-radius:0 999px 999px 0; margin-right:0 !important; }

/* sticky action bar (reference actions-bar) -- account edit pages only */
#content #customer-edit .ce-actions,
#content #reseller-customer-edit .ce-actions{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:16px 0 24px;
  padding:14px 24px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  box-shadow:var(--dtk-shadow-md);
  text-align:right;
}
#content #customer-edit .ce-actions input[type="submit"],
#content #reseller-customer-edit .ce-actions input[type="submit"]{
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  padding:12px 22px 12px 42px;
  box-shadow:none;
  background-position:18px center;
}
#content #customer-edit .ce-actions input[type="submit"]:hover,
#content #reseller-customer-edit .ce-actions input[type="submit"]:hover{ box-shadow:none; }
#content #customer-edit .ce-actions input[type="button"],
#content #reseller-customer-edit .ce-actions input[type="button"]{
  font-size:15px;
  font-weight:600;
  padding:12px 22px;
  margin:0;
  color:var(--dtk-ink);
  border:1px solid var(--dtk-border-strong);
}
#content #customer-edit .ce-actions input[type="button"]:hover,
#content #reseller-customer-edit .ce-actions input[type="button"]:hover{
  background:var(--dtk-primary-soft);
  border-color:var(--dtk-primary);
}

@media (max-width:820px){
  #content .ce-page .ce-grid{ grid-template-columns:1fr; }
  #content .ce-page .ce-cols{ grid-template-columns:1fr; }
  #content .ce-page .ce-card{ padding:18px 16px; }
  #content #customer-edit .ce-actions{ position:static; }
}

/* ------------------------------------------------------------------
   22c. Registration wizard (customer/templates/register.html)
   The sign-up form's section cards are grouped into .reg-step blocks so
   the visitor only faces one input group at a time. JS adds .reg-wizard
   to the form, builds the .reg-wsteps stepper and the Back/Continue
   nav, and toggles .is-active on the steps -- no page loads, one form,
   one submit. Without JS the steps just stack (everything visible).
   ------------------------------------------------------------------ */
/* single centered column instead of the two-column ce-grid */
#content .ce-page .ce-form.reg-form{ max-width:760px; margin:0 auto; }
/* plain page title (replaced the old reg-hero banner) aligned to the wizard column */
#content #customer-register .ce-title.reg-title{ width:min(760px, 100%); margin:.4em auto 16px; }
#content .ce-page .reg-step{ display:flex; flex-direction:column; gap:16px; }
#content .ce-page .reg-steps > .reg-step + .reg-step{ margin-top:16px; }
#content .ce-page .reg-step > .ce-passinfo{ margin-top:0; }

/* "registering as a company?" toggle: the company/UID fields only appear
   after choosing "yes" (pill radios reuse the checkout's .dtn-radio-group) */
#content .ce-page .reg-biztype{ margin-bottom:16px; }
#content .ce-page .reg-biztype ~ .reg-company-fields{ display:none; }
#content .ce-page .reg-biztype:has(#customer-register-iscompany:checked) ~ .reg-company-fields{
  display:block; animation:dtnFadeIn .3s ease;
}

/* stepper */
#content .ce-page .reg-wsteps{
  display:flex;
  align-items:flex-start;
  list-style:none;
  margin:0 0 22px;
  padding:0;
  counter-reset:none;
}
#content .ce-page .reg-wsteps li{
  flex:1 1 0;
  position:relative;
  margin:0;
  padding:0;
  text-align:center;
  min-width:0;
  list-style:none; /* legacy style.css sets a bullet.gif list-style-image */
  list-style-image:none;
}
/* connector line between the number bubbles */
#content .ce-page .reg-wsteps li + li::before{
  content:"";
  position:absolute;
  top:16px;
  right:calc(50% + 22px);
  left:calc(-50% + 22px);
  height:2px;
  background:var(--dtk-border);
}
#content .ce-page .reg-wsteps li.is-done + li::before,
#content .ce-page .reg-wsteps li.is-current + li.is-done::before{ background:var(--dtk-primary); }
#content .ce-page .reg-wsteps button{
  position:relative;
  z-index:1;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:0 4px;
  background:none;
  border:none;
  box-shadow:none;
  cursor:pointer;
  font:inherit;
  color:var(--dtk-muted);
}
#content .ce-page .reg-wsteps .reg-wnum{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--dtk-border);
  font-size:14px;
  font-weight:600;
  color:var(--dtk-muted);
  transition:background .15s, border-color .15s, color .15s;
}
#content .ce-page .reg-wsteps .reg-wlabel{
  font-size:14px;
  font-weight:500;
  line-height:1.3;
  color:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
#content .ce-page .reg-wsteps li.is-current button{ color:var(--dtk-ink); }
#content .ce-page .reg-wsteps li.is-current .reg-wnum{
  border-color:var(--dtk-primary);
  background:var(--dtk-primary);
  color:#fff;
}
#content .ce-page .reg-wsteps li.is-done .reg-wnum{
  border-color:var(--dtk-primary);
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
}
/* checkmark on completed steps */
#content .ce-page .reg-wsteps li.is-done .reg-wnum{
  font-size:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F65D5'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
}
/* a step carrying server-side validation errors */
#content .ce-page .reg-wsteps li.is-error .reg-wnum{ border-color:#d92d20; color:#d92d20; }
#content .ce-page .reg-wsteps li.is-error.is-current .reg-wnum{ background:#d92d20; border-color:#d92d20; color:#fff; }
#content .ce-page .reg-wsteps li.is-error button{ color:#d92d20; }

/* wizard mode: only the active step is visible; the submit card only on
   the last step (the extra history-back input duplicates the wizard's
   own Back button, so it is dropped in wizard mode) */
#content .ce-page .reg-wizard .reg-step{ display:none; }
#content .ce-page .reg-wizard .reg-step.is-active{ display:flex; }
#content .ce-page .reg-wizard .reg-steps > .reg-step + .reg-step{ margin-top:0; }
#content .ce-page .reg-wizard .ce-actions{ display:none; }
#content .ce-page .reg-wizard.reg-last .ce-actions{ display:block; }
#content .ce-page .reg-wizard .ce-actions input[type="button"]{ display:none; }

/* Back / Continue nav */
#content .ce-page .reg-wnav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
}
#content .ce-page .reg-wnav button{
  font-size:16px;
  border-radius:999px;
  cursor:pointer;
}
#content .ce-page .reg-wnav .reg-wnext{
  padding:.82em 2.3em;
  font-weight:600;
  letter-spacing:.2px;
  border:none;
  background:var(--dtk-primary);
  color:#fff;
  box-shadow:0 4px 12px rgba(15,101,213,.25);
}
#content .ce-page .reg-wnav .reg-wnext:hover{ background:var(--dtk-primary-hover); box-shadow:0 6px 16px rgba(0,56,146,.28); }
#content .ce-page .reg-wnav .reg-wback{
  padding:.82em 2.1em;
  font-weight:500;
  background:#fff;
  color:var(--dtk-primary);
  border:1px solid var(--dtk-border);
}
#content .ce-page .reg-wnav .reg-wback:hover{ background:#f2f7ff; border-color:#9fbde6; }
/* last step: the Continue button is hidden by JS and the submit card shows
   below the nav (its Back button stays usable) */
#content .ce-page .reg-wizard.reg-last .ce-actions{ margin-top:16px; }

/* required-field reminder + missing-field highlight (client-side nudge) */
#content .ce-page .reg-wmsg{
  display:none;
  margin-top:16px;
  padding:10px 14px;
  border:1px solid #f2c1bd;
  border-radius:var(--dtk-r-md);
  background:#fdf1f0;
  color:#b42318;
  font-size:14px;
}
#content .ce-page .reg-wmsg.is-show{ display:block; }
#content .ce-field.ce-miss input,
#content .ce-field.ce-miss select{ border-color:#d92d20; }
#content .ce-field.ce-miss .ce-label{ color:#d92d20; }

@media (max-width:640px){
  /* keep the stepper compact: only the current step shows its label */
  #content .ce-page .reg-wsteps li:not(.is-current) .reg-wlabel{ display:none; }
  #content .ce-page .reg-wsteps li + li::before{ right:calc(50% + 18px); left:calc(-50% + 18px); }
  #content .ce-page .reg-wnav button{ flex:1 1 0; }
}

/* ------------------------------------------------------------------
   23. FINAL SWEEP -- legacy <font> neutralization + last inline-style
       remaps (transfer ZE table, access TOTP list, zone-editor helper)
   ------------------------------------------------------------------ */

/* <font face="Arial..."> must not override the page font; the size
   attribute maps onto the modern scale (1 = hint, 2 = small copy) */
#content font{ font-family:inherit; }
#content font[size="1"]{ font-size:13px; color:#6E6F6F; }
#content font[size="2"]{ font-size:14px; }

/* transfer.html / transfer_at.html: zone-editor RR table
   (was inline border:2px solid #333; background var(--dtk-panel)) */
#content #ZE-RR-Table{
  border:1px solid var(--dtk-border);
  border-collapse:separate;
  border-spacing:0;
  border-radius:16px;
  overflow:hidden;
  background:var(--dtk-panel);
}

/* nameserver.html: hosted-services helper table under the zone editor
   (was inline border-top:1px solid #666).
   clear:both is load-bearing -- the table follows two uncleared float:right
   blocks ("Eintraege von:" and the reseller #ZE-templates picker). A table is
   a BFC root, so without the clear it squeezes into whatever strip is left
   beside the float whenever its min-content width happens to fit there. The
   IP cells are nowrap, so the remaining columns then collapse to one
   character per line (and a one-character-wide "laden" button). Whether it
   triggers depends on the window width and on the exact IP string length,
   which makes it look random. */
#content table.ze-hosted{ border-top:1px solid var(--dtk-border); margin:0 auto; clear:both; }
#content .ze-marked{ background-color:#EAF2FE; }

/* domain list: nameserver links pointing at foreign NS (was inline #676E83) */
#content a.link-muted{ color:#6E6F6F; }

/* reseller cp_template: CodeMirror editor skin (was JS-injected <style>) */
#content .CodeMirror{
  width:850px;
  max-width:100%;
  border:1px solid var(--dtk-input-border);
  border-radius:12px;
}

/* invoice table collapses to cards on mobile (labels come from the
   data-label attrs in invoice/templates/list.html, MSG ids 2-6) */
@media (max-width:720px){
  #invoice-main table.invoice-table{
    display:block; border:none; border-radius:0; box-shadow:none; background:transparent;
  }
  #invoice-main table.invoice-table thead{ display:none; }
  #invoice-main table.invoice-table tbody{ display:block; }
  #invoice-main table.invoice-table tbody tr{
    display:block;
    background:#fff;
    border:1px solid var(--dtk-border);
    border-radius:16px;
    margin-bottom:.8em;
    padding:.35em .15em;
    overflow:hidden;
  }
  #invoice-main table.invoice-table tbody tr:nth-child(even) td{ background:transparent; }
  #invoice-main table.invoice-table tbody td{ border:none; background:transparent; }
  #invoice-main table.invoice-table tbody td[data-label]{
    display:flex; justify-content:space-between; align-items:center; gap:1.1429em;
    padding:7px 14px; text-align:right;
  }
  #invoice-main table.invoice-table tbody td[data-label]::before{
    content:attr(data-label);
    font-weight:600; color:#6E6F6F; text-align:left; white-space:nowrap;
  }
  #invoice-main table.invoice-table tbody td.row-actions{
    display:flex; justify-content:flex-end; gap:8px;
    padding:10px 14px 8px;
    border-top:1px solid var(--dtk-border-soft);
    margin-top:0.2857em;
  }
}

/* ------------------------------------------------------------------
   Customer price list (customer/templates/product_list.html):
   searchable, category-filterable pricelist on the .dtn-wrap kit.
   ------------------------------------------------------------------ */
#content #product-list h2{ margin:0 0 0.3692em; }
/* `#content h2` drops to 22px below 720px -- restate the 9.6px margin there */
@media (max-width:720px){
  #content #product-list h2{ margin:0 0 0.4364em; }
}
#product-list .pl-vat{ color:var(--dtk-muted); font-size:14px; margin:0 0 1.3714em; }
#product-list .pl-vat-foot{ margin:1.3714em 0 0.3429em; }

/* category chips (segmented pill filter inside the filter bar) */
#product-list .pl-cats{ display:flex; flex-wrap:wrap; gap:8px; }
#content #product-list .pl-cat{
  padding:8px 15px;
  border:1px solid var(--dtk-border);
  border-radius:999px;
  background:#fff;
  color:var(--dtk-body);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
#content #product-list .pl-cat:hover{ border-color:var(--dtk-primary); color:var(--dtk-primary); }
#content #product-list .pl-cat.active{ background:var(--dtk-primary); border-color:var(--dtk-primary); color:#fff; }
#product-list .pl-cat .pl-cat-count{ opacity:.65; font-weight:400; margin-left:2px; }

/* result count line */
#product-list .pl-count{ font-size:14px; color:var(--dtk-muted); margin:-0.4571em 2px 1.1429em; }

/* table */
#content #product-list table.product-price-table{ table-layout:auto; }
#content #product-list table.product-price-table th.pl-num-h{ text-align:right; }
/* filtering re-orders visibility, so drop the static zebra for row dividers + hover */
#content #product-list table.product-price-table tbody tr:nth-child(odd) td{ background:#fff; }
#content #product-list table.product-price-table tbody td{ border-bottom:1px solid var(--dtk-border-soft); vertical-align:top; }
#content #product-list table.product-price-table tbody tr:last-child td{ border-bottom:none; }
#content #product-list table.product-price-table tbody tr:hover td{ background:var(--dtk-primary-soft); }
#product-list table.product-price-table tbody tr.pl-hidden{ display:none; }

#product-list .pl-name{ font-weight:600; color:var(--dtk-ink); overflow-wrap:break-word; }
#product-list .pl-tag{
  display:none;
  margin-left:8px;
  font-size:12.5px;
  font-weight:500;
  padding:2px 9px;
  border-radius:999px;
  background:var(--dtk-primary-weak);
  color:var(--dtk-primary);
  vertical-align:middle;
  white-space:nowrap;
}
#product-list.pl-searching .pl-tag{ display:inline-block; }
#product-list td.pl-period{ color:var(--dtk-muted); white-space:nowrap; }
#product-list td.pl-num{ text-align:right; }
#product-list .pl-price{ display:block; font-weight:600; color:var(--dtk-ink); }
#product-list .pl-amount{ white-space:nowrap; }
#product-list .pl-amount.is-offer{ color:var(--dtk-error); }
#product-list .pl-offer{ font-weight:400; }
#content #product-list .pl-offer a{ color:#C2410C; font-weight:600; text-decoration:none; white-space:nowrap; }
#content #product-list .pl-offer a:hover{ text-decoration:underline; }
#product-list .pl-offer span{ color:var(--dtk-muted); white-space:nowrap; }
#product-list .pl-endkunde{
  display:block;
  font-size:13px;
  color:var(--dtk-muted);
  font-weight:400;
  margin-top:3px;
}
#product-list .pl-empty{ text-align:center; color:var(--dtk-muted); padding:2.6667em 1.0667em; font-size:15px; }

/* mobile: stack each product into a card (mirrors the invoice list) */
@media (max-width:720px){
  #content #product-list table.product-price-table{
    display:block; border:none; border-radius:0; box-shadow:none; background:transparent;
  }
  #product-list table.product-price-table thead{ display:none; }
  #product-list table.product-price-table tbody{ display:block; }
  #product-list table.product-price-table tbody tr{
    display:block;
    background:#fff;
    border:1px solid var(--dtk-border);
    border-radius:16px;
    margin-bottom:.8em;
    overflow:hidden;
  }
  #content #product-list table.product-price-table tbody tr:hover td{ background:transparent; }
  #product-list table.product-price-table tbody td{ border-bottom:none; }
  /* first cell = card header (bold name, no data-label prefix) */
  #product-list table.product-price-table tbody td:first-child{
    display:block;
    text-align:left;
    background:var(--dtk-panel);
    padding:11px 14px;
    border-bottom:1px solid var(--dtk-border-soft);
  }
  #product-list table.product-price-table tbody td:first-child::before{ content:none; }
  #product-list table.product-price-table tbody td[data-label]:not(:first-child){
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:baseline;
    gap:0.2133em 1.0667em;
    padding:8px 14px;
    text-align:right;
  }
  #product-list table.product-price-table tbody td[data-label]:not(:first-child)::before{
    content:attr(data-label);
    font-weight:600;
    color:var(--dtk-muted);
    text-align:left;
    white-space:nowrap;
  }
  #product-list td.pl-num .pl-price{ white-space:normal; }
  #product-list td.pl-num .pl-endkunde{ flex-basis:100%; text-align:right; white-space:normal; }
}

/* ============================================================
   24. DTK RE-SKIN -- base typography, site chrome (CSS-only),
       jQuery-UI controls. Ported from the dt design spec;
       prefix dtk- to avoid the app's own dt-* classes.
   ============================================================ */

/* ---- 24.1 base typography: 16px base replaces the legacy 11px ---- */
body{ font-size:16px; line-height:1.55; }
#content{ font-size:16px; line-height:1.55; color:var(--dtk-body); }
#content h1{
  font-size:32px; font-weight:500; letter-spacing:.2px; color:var(--dtk-ink);
  background:none; border-bottom:none; padding-left:0;
}
#content h2{ font-size:26px; font-weight:500; letter-spacing:.2px; color:var(--dtk-ink); }
#content h3{ font-size:21px; font-weight:500; letter-spacing:.2px; color:var(--dtk-ink); }
@media (max-width:720px){
  #content h1{ font-size:26px; }
  #content h2{ font-size:22px; }
}

/* ---- 24.2 header / primary navigation. Markup REBUILT in
   iface/{de,en}_logged_header.htm (2026-07-08): a 3-zone bar --
   logo | "Meine Leistungen" + "Warenkorb"(badge) | "Profil" dropdown.
   The old .flex-item/.header-bar li markup + its user_logged.css rules
   are gone from the DOM, so this replaces the previous CSS-only re-skin. ---- */
/* floating rounded card (took over the look of the former blue help-card footer) */
#header{
  display:block; /* legacy sets inline-block, which ignores margin:auto centering */
  background:#1462c5;
  border-bottom:none;
  box-shadow:var(--dtk-shadow-xs);
  width:min(1240px, calc(100% - 32px));
  margin:16px auto 0;
  border-radius:28px;
}
#header .header-width{ max-width:1100px; margin:0 auto; }
#header .dtk-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  padding:22px 36px;
}
/* logo */
#header .dtk-nav-logo{ display:flex; align-items:center; flex:none; }
#header .dtk-nav-logo img{ height:46px; width:auto; max-width:50vw; border:none; display:block; }
/* nav links: icon-above-label stacks, clustered on the right (reference look).
   The 3 spans (ico / label / caret) stay in one flex line-wrap: the icon takes
   a full first row (flex-basis:100%), label + caret share the second. */
#header .dtk-nav-center{ display:flex; align-items:center; gap:18px; margin-left:auto; }
#header .dtk-nav-link{
  display:inline-flex;
  box-sizing:border-box;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  column-gap:5px;
  row-gap:8px;
  color:#fff;
  font-size:16px;
  font-weight:500;
  line-height:1;
  min-width:72px;
  padding:10px 12px;
  border-radius:14px;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  border:none;
  transition:background .15s;
}
#header .dtk-nav-link:hover,
#header .dtk-nav-link:active{ color:#fff; text-decoration:none; background:rgba(255,255,255,.16); }
/* white PNG glyphs recolored via mask so they follow the link color */
#header .dtk-nav-ico{
  flex:0 0 100%;
  width:100%; height:22px; display:inline-block;
  background:currentColor;
  -webkit-mask:var(--ic) center / contain no-repeat;
          mask:var(--ic) center / contain no-repeat;
}
#header .dtk-ico-services{ --ic:url(/new-icons/domainliste-white.png); }
#header .dtk-ico-cart{ --ic:url(/new-icons/bestellliste-white.png); }
#header .dtk-ico-profile{ --ic:url(/new-icons/kundendaten-white.png); }
#header .dtk-ico-home{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 11.2l1.3 1.5L5 11.6V21h5v-6h4v6h5v-9.4l1.2 1.1 1.3-1.5z' fill='%23000'/%3E%3C/svg%3E"); }
/* cart count badge -- dark dot at the cart icon's top-right (reference look) */
#header .dtk-nav-cart{ position:relative; }
#header .dtk-cart-badge{
  position:absolute;
  top:2px; left:calc(50% + 8px); right:auto;
  min-width:18px; height:18px;
  padding:0 5px;
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  background:#16191d; color:#fff;
  font-size:12px; font-weight:700; line-height:1;
  border-radius:999px;
  border:2px solid #1462c5;
}
/* profile dropdown (native <details>) */
#header .dtk-profile{ position:relative; flex:none; }
#header .dtk-profile > summary{ list-style:none; }
#header .dtk-profile > summary::-webkit-details-marker{ display:none; }
#header .dtk-caret{
  width:12px; height:8px; flex:none; display:inline-block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .2s ease;
}
#header .dtk-profile[open] .dtk-caret{ transform:rotate(180deg); }
#header .dtk-profile-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:210px;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
  box-shadow:0 12px 30px rgba(2,20,54,.16);
  padding:6px;
  z-index:1000;
}
#header .dtk-profile-nr{
  padding:8px 14px 10px;
  margin-bottom:4px;
  border-bottom:1px solid var(--dtk-border-soft);
  font-size:14px;
  color:var(--dtk-muted);
  white-space:nowrap;
}
#header .dtk-profile-nr b{ color:var(--dtk-ink); font-weight:600; }
#header .dtk-profile-menu a{
  display:block;
  padding:10px 14px;
  color:var(--dtk-ink);
  font-size:15px;
  font-weight:500;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
}
#header .dtk-profile-menu a:hover{ background:var(--dtk-primary-weak); color:var(--dtk-primary); text-decoration:none; }
#header .dtk-profile-logout{
  margin-top:4px;
  padding-top:12px !important;
  border-top:1px solid var(--dtk-border-soft);
  color:#c0392b !important;
}
#header .dtk-profile-menu a.dtk-profile-logout:hover{ background:#fdecec; color:#c0392b !important; }

/* right-side dropdown group: FAQ + profile sit together on the right.
   On desktop .dtk-menu is display:contents, so this flex box is one of the
   three space-between zones (logo | nav-center | nav-right). */
#header .dtk-nav-right{ display:flex; align-items:center; gap:18px; flex:none; margin-left:18px; }

/* FAQ dropdown (native <details>, same pattern + caret as the profile menu) */
#header .dtk-ico-faq{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z' fill='%23000'/%3E%3C/svg%3E"); }
#header .dtk-faq{ position:relative; flex:none; }
#header .dtk-faq > summary{ list-style:none; }
#header .dtk-faq > summary::-webkit-details-marker{ display:none; }
#header .dtk-faq[open] .dtk-caret{ transform:rotate(180deg); }
#header .dtk-faq-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:320px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-md);
  box-shadow:0 12px 30px rgba(2,20,54,.16);
  padding:14px;
  z-index:1000;
}
#header .dtk-faq-head{ margin:0 0 10px; font-size:14px; font-weight:500; color:var(--dtk-muted); }
#header .dtk-faq-search{
  display:flex; gap:6px;
  margin:0 0 12px; padding:0 0 12px;
  border-bottom:1px solid var(--dtk-border-soft);
}
#header .dtk-faq-search input{
  flex:1 1 auto; min-width:0; box-sizing:border-box;
  padding:9px 12px; font-size:15px; font-family:inherit;
  color:var(--dtk-ink); background:#fff;
  border:1px solid var(--dtk-input-border, #DADEE4); border-radius:9px;
}
#header .dtk-faq-search input::placeholder{ color:var(--dtk-muted); }
#header .dtk-faq-search input:focus{
  outline:none; border-color:var(--dtk-primary);
  box-shadow:0 0 0 3px rgba(20,98,197,.18);
}
#header .dtk-faq-search-btn{
  flex:none; width:40px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dtk-primary); color:#fff;
  border:none; border-radius:9px;
}
#header .dtk-faq-search-btn:hover{ background:var(--dtk-primary-hover); }
#header .dtk-faq-search-ico{
  width:18px; height:18px; display:inline-block; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
#header .dtk-faq-cats{ display:block; }
#header .dtk-faq-menu a{
  display:block; padding:9px 10px;
  color:var(--dtk-ink); font-size:15px; font-weight:500;
  border-radius:8px; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#header .dtk-faq-menu a:hover{ background:var(--dtk-primary-weak); color:var(--dtk-primary); text-decoration:none; }
#header .dtk-faq-all{
  margin-top:6px; padding-top:12px !important;
  border-top:1px solid var(--dtk-border-soft);
  font-weight:600 !important; color:var(--dtk-primary) !important;
}
#header .dtk-faq-all:hover{ background:var(--dtk-primary-weak) !important; }

/* responsive: below 1024px the bar collapses behind a hamburger.
   The full inline nav (logo | 3 links | FAQ + profile, ~990px intrinsic)
   overflows below ~1008px, so 1024px (the standard tablet cutoff) is the
   first safe width for the inline layout.
   On desktop .dtk-menu is display:contents so logo | nav-center | nav-right
   keep their exact space-between layout and the burger button stays hidden. */
#header .dtk-menu{ display:contents; }
#header .dtk-burger{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  padding:0; margin:0;
  background:transparent; border:none; border-radius:10px;
  color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#header .dtk-burger:hover{ background:rgba(255,255,255,.16); }
#header .dtk-burger:focus-visible{ background:rgba(255,255,255,.16); outline:2px solid #fff; outline-offset:2px; }
#header .dtk-burger-box{ position:relative; display:block; width:22px; height:16px; }
#header .dtk-burger-bar,
#header .dtk-burger-bar::before,
#header .dtk-burger-bar::after{
  content:""; position:absolute; left:0;
  width:22px; height:2px; border-radius:2px; background:#fff;
  transition:transform .22s ease, top .22s ease, background .1s ease;
}
#header .dtk-burger-bar{ top:7px; }
#header .dtk-burger-bar::before{ top:-7px; }
#header .dtk-burger-bar::after{ top:7px; }
#header .dtk-nav.dtk-open .dtk-burger-bar{ background:transparent; }
#header .dtk-nav.dtk-open .dtk-burger-bar::before{ top:0; transform:rotate(45deg); }
#header .dtk-nav.dtk-open .dtk-burger-bar::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1024px){
  #header{ width:calc(100% - 20px); margin:10px auto 0; border-radius:20px; }
  #header .dtk-nav{ position:relative; flex-wrap:nowrap; gap:.6em; padding:8px 1em; }
  #header .dtk-nav-logo img{ height:34px; }
  #header .dtk-burger{ display:inline-flex; }

  /* the drawer -- a rounded blue panel that slides out under the floating bar */
  #header .dtk-menu{
    display:block; position:absolute; left:0; right:0; top:calc(100% + 8px);
    background:#1462c5;
    border-radius:20px;
    box-shadow:0 16px 30px rgba(2,20,54,.30);
    padding:8px; margin:0;
    max-height:calc(100vh - 80px); overflow-y:auto;
    z-index:1000;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  #header .dtk-nav.dtk-open .dtk-menu{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .2s ease, transform .2s ease;
  }

  /* primary links -> full-width stacked rows (icon back beside the label) */
  #header .dtk-nav-center{ flex-direction:column; align-items:stretch; gap:2px; margin-left:0; }
  #header .dtk-nav-link{
    width:100%; justify-content:flex-start;
    flex-wrap:nowrap; column-gap:8px;
    padding:12px 14px; font-size:15px; border-radius:10px;
  }
  #header .dtk-nav-ico{ flex:0 0 auto; width:20px; height:20px; }
  /* cart count sits inline in the row instead of floating in a corner */
  #header .dtk-cart-badge{
    position:static; top:auto; left:auto; right:auto;
    margin-left:8px; border:none;
  }

  /* FAQ + account: flat, static sections, each under a hairline divider */
  #header .dtk-nav-right{ display:block; margin-left:0; }
  #header .dtk-nav-right > details{
    width:100%; margin-top:6px; padding-top:6px;
    border-top:1px solid rgba(255,255,255,.18);
  }
  #header .dtk-faq > summary.dtk-faq-toggle,
  #header .dtk-profile > summary.dtk-profile-toggle{
    width:100%; justify-content:flex-start;
    padding:12px 14px; border-radius:10px;
  }
  #header .dtk-faq-toggle .dtk-caret,
  #header .dtk-profile-toggle .dtk-caret{ margin-left:auto; }
  #header .dtk-profile-menu{
    position:static; min-width:0; width:auto;
    background:transparent; border:none; box-shadow:none;
    padding:2px 0 2px 30px; margin:2px 0 0;
  }
  #header .dtk-profile-nr{
    padding:8px 14px 8px 0; color:#EAF2FE;
    border-bottom-color:rgba(255,255,255,.18);
  }
  #header .dtk-profile-nr b{ color:#fff; }
  #header .dtk-profile-menu a{ color:#fff; padding:11px 14px; border-radius:8px; }
  #header .dtk-profile-menu a:hover{ background:rgba(255,255,255,.16); color:#fff; }
  #header .dtk-profile-logout{
    margin-top:4px; border-top-color:rgba(255,255,255,.18);
    color:#ffd9d9 !important;
  }
  #header .dtk-profile-menu a.dtk-profile-logout:hover{ background:rgba(255,255,255,.16); color:#fff !important; }

  /* FAQ menu -> flat on the blue drawer (white search field kept for contrast) */
  #header .dtk-faq-menu{
    position:static; width:auto; max-width:none; max-height:none; overflow:visible;
    background:transparent; border:none; box-shadow:none;
    padding:2px 0 2px 30px; margin:2px 0 0;
  }
  #header .dtk-faq-head{ color:#EAF2FE; margin-bottom:8px; }
  #header .dtk-faq-search{ border-bottom-color:rgba(255,255,255,.22); padding-bottom:12px; }
  #header .dtk-faq-search-btn{ background:#fff; color:#1462c5; }
  #header .dtk-faq-search-btn:hover{ background:#EAF2FE; }
  #header .dtk-faq-menu a{ color:#fff; padding:11px 14px; }
  #header .dtk-faq-menu a:hover{ background:rgba(255,255,255,.16); color:#fff; }
  #header .dtk-faq-all{ color:#fff !important; border-top-color:rgba(255,255,255,.18); }
  #header .dtk-faq-all:hover{ background:rgba(255,255,255,.16) !important; }
}

/* ---- 24.3 footer: quiet light legal bar (copyright left, legal links right,
   like the marketing-site bottom bar) ---- */
/* body is the footer's absolute containing block (position:relative in legacy css);
   min-height pins the band to the viewport bottom on short pages */
/* !important: the trustedshops widget writes an inline min-height:auto onto <body>.
   flow-root keeps #header's 16px top margin INSIDE body (it otherwise collapses
   through and makes every page 16px taller than the viewport -> phantom scroll) */
html body{ padding-bottom:180px; min-height:100vh !important; box-sizing:border-box; display:flow-root; }
#footer{
  background:#f1f1f1;
  border-top:none;
  color:var(--dtk-ink);
  /* above the lookup widget's sticky bottom bar (z-index 200) so the bar
     disappears behind the footer when the page is scrolled to the end */
  z-index:300;
  left:0; right:0; bottom:0;
  width:auto;
  max-width:none;
  margin:0 auto;
  border-radius:0;
  /* full-bleed band, but the content stays in the same 1152px centered column
     it had as a 1240px card with 44px side padding */
  padding:44px max(44px, calc((100% - 1152px) / 2));
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  text-align:left;
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
}
#footer .dtk-footer-copy{ color:var(--dtk-ink); }
#footer .dtk-footer-links{ display:flex; flex-wrap:wrap; gap:8px 26px; }
#footer a{ color:var(--dtk-ink); font-weight:normal; text-decoration:none; }
#footer a:hover{ color:var(--dtk-primary); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:760px){
  html body{ padding-bottom:230px; }
  #footer{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:26px 20px;
  }
  #footer .dtk-footer-links{ justify-content:center; }
}

/* cookie note buttons (last browser-default "OK" relic) */
#dt-cookie-accept button{
  font-family:inherit; font-size:15px; font-weight:600;
  padding:9px 18px; border-radius:999px; cursor:pointer;
  background:var(--dtk-primary); color:#fff; border:1px solid transparent;
}
#dt-cookie-accept button + button{
  background:#fff; color:var(--dtk-ink); border-color:var(--dtk-border-strong);
}

/* ---- 24.4 jQuery-UI controls on the dtk system (app-wide) ---- */
#content .ui-button,
.ui-dialog .ui-button{
  font-family:inherit; font-size:14px; font-weight:600; line-height:1.2;
  background:#fff; color:var(--dtk-ink);
  border:1px solid var(--dtk-border-strong);
  border-radius:999px;
  padding:.55em 1.3em;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
#content .ui-button.ui-state-hover,
#content .ui-button:hover,
.ui-dialog .ui-button:hover{
  background:var(--dtk-primary-soft);
  border-color:var(--dtk-primary);
  color:var(--dtk-ink);
}
#content .ui-button.ui-state-active,
#content .ui-button.ui-state-focus{
  background:var(--dtk-primary-weak);
  border-color:var(--dtk-primary);
  color:var(--dtk-primary);
  box-shadow:none;
}
#content .ui-button.ui-priority-primary,
.ui-dialog .ui-button.ui-priority-primary{
  background:var(--dtk-primary); color:#fff; border-color:var(--dtk-primary);
}
#content .ui-button.ui-priority-primary.ui-state-hover,
#content .ui-button.ui-priority-primary:hover,
.ui-dialog .ui-button.ui-priority-primary:hover{
  background:var(--dtk-primary-hover); border-color:var(--dtk-primary-hover); color:#fff;
}
#content .ui-button .ui-button-text,
.ui-dialog .ui-button .ui-button-text{ color:inherit; padding:0; }

/* jQuery-UI tabs as filter chips */
#content .ui-tabs{ background:none; border:none; padding:0; font-family:inherit; }
#content .ui-tabs .ui-tabs-nav{
  background:none; border:none; padding:0; margin:0 0 1em;
  display:flex; flex-wrap:wrap; gap:8px;
}
#content .ui-tabs .ui-tabs-nav li{
  background:none; border:none; margin:0; padding:0; white-space:nowrap;
  top:0; list-style:none; float:none;
}
#content .ui-tabs .ui-tabs-nav .ui-tabs-anchor{
  float:none; display:inline-flex; align-items:center;
  font-size:15px; font-weight:500; color:var(--dtk-body);
  background:#fff; border:1px solid var(--dtk-border);
  border-radius:999px; padding:7px 15px;
  text-decoration:none; transition:.15s;
}
#content .ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover{
  border-color:var(--dtk-primary); color:var(--dtk-primary);
}
#content .ui-tabs .ui-tabs-nav .ui-tabs-active .ui-tabs-anchor{
  background:var(--dtk-primary-weak); border-color:var(--dtk-primary);
  color:var(--dtk-primary); font-weight:600;
}
#content .ui-tabs .ui-tabs-panel{ background:none; border:none; padding:0; }

/* jQuery-UI dialogs */
.ui-dialog{
  border:1px solid var(--dtk-border); border-radius:22px;
  box-shadow:var(--dtk-shadow-lg); font-family:inherit;
  background:#fff; padding:0; overflow:hidden;
}
.ui-dialog .ui-dialog-titlebar{
  background:#fff; border:none; border-bottom:1px solid var(--dtk-border-soft);
  border-radius:0; padding:1em 1.3em; color:var(--dtk-ink); font-weight:600;
}
.ui-dialog .ui-dialog-content{ color:var(--dtk-body); padding:1.1em 1.3em; }
.ui-dialog .ui-dialog-buttonpane{
  background:var(--dtk-panel); border-top:1px solid var(--dtk-border-soft); margin:0;
  padding:.7em 1.3em;
}
.ui-widget-overlay{ background:rgba(20,28,40,.5); opacity:1; }

/* ---- 24.5 dtk badges (status pills; markup hooks live in inc/dtapi/lookup.php) ---- */
#content .dtk-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:700; line-height:1.2;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
#content .dtk-badge--success{ background:var(--dtk-success-weak); color:var(--dtk-success); }
#content .dtk-badge--info{ background:var(--dtk-info-weak); color:var(--dtk-info); }
#content .dtk-badge--error{ background:var(--dtk-error-weak); color:var(--dtk-error); }
#content .dtk-badge--warning{ background:var(--dtk-warning-weak); color:var(--dtk-accent-hover); }
#content .dtk-badge--neutral{ background:var(--dtk-disabled-bg); color:var(--dtk-muted); }
#content .dtk-badge--dot::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}
#content .dtk-badge .jui-tooltip{ margin-left:2px; }
#content .dtk-text-error{ color:var(--dtk-error); }
#content .dtk-text-success{ color:var(--dtk-success); }
#content .dtk-status-taken{ color:var(--dtk-info); }

/* ---- 24.6 domain manager grid stacks on mobile ---- */
@media (max-width:640px){
  .domain-table-head{ grid-template-columns:1fr; }
  .domain-table-head > div:not(:first-child){ display:none; }
  .domain-row{ grid-template-columns:1fr; gap:6px; }
  .domain-col[data-label]:not(:empty)::before{
    content:attr(data-label) ": ";
    font-weight:600;
    color:var(--dtk-muted);
  }
  .hosting-row{ flex-direction:column; gap:4px; }
  .domain-extra{ flex-direction:column; padding-left:8px; }
}

/* ============================================================
   25. GRAY PAGE / WHITE CARDS -- match www.domaintechnik.at
       /domain-lookup: gray page background, every surface a
       white bordered card, website button tracking.
   ============================================================ */

/* gray page: html body beats the WP-theme inline body rule on the
   logged-out chrome without needing !important */
html body{ background-color:var(--dtk-page); }

/* the legacy white #content box dissolves -- the cards inside
   provide the white surfaces (style.css paints it #fff + border) */
#content{ background:transparent; border:none!important; }

/* the logged-out WP chrome nav row is transparent and would tint
   gray; pin it white like the logged-in #header */
.wp-site-blocks > header.wp-block-template-part{ background:#fff; }

/* website button feel: medium weight, slight negative tracking */
#content input[type="submit"],
#content input[type="button"],
#content input[type="reset"],
.dtn-btn-submit{
  font-weight:500;
  letter-spacing:-.005em;
}
/* ghost outlines keep the stronger line now that --dtk-border is
   the faint card hairline */
#content input[type="button"],
#content input[type="reset"]{ border-color:var(--dtk-border-strong); }

/* ============================================================
   26. ZONE-EDITOR BUTTONS (nameserver.html + transfer pages)
   ------------------------------------------------------------
   .ze-add    labeled "+ add record" pill (was a bare "+")
   .ze-clear  labeled destructive pill with confirm (was a bare "-")
   .ze-del    round trash icon per record row (was a bare "-")
   ============================================================ */
#content button.ze-add,
#content button.ze-clear{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  border-radius:999px;
  padding:.5em 1.15em;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  margin:8px 8px 4px 0;
  transition:background .15s, border-color .15s, color .15s;
}
#content button.ze-add{
  color:var(--dtk-primary);
  border:1px solid var(--dtk-primary);
}
#content button.ze-add:hover{ background:var(--dtk-primary-weak); }
#content button.ze-add::before{
  content:"";
  width:12px;
  height:12px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#content button.ze-clear{
  color:var(--dtk-error);
  border:1px solid #F2C4CD;
}
#content button.ze-clear:hover{ background:var(--dtk-error-weak); border-color:var(--dtk-error); }
#content button.ze-clear::before{
  content:"";
  width:13px;
  height:13px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1.5v-8H10zm3 0v8h1.5v-8H13z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1.5v-8H10zm3 0v8h1.5v-8H13z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#content button.ze-del{
  width:28px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--dtk-border-strong);
  border-radius:50%;
  color:var(--dtk-muted);
  font-size:0;               /* hides the legacy "-" glyph */
  line-height:0;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
#content button.ze-del::before{
  content:"";
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1.5v-8H10zm3 0v8h1.5v-8H13z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-1 12H7L6 9zm4 2v8h1.5v-8H10zm3 0v8h1.5v-8H13z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#content button.ze-del:hover{
  color:var(--dtk-error);
  border-color:var(--dtk-error);
  background:var(--dtk-error-weak);
}

/* ============================================================
   25. Empty order-list state (selected_domains / lookup_new.html)
   ------------------------------------------------------------
   Shown above the search bar when the cart is empty (cart_empty),
   identical logged in and logged out. Replaces the bare
   get_text(349) text line with a friendly centered card.
   ============================================================ */
#content .sd-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.5em;
  max-width:520px;
  margin:1.2em auto 1.8em;
  padding:2em 1.5em;
  background:var(--dtk-primary-soft);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
}
#content .sd-empty__icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--dtk-border);
  color:var(--dtk-primary);
  box-shadow:var(--dtk-shadow-xs);
}
#content .sd-empty__icon svg{ width:28px; height:28px; }
#content .sd-empty__title{
  margin:.2em 0 0;
  font-size:19px;
  font-weight:600;
  color:var(--dtk-ink);
  letter-spacing:.2px;
}
#content .sd-empty__text{
  margin:0;
  max-width:40ch;
  font-size:14.5px;
  line-height:1.5;
  color:var(--dtk-muted);
}

/* ============================================================
   26. Cancellation page (domain/templates/cancel_form.html)
   ------------------------------------------------------------
   domain_index.php?action=cancel_form&domain_id=N. One card when
   the domain owner matches the customer account (scope + time
   radios, one PDF); two side-by-side cards when they differ -
   domain form signed by the DOMAIN OWNER, hosting form signed by
   the ACCOUNT HOLDER (billing address) - each with its own
   signatory address block and download button. The buttons open
   the pre-ticked pdf_cancel_domain / pdf_cancel_hosting PDFs.
   ============================================================ */
#content .cx-wrap{
  max-width:860px;
  margin:0 auto;
  padding:.5em 0 2em;
}
#content .cx-back{
  display:inline-block;
  margin-bottom:.9em;
  font-size:14px;
  color:var(--dtk-primary);
  text-decoration:none;
}
#content .cx-back:hover{ text-decoration:underline; }
#content .cx-title{
  margin:0 0 .8em;
  font-size:24px;
  font-weight:600;
  color:var(--dtk-ink);
  overflow-wrap:anywhere;
}
/* why-two-forms explanation above the mismatch cards */
#content .cx-explain{
  margin:0 0 1.2em;
  padding:1em 1.2em;
  background:var(--dtk-primary-soft);
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  font-size:14.5px;
  line-height:1.55;
  color:var(--dtk-ink);
}
#content .cx-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width:720px){
  #content .cx-cols{ grid-template-columns:1fr; }
}
#content .cx-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--dtk-border);
  border-radius:var(--dtk-r-lg);
  padding:1.3em 1.4em;
  box-shadow:0 2px 10px rgba(20,28,40,.05);
}
#content .cx-card-title{
  margin:0 0 .7em;
  font-size:17px;
  font-weight:600;
  color:var(--dtk-ink);
}
#content .cx-dim{ font-weight:normal; color:var(--dtk-muted); }
/* signatory address block: makes obvious whose data is on the PDF */
#content .cx-party{
  margin:0 0 .8em;
  padding:.8em 1em;
  background:var(--dtk-panel);
  border:1px solid var(--dtk-border);
  border-radius:10px;
  font-size:14px;
  line-height:1.5;
  color:var(--dtk-ink);
}
#content .cx-party-label{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--dtk-muted);
  margin-bottom:.25em;
}
#content .cx-party > div:nth-child(2){ font-weight:600; }
#content .cx-note{
  margin:0 0 1em;
  font-size:13.5px;
  color:var(--dtk-muted);
}
#content .cx-group{
  border:none;
  margin:0 0 1em;
  padding:0;
}
#content .cx-group + .cx-group{
  border-top:1px solid var(--dtk-border);
  padding-top:1em;
}
#content .cx-group legend{
  font-size:13.5px;
  font-weight:600;
  color:var(--dtk-muted);
  padding:0;
  margin-bottom:.4em;
}
#content .cx-group label{
  display:flex;
  align-items:center;
  gap:.55em;
  font-size:15px;
  color:var(--dtk-ink);
  padding:.25em 0;
  cursor:pointer;
}
#content .cx-group input[type="radio"]{ margin:0; flex:0 0 auto; }
#content .cx-hint{
  margin:.5em 0 0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--dtk-muted);
}
/* replaces the time fieldset when only end-of-term is possible */
#content .cx-hint-term{ margin:0 0 1em; }
#content button.cx-download{
  margin-top:auto;
  align-self:flex-start;
  padding:9px 22px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
}

/* ============================================================
   27. Unusable-domain error (shared panel)
   ------------------------------------------------------------
   Used by hosting/templates/hosting_unknown_error.html and
   domain/templates/transfer_error.html: the input is not a domain
   we can host / transfer (no TLD, TLD we do not sell, a failed
   availability lookup, or already registered here on another
   account). The error notice sits directly above the matching home
   page card (.home-card, section "home action cards") pre-filled
   with what was typed, so the dead end always offers a retry.
   ============================================================ */
#content .hue-panel{
  max-width:560px;
  margin:3em auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* .dtn-notice centers itself as a standalone page card; inside the panel it is
   the top half of a two-part column, so the panel owns margin and alignment */
#content .hue-panel > .dtn-notice{
  margin:0;
  padding:1.3em 1.5em;
  text-align:left;
}
/* echo of what was actually evaluated (scheme and www. already stripped) */
#content .hue-panel .hue-input{
  margin:.8em 0 0;
  font-size:14px;
  color:#8a1f1f;
}
#content .hue-panel .hue-input b{ overflow-wrap:anywhere; }
@media (max-width:600px){
  #content .hue-panel{ margin:1.5em auto; }
}

/* ============================================================
   28. Transfer order confirmation + upsell
       (domain/templates/transfer_ordered.html)
   ------------------------------------------------------------
   Shown after a transfer has been ORDERED (the transfer itself
   still has to be released by the current provider) instead of
   the bare domain list. Built from the existing ce-page /
   ce-card / srg-* / pz-step kit, so only the three new pieces
   need rules: the domain chip under the confirmation, the offer
   card, and the "no thanks" link.
   ============================================================ */
#content #domain-transfer-ordered{ margin:1.5em auto; }

/* the ordered domain, restated as a chip so it is unmistakable */
#content .tsu-domain{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  padding:5px 12px 5px 10px;
  border-radius:var(--dtk-r-pill);
  background:#fff;
  border:1px solid var(--dtk-border-strong);
  font-size:15px;
  color:var(--dtk-ink);
  max-width:100%;
}
#content .tsu-domain svg{ width:16px; height:16px; flex:none; color:var(--dtk-primary); }
#content .tsu-domain b{ font-weight:600; min-width:0; }
/* inside the slim muted header (contract still missing) the chip must not
   inflate the row -- it is context, not the message */
#content .srg-muted .tsu-domain{ margin-top:6px; padding:3px 10px 3px 8px; font-size:14px; }

/* offer card: tinted so it reads as an offer next to the white info cards */
#content .ce-page .ce-card.tsu-offer{
  background:var(--dtk-primary-soft);
  border-color:#CFE1FA;
}
#content .tsu-offer .ce-card-head{ border-bottom-color:#DCE8FA; }
#content .tsu-offer .ce-card-ico{ background:#fff; }
/* lead + list run one notch above the 14px card body text of the neutral
   cards above: this is the card that asks for a decision */
#content .tsu-lead{ margin:0 0 14px; font-size:15px; color:var(--dtk-body); line-height:1.6; }
#content .tsu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* the legacy stylesheet paints list-style-image:bullet.gif on the li itself,
   so the reset has to sit on the li, not only on the ul (same trap as
   .mfa-apps in the 2FA pages) */
#content .tsu-list li{
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--dtk-body);
}
#content .tsu-list li::before{
  content:"";
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:var(--dtk-r-pill);
  background:var(--dtk-success);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4L8.2 10.8l2.6 2.6 5-5 1.4 1.4-6.4 6.4z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4L8.2 10.8l2.6 2.6 5-5 1.4 1.4-6.4 6.4z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
#content .tsu-cta{ margin-top:20px; }

/* declining must stay possible without hunting for the nav: a quiet link,
   deliberately outside the cards so it never competes with the offer */
#content .tsu-skip{ margin:4px 0 0; text-align:center; }
#content .tsu-skip a{
  font-size:14px;
  font-weight:500;
  color:var(--dtk-muted);
  text-decoration:none;
}
#content .tsu-skip a:hover{ color:var(--dtk-primary); text-decoration:underline; }

@media (max-width:640px){
  /* .srg-done centers itself on mobile; .tsu-domain is inline-flex, so it
     follows that text-align on its own -- only the CTA needs widening */
  #content .tsu-cta .dtn-btn{ display:block; text-align:center; }
}

/* ============================================================
   29. "Domain is available" on the transfer flow
       (domain/templates/transfer_available.html)
   ------------------------------------------------------------
   Asking to transfer a free domain used to end on a bare
   "domain is available" line with nothing to click. The answer
   is good news, so it is presented as such: a centered card
   with the availability badge, the name, and the one action
   that applies - put it in the cart and register it.
   ============================================================ */
#content #domain-transfer-available{ margin:2.5em auto; }
#content #domain-transfer-available .ce-card.tav-card{
  padding:36px 32px 30px;
  text-align:center;
}
#content .tav-badge{ font-size:14px; padding:5px 14px; }
/* the name is the answer to the question the customer asked, so it carries
   the weight; long IDNs still break thanks to the inherited word-break */
#content .tav-domain{
  margin:16px 0 10px;
  font-size:30px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--dtk-ink);
  line-height:1.25;
}
#content .tav-lead{
  margin:0 auto;
  max-width:44em;
  font-size:15px;
  line-height:1.6;
  color:var(--dtk-body);
}
#content .tav-form{ margin:24px 0 0; }
#content .tav-form input[type="submit"].tav-btn{ min-width:230px; }
#content .tav-alt{ margin:16px 0 0; }
#content .tav-alt a{
  font-size:14px;
  font-weight:500;
  color:var(--dtk-muted);
  text-decoration:none;
}
#content .tav-alt a:hover{ color:var(--dtk-primary); text-decoration:underline; }

@media (max-width:640px){
  #content #domain-transfer-available .ce-card.tav-card{ padding:28px 20px 24px; }
  #content .tav-domain{ font-size:24px; }
  #content .tav-form input[type="submit"].tav-btn{ width:100%; min-width:0; }
}

